Claude Code × React/Next.js開発ガイド｜コンポーネント生成からテスト・最適化まで実践プロンプト集

Claude Codeでフロントエンド開発はどこまでできるのか。答えは「コンポーネントの新規作成からテスト生成、パフォーマンス最適化、アクセシビリティ修正まで、開発プロセスのほぼ全工程」です。ただし、設計の判断やUX上の意思決定は人間が担い、実装の加速をClaude Codeに任せるという役割分担が前提になります。

フロントエンド開発は特にAIコーディングツールとの親和性が高い領域です。コンポーネントの構造が明確で、入出力がプロンプトで記述しやすく、ブラウザで即座に結果を確認できるためです。Claude Codeは「プロンプトで指示 → コード生成 → ブラウザで確認 → 修正指示」というサイクルを高速に回すのに適したツールです。基本的な使い方はClaude Code完全ガイドを参照してください。

この記事でわかること:

• CLAUDE.mdにフロントエンド専用の設定を記述し、Claude Codeの出力品質を安定させる方法
• コンポーネント生成・App Router対応・状態管理・テスト自動化の実践プロンプト10例以上
• Server ComponentとClient Componentの使い分け判断フロー
• TailwindCSS v4 + shadcn/uiのスタイリング、パフォーマンス最適化、アクセシビリティ対応のAI活用法

CLAUDE.mdでフロントエンド開発環境を整える

CLAUDE.mdとは、Claude Codeがセッション開始時に自動で読み込むプロジェクト設定ファイルです。 JetBrainsの「State of Developer Ecosystem 2025」調査では、62%の開発者がAIコーディングアシスタント・エージェント・AIコードエディタのいずれかを活用していると報告されています（出典: JetBrains, "State of Developer Ecosystem 2025", 2025年10月公開）。多くの開発者がAIツールを使う時代では、チーム全体のAI出力品質を揃えることが重要です。CLAUDE.mdに使用するフレームワーク・UIライブラリ・コーディング規約を記述することで、Claude Codeの出力が一貫した品質になります。

CLAUDE.mdが未設定の場合、Claude Codeはプロジェクト構成を推測して動作します。たとえば、TailwindCSSを使っているのにstyled-componentsのコードが生成される、App RouterプロジェクトなのにPages Router向けのファイル構成が出力される、といった不整合が起きます。CLAUDE.mdに技術スタックと規約を明記することで、こうした問題を未然に防げます。

フロントエンド専用テンプレート

以下は、React + Next.js App Router + TailwindCSS + shadcn/uiプロジェクト向けのCLAUDE.mdテンプレートです。そのままコピーしてプロジェクトルートに配置できます。

# プロジェクト概要
React + Next.js 16（App Router）のフロントエンドプロジェクト

## 技術スタック
- Next.js 16（App Router, Turbopack）
- TypeScript 5.x（strict mode）
- TailwindCSS v4
- shadcn/ui v4（Radix / Base UI対応）
- Zustand（クライアント状態管理）

## ディレクトリ構成
- app/ — App Routerのページ・レイアウト
- components/ — 再利用可能なUIコンポーネント
- components/ui/ — shadcn/uiコンポーネント
- lib/ — ユーティリティ・ヘルパー
- hooks/ — カスタムフック

## コーディング規約
- コンポーネントは名前付きexportで定義する（default exportは使わない）
- Propsはinterfaceで定義し、コンポーネントと同じファイルに置く
- 「use client」は必要な場合のみ付与する（デフォルトはServer Component）
- TailwindCSSのユーティリティクラスを使い、カスタムCSSは書かない
- アクセシビリティ: 適切なaria属性・セマンティックHTML・キーボード操作対応を常に含める

## コマンド
- dev: pnpm dev
- build: pnpm build
- test: pnpm test
- lint: pnpm lint
- typecheck: pnpm typecheck

プロジェクト固有の設定を追加する

テンプレートをベースに、プロジェクト固有のルールを追加します。命名規則、状態管理ライブラリの選択、API通信の方法など、チーム内で統一すべき事項を記述しておくと、Claude Codeが生成するコードの品質が安定します。

## 禁止事項
- anyの使用（unknownを使い、型ガードで絞り込む）
- useEffectでのデータ取得（Server ComponentまたはReact Queryを使う）
- インラインstyle属性（TailwindCSSのクラスを使う）
- divの乱用（セマンティックなHTML要素を優先する）

