#frontend
-
React Compiler を導入したら、useMemo だらけのコードから解放された話
React Compiler を実際に仕事のプロジェクトに導入してみたら、手動で書いていた useMemo・useCallback の大半が不要になりました。導入手順とハマった点をまとめています。
-
Astro 6 にアップグレードしたら、Live Content Collections で開発体験がかなり変わった話
このブログでも使っている Astro を v5 系から v6 系にアップグレードしたところ、Live Content Collections の安定化と dev サーバーの改善で、コンテンツまわりの体験がかなり変わりました。
-
MSW（Mock Service Worker）でAPIモックを導入したら、フロントエンド開発がかなり捗った話
バックエンドの実装待ちで詰まっていたフロントエンド開発に MSW を導入したところ、APIモックの管理が一気に楽になり、テストも書きやすくなりました。
-
shadcn/ui を React プロジェクトに導入したら、UIコンポーネント開発がかなり楽になった話
React プロジェクトに shadcn/ui を導入したところ、デザインの一貫性を保ちながらコンポーネントを自由にカスタマイズできて、UIの実装速度がかなり上がりました。
-
CSS Container Queries を使い始めたら、コンポーネントのレスポンシブ対応がかなり楽になった話
CSS の @container ルールを使い始めたところ、ビューポートではなくコンテナのサイズに基づいてスタイルを変えられるようになり、コンポーネント単位のレスポンシブ対応がかなりシンプルになりました。
-
React のグローバル State を Zustand に切り替えたら、useContext のボイラープレートが消えた話
複数コンポーネントで共有する State を useContext で管理していたプロジェクトに Zustand を導入したところ、Provider の入れ子が消え、コードがかなりスッキリしました。
-
CSS Container Queries でメディアクエリを卒業したら、コンポーネントの再利用性がかなり上がった話
ビューポート幅に依存した @media クエリを CSS Container Queries に置き換えたところ、コンポーネント単体でレスポンシブ対応が完結するようになり、管理がかなり楽になりました。
-
Tailwind CSS v4 に移行したら、設定ファイルが消えてかなりスッキリした話
Tailwind CSS v4 へ移行したところ、tailwind.config.js が不要になり設定がCSSに集約されました。@tailwindcss/upgrade で移行もスムーズで、プロジェクトの見通しがよくなりました。
-
PlaywrightでE2Eテストを書き始めたら、フロントの壊れに気づくのが早くなった話
フロントエンドに手動確認が多かったプロジェクトにPlaywrightを導入してみたら、デプロイ後の確認コストがかなり減りました。その構成と感想をまとめます。
-
TypeScript の strict モードを本番コードに有効化してみた話
tsconfig.json に strict: true を追加したら大量のエラーが出ました。何が起きたのか、どう対処したかをまとめます。
