React/Next.js

Next.js 15 と React 19 の組み合わせは、フロントエンドの「描画戦略」を根本から書き換えました。本記事は、create-next-app から始めて App Router・Server Components・Server ...

Reactは「Hooksを覚えれば書ける」言語ですが、「書ける」と「壊れずに保守できる」の間には深い溝があります。実プロダクトのコードレビューで筆者が指摘する内容の8割は、新しい概念ではなく「ありふれたアンチパターンの再発」です。本記事では...

React 18・19で進化した Suspense は、もはや「コード分割の React.lazy 用ローディング」だけのコンポーネントではありません。use() フック、Streaming SSR、Server Components、Ta...

React Server Components(以下 RSC)は、React 19 と Next.js App Router の到来によって「実験的な何か」から本番運用の前提へと地位を変えました。本記事は、"use client" / "u...

Reactの「描画は速いがアプリは重い」という現象は、99%が再レンダリングの設計ミスとネットワーク・バンドル設計の甘さに起因します。本記事では React 19 / React Compiler 時代の最適化戦略を、計測 → 再レンダリン...

React Testing Library(以下RTL)は、Reactコンポーネントを「ユーザーが実際にどう触るか」という観点で検証するためのデファクトスタンダードです。本記事では Vitest をメインに、MSW、カスタムフック、カスタム...

「React Hook Form 使い方を実務レベルで身につけたい」「registerとControllerの使い分けがいまいち分からない」「Zod / Yup / valibot連携、useFieldArrayでの動的フィールド、ファイル...

「useRef 使い方を実務レベルで体系化したい」「useRef DOM 操作はわかるけど、前回値保持・タイマー管理・mutable valueとしての使い分けが曖昧」「React 19でforwardRefが非推奨になったらしいけど、既存...

「TanStack Query 使い方を実務で迷わず書けるようになりたい」「サーバー状態(server state)とクライアント状態が別物だと聞くけれど、結局どこから手をつければ良いか分からない」「React Query キャッシュの仕組...

「React Router 使い方を実務レベルで理解したい」「BrowserRouterとcreateBrowserRouterの違いがいまいち分からない」「loader / action / errorElement / Outlet /...