## 命名規則
- コンポーネント: PascalCase（例: UserProfileCard）
- ファイル: kebab-case（例: user-profile-card.tsx）
- フック: use接頭辞 + camelCase（例: useUserProfile）
- 型/interface: PascalCase + Props/State等のサフィックス（例: UserProfileCardProps）

CLAUDE.mdの設定は、プロジェクトに参加するすべてのエンジニアがClaude Codeを使う場合のチーム規約としても機能します。設定ファイルをGitで管理すれば、コードスタイルの統一が自動的に担保されます。

CLAUDE.mdの記述で特に効果が大きいのは「禁止事項」のセクションです。Claude Codeは指示がなければ、状況に応じてany型やインラインスタイルを使うこともあります。明示的に禁止しておくことで、コードレビューの手戻りが大幅に減ります。チームで運用する場合は、既存のESLintルールやPrettier設定との整合性も確認しておくと、Claude Codeの出力がそのままlintを通るようになります。

Reactコンポーネントの生成と改善

Reactコンポーネントの生成は、Claude Codeのフロントエンド活用で最も頻度の高いユースケースです。 プロンプトで要件を伝えるだけで、TypeScriptの型定義・TailwindCSSのスタイリング・アクセシビリティ属性を含んだコンポーネントが生成されます。

コンポーネント生成で最も重要なのは、プロンプトの具体性です。「カードコンポーネントを作って」という漠然とした指示では、Claude Codeが仕様を推測する余地が大きくなり、意図と異なるコードが生成されやすくなります。Props・スタイリング要件・レスポンシブ対応・アクセシビリティ要件を具体的に記述することで、初回の生成精度が大幅に向上します。

基本的なコンポーネント生成プロンプト

以下のプロンプトで、商品カードコンポーネントを生成します。

商品カードコンポーネントを作成して。
- ファイル: components/product-card.tsx
- Props: name(string), price(number), imageUrl(string), description(string), onAddToCart(() => void)
- shadcn/uiのCardコンポーネントをベースにする
- 価格は日本円でフォーマットする
- ホバー時にカードが少し浮き上がるアニメーション
- レスポンシブ: モバイルでは縦並び、デスクトップでは横並び

Claude Codeは、このプロンプトからPropsのinterface定義、Intl.NumberFormatによる通貨フォーマット、TailwindCSSのtransition/hoverクラス、レスポンシブのgridレイアウトを含んだコンポーネントを生成します。重要なのは、生成後にブラウザで表示を確認し、必要に応じて修正指示を出すことです。

product-cardのホバーアニメーションをもう少し控えめにして。
translateYは-2pxで、transitionは200msにして

このように、生成→確認→微調整のサイクルを回すことで、デザインの意図に沿ったコンポーネントを効率的に仕上げられます。

複雑なコンポーネントの段階的な生成

データテーブルのような複雑なコンポーネントは、一度に全機能を指示するよりも段階的に構築する方が精度が高くなります。

ステップ1: 基本構造を生成

ユーザー一覧のデータテーブルを作成して。
- ファイル: components/user-table.tsx
- カラム: 名前, メール, ロール, ステータス, 最終ログイン
- shadcn/uiのTableコンポーネントを使用
- 型定義をしっかり作る

ステップ2: 機能を追加

user-tableにソート機能を追加して。
- カラムヘッダーをクリックするとasc/descが切り替わる
- ソート中のカラムにはアイコンを表示する
- ソートロジックはカスタムフックuseTableSortに分離する

ステップ3: UXを改善

user-tableにページネーションを追加して。
- 1ページあたり10件
- 前へ/次へボタンとページ番号を表示
- 表示件数の切り替え（10/25/50件）を追加

段階的に機能を追加することで、各ステップの出力を確認しながら進められます。一括で指示するよりもコード品質が安定し、手戻りも少なくなります。この「小さく生成 → 確認 → 拡張」のサイクルは、特にテーブル・フォーム・ダッシュボードなど、多機能なコンポーネントで効果を発揮します。

フォームコンポーネントの生成

フォームは、バリデーション・エラー表示・送信処理など、考慮すべき要素が多いコンポーネントです。Claude Codeに具体的な要件を伝えることで、これらを網羅したフォームを生成できます。

ユーザー登録フォームを作成して。
- ファイル: components/signup-form.tsx
- フィールド: 名前, メールアドレス, パスワード, パスワード確認
- バリデーション: Zodスキーマを定義して、useFormでReact Hook Formと統合
- エラーメッセージは各フィールドの下に赤文字で表示
- 送信中はボタンをdisabledにしてローディング表示
- shadcn/uiのInput, Button, Labelを使用

