フロントエンドは『フレームワーク+状態+データ』の3層で考える
2026年のフロントエンドは Server Components や状態管理の進化で大きく変わりました。本記事では編集部の視点で、アーキテクチャの選択を公開情報をもとに整理します。Next.js App Router もご参考に。
レイヤー設計
(1) UI コンポーネント：見た目の純粋関数。(2) コンテナ：データ取得と状態管理。(3) ドメインロジック：純粋関数で再利用。(4) 外部 API クライアント：fetch ラッパー。(5) 型定義：境界の契約。この分離が長期保守性を決めます。
コンポーネント設計
(1) Atomic Design：Atoms/Molecules/Organisms。(2) shadcn/ui：コピー可能なコンポーネント。(3) Headless UI：振る舞いのみ提供。(4) props と children の境界：再利用性に影響。(5) Storybook：UIレビュー基盤。Tailwind CSS 実践 もご参考に。
状態管理の選択肢
(1) useState / useReducer：ローカル状態の基本。(2) Zustand：軽量グローバル。(3) Redux Toolkit：大規模・厳格な変化追跡。(4) Jotai / Recoil：原子的状態管理。(5) React Context：限定スコープでの共有。判断軸：規模と複雑性で選び、必要最小限に。
データフェッチの選択肢
(1) SWR / React Query (TanStack Query)：キャッシュ+再検証。(2) tRPC：型安全 RPC。(3) GraphQL (Apollo / urql)：宣言的データ取得。(4) Server Components：サーバー側fetch+RSC payload。(5) Suspense：宣言的なローディング状態。GraphQL 実践 も合わせて。
レンダリング戦略
(1) CSR：SPAの基本。(2) SSR：初回表示+SEO 重視。(3) SSG：静的事前生成。(4) ISR：オンデマンドの SSG 更新。(5) Streaming + Suspense：プログレッシブ表示。CDN/Edge 実践 もご参考に。
パフォーマンス最適化
(1) Code Splitting：dynamic import。(2) Image Optimization：next/image 等。(3) Font 最適化：next/font 等。(4) Core Web Vitals：LCP/INP/CLS。(5) Bundle 分析：rollup-plugin-visualizer。Chrome DevTools 実践 もご参考に。
失敗しがちなパターン
(1) 状態管理を最初に導入しすぎ。(2) すべて Client Component に：Server 利点喪失。(3) 巨大コンポーネント：分割不可。(4) Props ドリル：階層深くで親をまたぐ。(5) Bundle 肥大：依存チェック不在。対策は、(1)ローカル状態から、(2)Server 優先、(3)単一責務分割、(4)Context/Compound、(5)定期 visualizer、です。