2023年11月9日 フロントエンド・WEBに関するニュース
- GA4×サチコ×Looker Studioで可視化！ 現場で使われる“ダッシュボード”の作り方など
- CSSのみで簡単に実装できる！ マグネットのようにくっついて追従するホバーエフェクトを実装するテクニック
- ITパスポートでも出題される「4人で3時間のタスクを6人でやると何時間？」
- 仕様と実装から読み解くHTMLのloading属性
- HonoとDenoで社内ツールを作ってみた
- ざっくり書評：UXデザインの教科書
- Tailwind CSSをカオスにしないための5つのベストプラクティス（翻訳）
- Expo + react-native-vercel-ai + Next.jsでAIチャットアプリを作る
- スタイルが適用される範囲を限定する@scopeが非常に便利で有能
- Next.js App Routerの場合componentはどこに置けばいいの？
GA4×サチコ×Looker Studioで可視化！ 現場で使われる“ダッシュボード”の作り方など1@11/21～22虎ノ門で開催
https://webtan.impress.co.jp/e/2023/11/07/45866
- 「Web担当者Forumミーティング 2023 秋」11月21日～22日に虎ノ門ヒルズフォーラムで開催
- MIXI、日本マイクロソフト、タイガー魔法瓶、メルカリなどが登壇
- GA4、Google Search Console、Looker Studioを使ったダッシュボード作成法を紹介
- コンテンツのPDCA、SEO、KPI設定、コンバージョン改善などのセッションも
- 「数字が苦手」でもできるデータ分析の入門や企業Webサイトの未来予測に関するパネルディスカッションも実施
CSSのみで簡単に実装できる！ マグネットのようにくっついて追従するホバーエフェクトを実装するテクニック
- CSSの
:has疑似クラスとAnchor Positioningを使ったホバーエフェクトの実装方法紹介 - JavaScript不要でCSSのみでマグネットのような追従ホバーエフェクトが可能
- HTMLとCSSのコード例を提供し、実際のデモページで動作確認ができる
- トランジション遅延を使い、スムーズなアニメーション効果を実現
- 元ネタとなった他の実装例も参照可能
ITパスポートでも出題される「4人で3時間のタスクを6人でやると何時間？」1／人気記事ランキング2023/11/1～11/7
https://webtan.impress.co.jp/e/2023/11/08/45943
- 11月1日から7日の間に人気だった記事ランキングを発表
- 「仕事算」の解説やスマホキャリアの乗り換え先ランキングなどが特集
- Googleマップの機能強化やデータサイエンティストのスキルチェックリスト更新も話題
- 詐欺サイトの動向やMVNO利用率、SEOの「E-E-A-T」についての記事も含まれる
- 新しい物流拠点の稼働開始やノーコードウェブ制作プラットフォームのプラグイン提供などのニュースも
仕様と実装から読み解くHTMLのloading属性
https://dwango.github.io/articles/html-loading-attribute/
- HTMLのloading属性の仕様とブラウザ実装の詳細解説
- 遅延読み込みがページのLCP（Largest Contentful Paint）を高速化する可能性
- loading属性の
lazyとeagerの値とそのブラウザ依存の実装差 - 遅延読み込みの適切な利用方法とユースケースの紹介
- Webフロントエンド開発者やUIライブラリ、Webフレームワーク開発者への応用例提示
HonoとDenoで社内ツールを作ってみた
https://techblog.raksul.com/entry/2023/11/08/173335
- ラクスル社がHonoとDenoを使用してアイキャッチ画像ジェネレータを開発
- 軽量で高速なHonoフレームワークと次世代JSランタイムのDenoを採用
- Twind、esbuild、Alpine.jsなどのモダンな技術スタックを組み合わせ
- 社内ツールとしてローカルで動作し、プロダクションではないため最新技術を採用しやすい
- HonoのMiddlewareを活用し、Twindでスタイルを適用、Alpine.jsで動的なUIを実現
ざっくり書評：UXデザインの教科書
https://engineer.blog.lancers.jp/ux/ux_design_coursebook/
- 「UXデザインの教科書」の紹介と要約
- UXデザインの基本理論、プロセス、手法を幅広い対象者向けに解説
- 製品やサービスの使用体験に重点を置いたデザインの重要性を強調
- HCD（Human Centered Design）プロセスに基づくユーザー中心の開発手法を紹介
- 製品・サービス開発におけるUXデザインの知識の必要性を説く
Tailwind CSSをカオスにしないための5つのベストプラクティス（翻訳）
https://techracho.bpsinc.jp/hachi8833/2023_11_08/136255
- Tailwind CSS使用時のカオスを防ぐため、デザインシステムの確立とコンポーネントベースの手法の導入が必要
- デザイントークンを活用し、プロジェクト全体で一貫したデザイン値を維持
- 再利用可能なコンポーネントの作成で、HTMLの冗長性を減らし、メンテナンスを容易に
@applyディレクティブの使用は避け、CSSクラス名からスタイルを直感的に理解可能に- ビルドサイズを最小限に抑え、JITエンジンやCSSの最小化でパフォーマンスを向上
Expo + react-native-vercel-ai + Next.jsでAIチャットアプリを作る
https://tech.fusic.co.jp/posts/2023-11-08-expo-react-native-vercel-ai-nextjs-ai-chat-app/
- React Native版のVercel AI SDK（非公式）を使用してAIチャットアプリを作成
- ExpoとNext.jsを組み合わせ、OpenAI APIをバックエンドで呼び出し
- ユーザーエージェントの判定を用いてWebアプリとネイティブアプリでレスポンスを分ける実装
- React Nativeのfetch APIがストリームに対応していないため、改良の余地あり
- 少ないコードでAIチャットアプリを簡単に作成可能、今後の改良に期待
スタイルが適用される範囲を限定する@scopeが非常に便利で有能
https://qiita.com/rana_kualu/items/22546111bb12e56b1304
- CSSの新機能@scopeにより、スタイルの適用範囲を限定可能
- スコープルートを設定し、特定のDOMサブツリー内の要素のみにスタイルを適用
- 特異性に影響せず、スコープ内外の要素を明確に区別
- Chrome 118で実装され、Edgeも対応。FirefoxとSafariは未対応
- CSSの構造化が進み、!importantの乱用が減ることを期待
Next.js App Routerの場合componentはどこに置けばいいの？
https://zenn.dev/brachio_takumi/articles/5af43549cdc4e0
- Next.jsのApp Router使用時のフォルダ構成についての考察
/app内にスタイルやユーティリティ関数、コンポーネントを含めるかどうかの悩み/src内に/appと同階層にコンポーネントなどを配置するシンプルな構成を提案- プロジェクト直下に
/appを配置し、Route GroupsやPrivate Foldersを利用する構成も提案 - Next.jsはプロジェクトファイルの整理方法に自由度が高いが、それゆえの悩みもあると指摘