フォームのバリデーションロジックは、Zodスキーマとして独立したファイルに定義させると、サーバーサイドのバリデーションと共有できます。Claude Codeに「スキーマをlib/schemas/signup-schema.tsに分離して」と追加指示すれば、フロントエンドとバックエンドで型安全なバリデーションを共有する構成が実現します。

既存コンポーネントのリファクタリング

Claude Codeは既存のコンポーネントを読み取って改善提案を行うこともできます。特に、長大化したコンポーネントの分割や、ロジックのカスタムフックへの抽出に威力を発揮します。リファクタリングの詳細な手法はClaude Code リファクタリングガイドで解説しています。

components/dashboard-panel.tsxをリファクタリングして。
- 300行を超えているので、責務ごとに分割する
- ロジックをカスタムフックに抽出する
- コンポーネントの再利用性を高める
- 既存のテストが壊れないように注意する

Claude Codeはファイルを読み取った上で、「データ取得ロジックをuseDashboardDataフックに抽出」「チャート表示部分をDashboardChartコンポーネントに分離」「フィルターUIをDashboardFiltersとして独立させる」といった提案を行います。分割後の各ファイルのimport/exportも自動的に整理されるため、手動でリファクタリングするよりも安全かつ高速です。

プロンプトの書き方で出力品質が変わるポイント

コンポーネント生成プロンプトを書く際に意識すべきポイントをまとめます。

要素	具体的に書く	曖昧に書く（非推奨）
ファイルパス	components/user-card.tsx	ユーザーカードを作って
Props	name: string, age: number	適当なPropsで
スタイリング	shadcn/uiのCard + TailwindCSS	きれいなデザインで
レスポンシブ	モバイル縦並び、md以上で横並び	レスポンシブ対応して
アクセシビリティ	alt属性、aria-label、keyboard操作	（言及なし）

ファイルパスを明示することで、Claude Codeはそのファイルを直接作成・編集します。パスを省略すると、Claude Codeがプロジェクト構成を推測してファイルを配置しますが、既存のディレクトリ構成と合わないことがあります。

Next.js App Routerのページ構築

Next.js App Routerは、Claude Codeとの相性が良い領域です。 ファイルベースルーティングの規約がはっきりしているため、Claude Codeはpage.tsx・layout.tsx・loading.tsx・error.tsx・not-found.tsxの役割を正確に理解し、適切なファイルを生成します。Next.js 16 App Routerの新機能も併せて参照してください。

ページとレイアウトの生成

新しいページを作成するときは、以下のように指示します。

ダッシュボードページを作成して。
- パス: /dashboard
- app/dashboard/page.tsx, layout.tsx, loading.tsx, error.tsxを生成
- layoutにはサイドバーナビゲーションを含める
- pageは概要カード（売上・ユーザー数・注文数）を表示
- loading.tsxはスケルトンUIにする
- error.tsxはリトライボタン付きのエラー画面にする

Claude CodeはApp Routerのファイル規約に従って、各ファイルを適切なディレクトリに生成します。layout.tsxにはサイドバーのナビゲーション構造が、loading.tsxにはSuspenseと連携するスケルトンUIが含まれます。

Next.js 16ではTurbopackがデフォルトのバンドラーとして搭載され、開発サーバーのFast Refreshが従来比で最大5〜10倍高速化しています（出典: Next.js公式ブログ, 2025年10月）。Claude Codeでコンポーネントを生成した直後にブラウザで確認し、修正指示を出すサイクルが大幅に高速化するため、フロントエンド開発との相乗効果が特に大きい環境です。

動的ルーティングを使ったページの生成も、Claude Codeに任せられます。

ブログ記事の個別ページを作成して。
- パス: /blog/[slug]
- app/blog/[slug]/page.tsx を作成
- generateStaticParamsでビルド時に静的生成する
- generateMetadataで記事タイトルをページタイトルに設定する
- 存在しないslugの場合はnotFound()を呼ぶ

Server ComponentとClient Componentの使い分け

App Routerでは、コンポーネントはデフォルトでServer Componentです。"use client"ディレクティブを付けたときだけClient Componentになります。この使い分けは、Claude Codeに正確に指示することが重要です。

