frontend-builder

フロントエンドビルダー

概要

サーバーファーストのアーキテクチャを用いて、保守しやすくパフォーマンスに優れた React および Next.js のフロントエンドを構築します。コンポーネント設計、状態管理、データ取得、フォーム、スタイリング、パフォーマンス最適化を扱います。バックエンド API の設計、データベーススキーマ、デプロイインフラストラクチャは対象外です。

クイックリファレンス

パターン	アプローチ	主なポイント
フレームワーク	Next.js App Router（デフォルト）、React + Vite（SPA）	サーバーファーストのレンダリング、ファイルベースのルーティング
コンポーネント	Page、Feature、UI、Layout タイプ	単一責任、型付きの props、コンポジション
サーバーとクライアント	Server Components がデフォルト、リーフノードに 'use client'	コンポーネントツリーの末端にインタラクティブ性を配置
状態（ローカル）	useState、props、親コンポーネントへのリフト	状態を、使用される場所のできるだけ近くに保つ
状態（グローバル）	Context API（テーマ、認証）、Zustand（複雑な場合）	頻繁に変化する値には Context を使わない
データ取得	Server Components（サーバー）、TanStack Query（クライアント）	ミューテーションには Server Actions、キャッシュには revalidatePath
フォーム	React Hook Form + Zod、または Server Actions + useActionState	スキーマ検証、useOptimistic による楽観的更新
スタイリング	Tailwind CSS v4 + shadcn/ui	@theme による CSS ファーストの設定、OKLCH カラー
パフォーマンス	Suspense ストリーミング、コード分割、メモ化	React.lazy()、next/dynamic、選択的な memo()
エラー処理	エラーバウンダリー、ルートごとの error.tsx	個々のコンポーネントではなく、機能セクションをラップする

よくある間違い

間違い	正しいパターン
すべてのコンポーネントに 'use client' を追加する	Server Components をデフォルトにし、インタラクティブ性が必要な場合に限り 'use client' を追加する
複数の責務を持つ巨大なコンポーネント	単一の目的を持つ、特化したサブコンポーネントに分割する
すべての状態をコンポーネントツリーの最上部に置く	状態を、使用される場所のできるだけ近くに保つ
派生データの計算に useEffect を使う	派生値には useMemo を使い、useEffect は副作用に限定する
機能セクションの周囲にエラーバウンダリーがない	ページ全体のクラッシュを防ぐため、機能領域をエラーバウンダリーでラップする
単純なミューテーションのために API ルートを作成する	フォームの送信やミューテーションには 'use server' を付けた Server Actions を使う
Client Components にシリアライズできない props を渡す	サーバーとクライアントの境界を越える props はシリアライズ可能である必要がある（関数やクラスは不可）
Tailwind v4 で tailwind.config.js を使う	CSS ファイル内の @theme ディレクティブを使った CSS ファーストの設定を使用する
Server Components で十分なのに Client Components でデータを取得する	デフォルトでは Server Components で取得し、クライアント側のキャッシュが必要な場合に限り TanStack Query を使う

委譲

フロントエンドを構築する際は、専門スキルに委譲します。

• react-patterns -- React フック、レンダリングパターン、パフォーマンス最適化
• nextjs -- Next.js のルーティング、ミドルウェア、デプロイ設定
• tanstack-query -- クライアント側のデータ取得、キャッシュ、ミューテーション
• tanstack-form -- 複雑なフォーム処理、フィールド単位のバリデーション
• tailwind -- Tailwind CSS のユーティリティパターン、レスポンシブデザイン
• design-system -- トークンの階層構造、コンポーネントアーキテクチャ
• performance-optimizer -- プロファイリング、バンドル分析、Core Web Vitals

参考資料

• コンポーネントアーキテクチャ -- コンポーネントの種類、フォルダー構成、TypeScript のパターン、コンポジション
• サーバーコンポーネント -- サーバーとクライアントの境界、Server Actions、Suspense ストリーミング、データフロー
• 状態管理 -- useState、Context API、Zustand、URL 状態のパターン
• データ取得 -- TanStack Query、Server Components のデータ、キャッシュの再検証
• フォームとバリデーション -- React Hook Form、Zod スキーマ、Server Actions、useActionState
• スタイリング -- Tailwind CSS v4、shadcn/ui、CSS ファーストの設定、レスポンシブパターン
• パフォーマンスとエラー -- メモ化、コード分割、Suspense ストリーミング、エラーバウンダリー