#frontend
12件の記事
-
Vitest 5に上げたらモックの呼び出し履歴が消えた！clearMocksの変更とvi.when・vitest doctorの使い方
Vitest 4.1から5.0に上げたら、beforeAllで記録したモックの呼び出しを見るテストが落ちました。clearMocksの既定値の変更など移行で直したところと、新しく入ったvi.when・vitest doctorの使い方をまとめます。
-
CursorのDesign Modeを使ったら、UIの微調整でコードを探す時間がほぼ消えた話
Cursor 3 で入った Design Mode を実際の画面調整で使ってみた記録です。ブラウザ上の要素をクリックして直接指示できる仕組み、エージェントに渡っているコンテキストの中身、向いている作業と向いていない作業を整理しました。
-
React Compilerを入れたらuseMemo・useCallbackがほぼ消えた話！実際に消えたコードを紹介
React Compiler を実際に仕事のプロジェクトに導入してみたら、手動で書いていた useMemo・useCallback の大半が不要になりました。導入手順とハマった点をまとめています。
-
Astro 6にアップグレードしてみた！v5からの移行手順とLive Content Collectionsの使い心地
このブログでも使っている Astro を v5 系から v6 系にアップグレードしたところ、Live Content Collections の安定化と dev サーバーの改善で、コンテンツまわりの体験がかなり変わりました。
-
MSWでAPIモックを入れたらフロント開発が止まらなくなった話！テストでの使い回しとハマりどころ
バックエンドの実装待ちで詰まっていたフロントエンド開発に MSW を導入したところ、APIモックの管理が一気に楽になり、テストも書きやすくなりました。
-
shadcn/uiでReactのUI作りがかなり楽になった話！コードを持つ方式ならではの注意点も
React プロジェクトに shadcn/ui を導入したところ、デザインの一貫性を保ちながらコンポーネントを自由にカスタマイズできて、UIの実装速度がかなり上がりました。
-
CSS Container Queriesのハマりどころ！高さが0になる問題とコンテナクエリ単位の使い方
CSS の @container ルールを使い始めたところ、ビューポートではなくコンテナのサイズに基づいてスタイルを変えられるようになり、コンポーネント単位のレスポンシブ対応がかなりシンプルになりました。
-
useContextのProvider地獄をZustandで解消した話！再レンダリングを増やさない書き方も
複数コンポーネントで共有する 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 を追加したら大量のエラーが出ました。何が起きたのか、どう対処したかをまとめます。