ユースケース	選択	理由
データ取得・表示のみ	Server Component	サーバーでレンダリングし、クライアントバンドルを削減
onClick・onChange等のイベント	Client Component	ブラウザのイベントハンドラが必要
useState・useEffect	Client Component	Reactフックはクライアントでのみ動作
フォーム送信（Server Actions）	Server Component	サーバーで直接処理可能
認証状態の参照	Server Component	cookiesやheadersをサーバーで読み取る
リアルタイム更新（WebSocket等）	Client Component	ブラウザ接続が必要

Claude Codeへの指示例:

このコンポーネントはServer Componentとして実装して。
データ取得はasync関数で行い、「use client」は付けない。
ユーザー操作が必要な部分だけ、別のClient Componentとして切り出して

この指示により、Claude Codeはデータ取得ロジックをServer Componentに残し、ボタンのクリック処理やフォーム入力などインタラクティブな部分だけをClient Componentとして分離します。

Server ComponentとClient Componentの分離は、パフォーマンスに直結する重要な設計判断です。Server Componentで処理すべきデータ取得ロジックをClient Componentに含めてしまうと、不要なJavaScriptがクライアントバンドルに含まれ、初期ロード時間が増加します。Claude Codeに明確に指示することで、この分離を一貫して維持できます。

CLAUDE.mdに以下の記述を追加しておくと、セッション全体でServer Component優先の方針が維持されます。

## Server/Client Component方針
- デフォルトはServer Component。「use client」は最小限のコンポーネントにのみ付与する
- データ取得はServer Componentで行い、結果をpropsでClient Componentに渡す
- Client Componentは「インタラクション境界」として小さく保つ

Server Actionsとデータ取得

Next.js App RouterのServer Actionsは、フォーム送信をサーバーで直接処理できる機能です。APIルートを別途作成する必要がなく、フォームのaction属性にサーバー関数を直接渡せるため、コード量が大幅に減ります。

お問い合わせフォームをServer Actionsで実装して。
- app/contact/page.tsx にフォームを配置
- app/contact/actions.ts にServer Actionを定義
- Zodでバリデーションする
- 送信成功時はサンクスメッセージを表示
- エラー時はフォームにエラーメッセージを表示
- React 19以降のuseActionStateフックを使う

Server Actionsでは"use server"ディレクティブを付けた関数がサーバーで実行されます。Claude Codeはこの規約を理解しているため、フォーム処理だけでなく、データの作成・更新・削除操作もServer Actionsとして自然に生成します。バリデーションにZodを使う場合、スキーマ定義をクライアントとサーバーで共有する構成も提案してくれます。

状態管理の設計支援

状態管理の設計は、Claude Codeに「何を管理するか」を伝えれば、ストア定義・型・アクションを一括で生成できる領域です。 ただし、状態管理ライブラリの選択や状態の分類（サーバー状態 vs クライアント状態）は人間が判断する必要があります。

React/Next.jsの状態管理は、Server Componentの登場によって考え方が大きく変わりました。従来はReduxなどのグローバルストアにすべてのデータを入れるパターンが一般的でしたが、現在はサーバーで取得するデータはServer Componentでレンダリングし、クライアント側で管理するのはUIの一時的な状態のみというアーキテクチャが主流です。Claude Codeにこの方針をCLAUDE.mdで伝えておくと、適切な状態管理パターンを提案してくれます。

Zustandストアの設計と生成

ショッピングカートのZustandストアを作成して。
- ファイル: lib/stores/cart-store.ts
- 状態: items(商品配列), isOpen(カート表示状態)
- アクション: addItem, removeItem, updateQuantity, clearCart
- 商品の型: id, name, price, quantity, imageUrl
- 合計金額の計算はderived stateで実装
- persistミドルウェアでlocalStorageに永続化

Claude Codeは、Zustandのストア定義と商品の型定義を生成します。persistミドルウェアの設定、getState()を使った合計金額の算出ロジック、各アクションのイミュータブルな状態更新が含まれます。

Zustandを選択する理由は、ボイラープレートの少なさとTypeScriptとの親和性です。Reduxのようなaction/reducer/selectorのパターンが不要で、Claude Codeが生成するコードもシンプルになります。一方、Jotaiはアトムベースの設計で、コンポーネントごとに細かい状態を管理する場合に向いています。プロジェクトの状態管理の粒度に応じて使い分けてください。

サーバー状態とクライアント状態の分離

フロントエンドの状態管理では、APIから取得するサーバー状態と、UI操作に関わるクライアント状態を分離することが重要です。

ユーザーダッシュボードの状態管理を設計して。
- サーバー状態（APIデータ）: React Queryで管理
  - ユーザープロフィール、通知一覧、アクティビティログ
- クライアント状態（UI状態）: Zustandで管理
  - サイドバーの開閉、選択中のタブ、フィルター条件
- それぞれのフックとストアを生成して

このパターンにより、APIデータのキャッシュ・再取得・楽観的更新はReact Queryが担い、UIの一時的な状態はZustandが軽量に管理します。責務の分離がコードの保守性を高めます。

状態管理でありがちな失敗は、すべての状態をグローバルストアに入れてしまうことです。フィルター条件やモーダルの開閉状態のように、特定の画面でしか使わない状態はURLパラメータやコンポーネントローカルのstateで管理する方が適切です。Claude Codeに「この状態はどこで管理すべきか」と質問すれば、状態の種類に応じた配置を提案してくれます。

TailwindCSS + shadcn/uiのスタイリング生成

TailwindCSSとshadcn/uiの組み合わせは、Claude Codeとの親和性が高い技術スタックです。 ユーティリティクラスによるスタイリングはプロンプトで指示しやすく、shadcn/uiのコンポーネント構造はClaude Codeが正確に理解できます。

shadcn/uiコンポーネントのカスタマイズ

shadcn/uiのコンポーネントをプロジェクトのデザインに合わせてカスタマイズする例です。

shadcn/uiのDialogコンポーネントをカスタマイズして、
確認ダイアログとして使えるConfirmDialogを作成して。
- ファイル: components/confirm-dialog.tsx
- Props: title, description, confirmLabel, cancelLabel, onConfirm, onCancel, variant(danger/warning/info)
- variantに応じてアイコンとボタンの色を変える
- dangerの場合は赤色のdestructiveボタン
- Escキーとオーバーレイクリックでキャンセル

レスポンシブ・ダークモード対応

ナビゲーションヘッダーを作成して。
- モバイル: ハンバーガーメニュー（シートで開く）
- デスクトップ: 横並びナビゲーション
- ダークモード対応（next-themesのuseThemeを使用）
- テーマ切り替えボタンを右端に配置
- TailwindCSSのdark:プレフィックスでスタイルを切り替える

TailwindCSS v4ではCSS変数ベースの設計が標準化され、ダークモードの実装がさらに簡潔になっています。Claude Codeはv4の@themeディレクティブと変数ベースのカラーシステムを理解しているため、「v4の書き方で」と指定すれば最新の記法で生成します。

shadcn/uiは、v4でRadixとBase UIの両方をプリミティブとして選択できるアーキテクチャに拡張されています。コンポーネントのソースコードがプロジェクト内にコピーされるため、Claude Codeはそのファイルを直接読み書きしてカスタマイズできます。これは、node_modules内のコンポーネントを使うUIライブラリと比べた大きな利点です。

スタイリングで注意すべき点は、TailwindCSSのバージョンです。CLAUDE.mdに「TailwindCSS v4」と明記しておかないと、Claude Codeがv3の記法（tailwind.config.jsベース）でコードを生成することがあります。v4では設定がCSS内の@themeブロックに移行しているため、バージョンの明示は重要です。

デザインシステムとの統合

プロジェクトにデザイントークン（色・フォント・スペーシング）が定義されている場合、CLAUDE.mdに記述しておくとClaude Codeの出力が統一されます。

## デザイントークン
- Primary: hsl(222, 47%, 31%) — ブランドカラー
- Destructive: hsl(0, 84%, 60%) — エラー・削除操作
- Radius: 0.5rem — デフォルト角丸
- Font: Inter（欧文）, Noto Sans JP（和文）

この記述があれば、Claude Codeはハードコードされた色値ではなく、CSS変数やTailwindのカスタムカラーを使ったコードを生成します。

テストコードの自動生成

テストコードの生成は、Claude Codeがフロントエンド開発で最も時間を節約できる領域の一つです。 フロントエンドのテストは「書くべきだと分かっているが、時間が足りなくて後回しにしがち」な作業の代表格です。Claude Codeに任せることで、コンポーネント実装と同時にテストを整備する習慣が自然と身につきます。

Claude Codeはコンポーネントの実装を読み取り、レンダリング・ユーザー操作・エッジケースをカバーするテストを生成します。テスト駆動開発で先にテストを書いてから実装する手法についてはClaude Code TDD開発ワークフローを参照してください。

React Testing Libraryによる単体テスト

components/product-card.tsxのテストを作成して。
- ファイル: components/product-card.test.tsx
- React Testing Libraryを使用
- テストケース:
  - 商品名・価格・説明が正しく表示される
  - 「カートに追加」ボタンをクリックするとonAddToCartが呼ばれる
  - 価格が日本円フォーマットで表示される
  - 画像にalt属性が設定されている
  - 長い商品名が適切にトランケートされる

Claude Codeは、render・screen・fireEventを使ったテストコードを生成します。expectの記述ではアクセシビリティロール（getByRole）を優先し、テストIDへの依存を最小限にします。

テスト生成のコツは、テストケースを具体的にリストアップすることです。「テストを書いて」だけでは、正常系のレンダリングテストしか生成されないことがあります。エッジケース（空データ・長すぎるテキスト・未定義のProps）を明示的に指定することで、より堅牢なテストが得られます。

また、コンポーネントの実装とテストを同時に生成させることも効果的です。

components/notification-badge.tsxを作成して。同時にテストも書いて。
- 未読数を表示するバッジコンポーネント
- 未読数が0の場合はバッジを非表示にする
- 99件を超えたら「99+」と表示する
- テストで上記3ケースをカバーする

実装とテストを同時に生成すると、Claude Codeはテストが通ることを前提にコンポーネントを設計するため、テスタブルな構造のコードが出力されやすくなります。

Playwrightによるe2eテスト

ログインフローのe2eテストを作成して。
- ファイル: e2e/login.spec.ts
- Playwrightを使用
- テストケース:
  - 正常なログイン（メール+パスワード）
  - バリデーションエラー（空欄送信）
  - 無効な認証情報でのエラーメッセージ表示
  - ログイン後のダッシュボードへのリダイレクト

パフォーマンス最適化

パフォーマンス最適化は、フロントエンド開発においてユーザー体験を左右する重要な工程です。 Core Web Vitals（LCP・FID・CLS）のスコアは検索順位にも影響するため、技術的な課題であると同時にビジネス上の課題でもあります。Claude Codeにパフォーマンス最適化を依頼する際は、「何を最適化したいか」を具体的に伝えることが重要です。「パフォーマンスを改善して」という漠然とした指示よりも、具体的な問題を指定した方が効果的です。

React Server Componentsの活用

app/products/page.tsxを最適化して。
- 商品一覧の取得はServer Componentで行い、クライアントバンドルから除外する
- フィルターUIだけをClient Componentとして分離する
- 商品カードの表示はServer Component側に残す

Server Componentを活用することで、データ取得ロジックとその依存ライブラリがクライアントバンドルに含まれなくなります。これにより、初期ロード時のJavaScriptサイズを大幅に削減できます。

Claude Codeに最適化を依頼する前に、現状のバンドルサイズを把握しておくと効果的です。以下のプロンプトで分析を依頼できます。

pnpm build を実行して、ビルド結果のRoute別バンドルサイズを分析して。
特にサイズが大きいルートを特定し、改善策を提案して

Claude Codeはビルドログを解析し、「このルートはクライアントサイドで不要なライブラリを含んでいる」「このコンポーネントをServer Componentに変更すれば30KB削減できる」といった具体的な提案を行います。

動的インポートとSuspense

ダッシュボードの重いチャートコンポーネントを遅延ロードにして。
- next/dynamicを使ってチャートコンポーネントを動的インポートする
- ssr: falseオプションを付ける（チャートライブラリはブラウザAPIに依存）
- ロード中はスケルトンUIを表示する
- Suspenseバウンダリで囲む

画像・フォント最適化

プロジェクト全体の画像をnext/imageに置き換えて。
- img要素をすべてImageコンポーネントに変更
- width/heightを指定する（レイアウトシフト防止）
- priority属性はファーストビューの画像のみに付ける
- 残りはlazyロードにする

Next.js 16では、Turbopackによって開発時の画像処理も高速化されています。フォントはnext/fontを使うことで、レイアウトシフトのないWebフォント読み込みを実現します。

メモ化とレンダリング最適化

不要な再レンダリングの防止も、Claude Codeに依頼できるパフォーマンス最適化の一つです。

app/dashboard/page.tsxの再レンダリングを最適化して。
- React.memoが有効なコンポーネントを特定する
- useMemoで高コストな計算をキャッシュする
- useCallbackでイベントハンドラを安定化する
- ただし、過剰な最適化はしない（プロファイリングで問題が確認された箇所のみ）

注意点として、React.memoやuseMemoの過剰な使用はかえってコードの複雑さを増すだけです。Claude Codeに「プロファイリングで問題が確認された箇所のみ」と明示することで、必要な箇所だけに最適化を適用させられます。

アクセシビリティ対応

アクセシビリティ対応は、Claude Codeに「チェックして修正して」と指示するだけで、既存コンポーネントの改善が可能な領域です。 WAI-ARIAのルールに基づいた修正を自動で適用します。

WAI-ARIAの自動チェックと修正

components/ディレクトリのコンポーネントをアクセシビリティ観点でチェックして。
- aria属性の不足を確認する
- セマンティックHTMLへの置き換え提案（divの乱用がないか）
- color contrastの問題を指摘する
- フォーム要素のlabel紐づけを確認する
- 問題があればその場で修正して

キーボードナビゲーション対応

components/dropdown-menu.tsxにキーボード操作を追加して。
- Enterキーで開閉
- 上下矢印キーでアイテム移動
- Escキーで閉じる
- Tabキーでフォーカス移動
- aria-expanded, aria-activedescendantを適切に設定

アクセシビリティ対応は後回しにされがちですが、Claude Codeに任せることで、実装コストをほぼゼロにできます。shadcn/uiはRadix / Base UIプリミティブ上に構築されているため、基本的なキーボード操作とARIA属性は組み込み済みですが、カスタムコンポーネントでは明示的な対応が必要です。

アクセシビリティ対応をCLAUDE.mdの規約に含めておくと、新規コンポーネントの生成時から自動的にa11y対応のコードが出力されます。本記事の冒頭で紹介したCLAUDE.mdテンプレートには、「適切なaria属性・セマンティックHTML・キーボード操作対応を常に含める」という記述を含めています。この一行があるだけで、Claude Codeはdivの代わりにnav・main・section・articleなどのセマンティック要素を使い、ボタンにはaria-labelを付与し、フォーム要素にはlabelを紐づけたコードを生成します。

開発ワークフローとClaude Codeの役割分担

フロントエンド開発は、設計・実装・テスト・レビュー・最適化というフェーズを繰り返すプロセスです。 Claude Codeは各フェーズで異なる役割を果たします。ここまで個別のユースケースを紹介してきましたが、開発プロセス全体の中での位置づけをまとめます。

フェーズ	Claude Codeの役割	プロンプト例
設計	ディレクトリ構成・型定義の提案	「この機能のコンポーネント構成を提案して」
実装	コンポーネント・ページの生成	「ユーザー一覧ページを作成して」
テスト	テストコードの自動生成	「このコンポーネントのテストを書いて」
レビュー	コード品質のチェック	「このファイルの改善点を指摘して」
最適化	パフォーマンス・a11y改善	「バンドルサイズを削減する方法を提案して」

Claude Code Skillsを使えば、頻繁に行う操作をカスタムコマンドとして保存できます。たとえば、「新規コンポーネント作成 + テスト生成 + Storybook追加」を一つのSkillにまとめれば、毎回同じプロンプトを書く必要がなくなります。

Git操作の自動化と組み合わせることで、「コンポーネント実装 → テスト追加 → コミット → PR作成」までをスムーズに進められます。CI/CD環境との連携についてはDocker・DevOps活用ガイドを参照してください。

Claude Codeが苦手なフロントエンド作業

Claude Codeは万能ではありません。以下の作業は人間が主導する方が効果的です。

作業	理由
ピクセル単位のデザイン調整	ブラウザ上の見た目を直接確認できないため、微調整は人間が行う方が速い
UXフローの設計	ユーザー行動の理解・ペルソナ設計はAIよりも人間の判断が重要
アニメーションのタイミング調整	「心地よさ」の判断は主観的であり、ブラウザで実際に体験して決める
サードパーティライブラリの選定	バンドルサイズ・メンテナンス状況・コミュニティの評価は人間が判断する

「何を作るか」は人間が決め、「どう実装するか」の実行速度をClaude Codeで加速する。この役割分担を意識することが、フロントエンド開発におけるAI活用の現実的な最適解です。

よくある質問（FAQ）

Claude Codeでフロントエンド開発はどこまでできる？

コンポーネントの新規作成、既存コードのリファクタリング、テスト生成、パフォーマンス最適化、アクセシビリティ修正まで、実装工程のほぼ全域をカバーできます。特に効果が高いのは、ボイラープレートの多い作業（フォームバリデーション、テーブルコンポーネント、CRUD画面）と、定型的だが手間のかかる作業（テストコード生成、アクセシビリティ対応）です。Claude Codeの得意・不得意の詳細は「開発ワークフローとClaude Codeの役割分担」セクションを参照してください。

Claude CodeでNext.js App Routerのページを作る方法は？

CLAUDE.mdにApp Routerの規約（ディレクトリ構成、Server/Client Componentの使い分けルール）を記述した上で、「app/dashboard/page.tsxを作成して」のようにファイルパスを指定して指示します。Claude CodeはApp Routerのファイル規約（page.tsx・layout.tsx・loading.tsx・error.tsx）を理解しているため、適切なファイル構成を自動生成します。動的ルーティング（[slug]）、ルートグループ（(marketing)）、パラレルルート（@modal）といったApp Router固有のパターンにも対応しています。ファイルパスを明示することが精度向上のポイントです。

フロントエンド開発でのCLAUDE.mdの書き方は？

本記事の「CLAUDE.mdでフロントエンド開発環境を整える」セクションで、コピペ可能なテンプレートを提供しています。最低限、技術スタック（フレームワーク・UIライブラリ・スタイリング手法）、ディレクトリ構成、コーディング規約（命名規則・禁止事項）を記述してください。プロジェクトの実情に合わせてカスタマイズすることで、Claude Codeの出力品質が安定します。特に禁止事項の記述が効果的で、anyの使用禁止、useEffectでのデータ取得禁止、インラインstyle禁止などを明記しておくと、コードレビューでの手戻りが大幅に減ります。

Claude Codeでテストコードを自動生成できる？

React Testing Libraryの単体テスト、Playwrightのe2eテストの両方を自動生成できます。既存のコンポーネントファイルを指定して「テストを書いて」と指示するだけで、レンダリング確認・ユーザー操作・エッジケースをカバーするテストコードが生成されます。生成されたテストはそのまま実行でき、多くの場合は初回で全テストがパスします。テストが失敗した場合は、Claude Codeにエラーメッセージを貼り付けて「このテストを修正して」と伝えれば、原因を特定して修正します。テスト駆動開発で活用する方法はClaude Code TDD開発ワークフローで詳しく解説しています。

Claude Codeのfrontend-designスキルとは？

frontend-designは、Anthropicが公式に提供するClaude Code用スキルで、UIコンポーネントのデザイン品質を向上させるために開発されました。別途インストールして使用します。AIが生成するUIが「どれも似たようなデザインになる」問題（AIスロップ）を解決するため、多様なデザインスタイル・カラーパレット・フォントペアリングを組み込んでいます。/frontend-designコマンドで呼び出すことで、視覚的に独自性のあるUIを生成できます。ランディングページ・ヒーローセクション・ポートフォリオなど、ビジュアル面での差別化が重要なページで特に有効です。通常のコンポーネント生成との違いは、デザインの多様性と視覚的なインパクトを重視する点にあります。

まとめ

Claude Codeは、フロントエンド開発の「実装→テスト→最適化」サイクルを大幅に加速します。本記事で紹介したポイントを整理します。

• CLAUDE.mdの設定が出発点。技術スタック・コーディング規約・禁止事項を明記することで、Claude Codeの出力品質が安定する
• コンポーネント生成は具体的なプロンプトが鍵。Props・スタイリング・アクセシビリティ要件を明示し、段階的に機能を追加する
• App Router対応はServer Component優先の設計をCLAUDE.mdで方針化し、Claude Codeに一貫させる
• テスト生成はエッジケースを明示的にリストアップすることで、カバレッジの高いテストが得られる
• パフォーマンス最適化は現状分析からスタートし、具体的な改善ポイントを指定する

本記事で紹介した「CLAUDE.md設定 → 具体的なプロンプト → 生成→確認→改善のサイクル」の流れを実践すれば、フロントエンド開発の生産性を大幅に向上させられます。

---

React/Next.jsのプロダクト開発を加速しませんか？ koromoでは、Claude Codeをはじめとする最新のAI開発ツールを活用し、開発期間を大幅に短縮するプロダクト開発サービスを提供しています。サービス詳細はこちらからご確認ください。