Claude Codeで爆速フロント開発｜React/Next.js【2026】

「AI にフロントを書かせると、動くけど自分のコードベースの作法を無視した別物が出てくる」——これ、最初に必ずぶつかる壁なんですよね。正直、最初の数日は私もそうでした。生成されたコンポーネントが styled-components 前提だったり、prop の命名がプロジェクトとバラバラだったり。

けれど、Claude Code はターミナルでリポジトリの中身を読みながら動くエージェント型なので、「既存ファイルを読んで、その作法に合わせて書いて」という頼み方ができます。ここがチャット UI に貼り付けるタイプの生成 AI と決定的に違うところ。本記事では React / Next.js（App Router 想定）のフロントエンド開発を、2026年6月時点の Claude Code の機能で加速する実践ワークフローを、指示例とコード例つきで整理します。

なお、本記事のコード例・プロンプトはあくまで叩き台です。AI が生成したコードは人がレビューし、テストを通してからマージする——この前提だけは外さないでください。

1. 前提：なぜフロントエンド開発と相性が良いのか

Claude Code はターミナル常駐のエージェントで、リポジトリ内のファイル読み書き・コマンド実行・差分提示を対話的に行えます（公式の概要はClaude Code Overviewを参照）。フロントエンド開発でこれが効く理由は3つあります。

• コードベース全体を文脈にできる：既存の components/ や hooks/ を読ませた上で「同じ書き方で」と指示できる
• 反復が速い：「この Button に loading 状態を追加して」「型エラーを直して」のような小さな改修を会話で回せる
• 規約をファイルで固定できる：CLAUDE.md にデザインシステム・命名規則を書くと、毎回プロンプトで説明しなくても守られる

動作環境の前提として、本記事は次を想定しています。フレームワーク／バージョン感は読者の環境に合わせて読み替えてください。

# 想定環境（2026年6月時点・例）
- Node.js 20 LTS
- Next.js 15（App Router）
- React 19
- TypeScript 5.x
- Tailwind CSS v4
- Claude Code（最新版）

2. CLAUDE.md にデザインシステムと規約を書いて一貫性を保つ

最初にやるべきは、コンポーネントを1つも生成する前に CLAUDE.md を整えることです。これは Claude Code がセッション開始時に自動で読み込むプロジェクトメモリで、フロントの「作法」を一度書けば毎回守らせられます（メモリの公式仕様はManage Claude’s memoryを参照）。

私の場合、フロントエンド向けの CLAUDE.md には最低限こう書いています。

# CLAUDE.md（フロントエンド規約の抜粋）

## コンポーネント規約
- ディレクトリ: components/ui（汎用）/ components/features（機能別）
- 命名: ファイルは PascalCase、props 型は `XxxProps`
- スタイリングは Tailwind ユーティリティのみ。styled-components / CSS Modules は新規追加しない
- アイコンは lucide-react を使う
- 既存の cn()（clsx + tailwind-merge ラッパー）でクラス結合する

## 状態・データ
- サーバーデータ取得は Server Component + fetch を優先
- クライアント状態は useState/useReducer。グローバルは Zustand
- フォームは react-hook-form + zod

## アクセシビリティ
- インタラクティブ要素は必ずキーボード操作可能に
- 画像には alt、アイコンのみのボタンには aria-label

## やらないこと
- any 型の追加禁止。型は厳密に
- 既存の公開 API（props）を理由なく変更しない

ポイントは「やること」だけでなく「やらないこと」を明記すること。AI は放っておくと新しいライブラリを勝手に足したり、既存 props を破壊的に変えたりするので、禁止事項を書いておくと改修時の事故が激減します。CLAUDE.md の設計を深掘りしたい人はCLAUDE.md設計・運用ガイドも合わせてどうぞ。

3. コンポーネント実装：仕様からコンポーネントを生成する

規約が固まったら、いよいよ生成です。コツは「見た目の説明」だけでなくprops 設計とアクセシビリティ要件まで指示に含めること。曖昧に頼むと曖昧なものが返ります。

指示例（そのまま使えます）：

components/ui/Button.tsx を作って。要件:
- variant: "primary" | "secondary" | "ghost"（デフォルト primary）
- size: "sm" | "md" | "lg"（デフォルト md）
- loading?: boolean（true のとき spinner 表示 & disabled & aria-busy）
- asChild は不要。標準の button 要素をベースに
- スタイルは Tailwind ユーティリティ + 既存の cn() で結合
- 既存 components/ui/Input.tsx の書き方に合わせて
まず Input.tsx を読んでから設計してください。

「まず既存ファイルを読んでから」と一言入れるだけで、import の書き方・型の置き場所・cn() の使い方がプロジェクトに揃います。返ってくるコードはこんなイメージです（生成例・レビュー前提）。

// components/ui/Button.tsx
import { forwardRef } from "react";
import { cn } from "@/lib/utils";
import { Loader2 } from "lucide-react";

type Variant = "primary" | "secondary" | "ghost";
type Size = "sm" | "md" | "lg";

export interface ButtonProps
  extends React.ButtonHTMLAttributes {
  variant?: Variant;
  size?: Size;
  loading?: boolean;
}

const variants: Record = {
  primary: "bg-teal-600 text-white hover:bg-teal-700",
  secondary: "bg-slate-100 text-slate-900 hover:bg-slate-200",
  ghost: "bg-transparent text-slate-700 hover:bg-slate-100",
};

const sizes: Record = {
  sm: "h-8 px-3 text-sm",
  md: "h-10 px-4 text-sm",
  lg: "h-12 px-6 text-base",
};

export const Button = forwardRef(
  ({ variant = "primary", size = "md", loading, disabled, className, children, ...props }, ref) => (
    
      {loading && }
      {children}
    
  ),
);
Button.displayName = "Button";

生成後は npx tsc --noEmit で型を確認し、Storybook やページ上で実際の見た目を見ます。React コンポーネントの基本設計に不安があればReact 公式の Learnで前提を押さえておくと、AI の出力レビューも速くなります。

4. 状態管理とデータ取得：hooks と API 連携

次は状態とデータ。ここは「どのレイヤーで状態を持つか」を指示で明示するのが肝です。Next.js App Router なら、まずサーバーで取れるものはサーバーで取る、というのを規約にしておくとクライアントバンドルが膨らみません。

カスタムフックを作らせる指示例：

商品検索のクライアント状態フック useProductSearch を作って。
- 入力 keyword を 300ms デバウンスして /api/products?q= に fetch
- 戻り値: { keyword, setKeyword, results, isLoading, error }
- AbortController で前のリクエストをキャンセル
- React 19 / TypeScript。any 禁止、戻り値に型を付ける
既存 hooks/useDebounce.ts があれば再利用して。

生成イメージ（レビュー前提）：

// hooks/useProductSearch.ts
import { useEffect, useRef, useState } from "react";
import { useDebounce } from "./useDebounce";

interface Product { id: string; name: string; price: number; }

export function useProductSearch() {
  const [keyword, setKeyword] = useState("");
  const [results, setResults] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
  const debounced = useDebounce(keyword, 300);
  const abortRef = useRef(null);

  useEffect(() => {
    if (!debounced) { setResults([]); return; }
    abortRef.current?.abort();
    const controller = new AbortController();
    abortRef.current = controller;
    setIsLoading(true);
    setError(null);
    fetch(`/api/products?q=${encodeURIComponent(debounced)}`, { signal: controller.signal })
      .then((r) => r.json())
      .then((data: Product[]) => setResults(data))
      .catch((e) => { if (e.name !== "AbortError") setError("検索に失敗しました"); })
      .finally(() => setIsLoading(false));
    return () => controller.abort();
  }, [debounced]);

  return { keyword, setKeyword, results, isLoading, error };
}

ここで効くのが「既存 hooks があれば再利用して」の一文。Claude Code はディレクトリを読めるので、車輪の再発明を防げます。hooks の正しい使い方（依存配列・クリーンアップ）はReact Hooks リファレンスで裏取りしながらレビューしましょう。App Router 固有のデータ取得（Server Component の fetch キャッシュ等）はNext.js App Router ドキュメントが一次情報です。

5. スタイリング：Tailwind とレスポンシブ対応

スタイリングは AI が最も「それっぽく外す」領域でもあります。ブレークポイントの当て方やダークモードの扱いはプロジェクトごとに流儀があるので、規約とセットで頼みます。

レスポンシブなカードグリッドを頼む例：

商品カードのグリッドを Tailwind で。要件:
- モバイル1列 / sm 2列 / lg 3列 / xl 4列
- gap は 4（モバイル）→ 6（md 以上）
- カードは rounded-lg border、hover で shadow-md
- 画像は aspect-[4/3] object-cover、next/image を使う
- 任意 className を受けて cn() で結合
既存の Tailwind 設定（tailwind.config）に合わせて。新しい色は足さない。

「新しい色は足さない」を入れておくと、デザイントークン外の色がじわじわ増える事故を防げます。Tailwind のブレークポイント設計はTailwind Responsive Design ドキュメントが公式の考え方です。出力されたクラスを眺めて、モバイルファースト（無印=モバイル、sm: 以上で上書き）になっているかを必ず確認してください。

6. 既存UIの改修とリファクタ：Plan Mode で安全に

新規生成より神経を使うのが、既存 UI の改修です。「props を増やしたら他の利用箇所が壊れた」は日常茶飯事。ここは Plan Mode が効きます。Plan Mode は変更を即適用せず、まず計画と差分を提示させてから承認して適用するモードです（詳細はPlan Mode実践ガイドを参照）。

改修を安全に進める手順は次の通りです。

1. Plan Mode に入り、「Button に icon-only パターンを追加したい。影響範囲を調べて計画を出して」と依頼する
2. Claude Code が既存の利用箇所（grep 相当）を洗い出し、変更案と影響ファイル一覧を提示する
3. 計画をレビューし、破壊的変更（既存 props 名の変更など）が混ざっていないか確認する
4. 問題なければ承認して適用、tsc --noEmit とテストを実行する
5. 差分を git diff で目視し、意図外の変更がないか最終確認する

大きめのリファクタや、規模の大きいリポジトリで「どこを触るべきか」を把握させたいときは、先にコードベースを理解させると精度が上がります。新人オンボーディングにも使えるこのアプローチは大規模コードベース理解ガイドにまとめてあります。

7. テスト・アクセシビリティ・レビューを自動化する

フロントの仕上げはテストと a11y。生成 AI の出力を信用しきらないためにも、ここを Claude Code に手伝わせて「壊れたら気づける」状態を作ります。

テスト生成の指示例（React Testing Library 想定）：

components/ui/Button.tsx のテストを React Testing Library + Vitest で。
- variant/size ごとに正しいクラスが付くこと
- loading=true で disabled かつ aria-busy になること
- onClick が loading 中は呼ばれないこと
既存 *.test.tsx の書き方に合わせて。テストは振る舞いで書く。

アクセシビリティのレビューも頼めます。「このコンポーネントのキーボード操作と aria 属性を WAI-ARIA の観点でレビューして、問題と修正案を挙げて」と投げると、フォーカス順序や aria-label の不足を指摘してくれます。判断基準の一次情報はWAI-ARIA Authoring Practices。AI の指摘も鵜呑みにせず、ここで裏取りしましょう。

テストや TDD の進め方そのものを深掘りしたい場合はテスト自動生成・TDD実践ガイドが参考になります。コンポーネント生成・テスト・改修を並行で回したくなったら、サブエージェントで分担する方法をサブエージェント並列開発入門で確認してください。

8. つまずきやすいポイントと回避策

最後に、フロントエンド開発で Claude Code を使うときに実際にハマりがちな失敗を、❌→⭕の形で挙げておきます。

• ❌「いい感じのカード作って」と丸投げ → ⭕ props・ブレークポイント・使う画像コンポーネントまで指定する
• ❌ 規約をプロンプトで毎回説明 → ⭕ CLAUDE.md に書いて自動適用させる
• ❌ 既存コンポーネントの改修を即適用 → ⭕ Plan Mode で影響範囲を見てから承認する
• ❌ 生成コードをそのままマージ → ⭕ tsc --noEmit・テスト・git diff 目視を必ず通す
• ❌ クライアントで何でも fetch → ⭕ App Router では「サーバーで取れるものはサーバーで」を規約化する

総じて、Claude Code は「曖昧な指示には曖昧に、具体的な指示には驚くほど正確に」応えます。規約を CLAUDE.md に固定し、改修は Plan Mode で差分を確認し、出力は人がレビューする——この3点を守れば、フロントエンド開発のスループットは確実に上がります。一覧的なテクニックは実践テクニック完全ガイドにまとまっているので、次の一歩としてどうぞ。

まとめ：今日から試す3アクション

1. CLAUDE.md にフロント規約を1ファイル書く：コンポーネント命名・スタイリング方針・禁止事項を10行でいいので明文化する
2. 小さなコンポーネントを1つ生成する：props とアクセシビリティ要件まで含めた指示で Button や Card を作り、レビューの感覚を掴む
3. 既存 UI の改修を Plan Mode で1回試す：影響範囲の洗い出し→承認→tsc/テスト、の安全な流れを体験する

次回は「Claude Code で Storybook とビジュアルリグレッションテストを組み込む」実装例を掘り下げる予定です。React / Next.js のフロント開発を、AI と一緒に、でも事故なく速くしていきましょう。

なお、チームへの Claude Code 導入や、フロントエンド開発フローへの組み込みを本格的に進めたい場合は、Uravation が個別指導・導入支援を行っています。社内規約に合わせた CLAUDE.md 設計やレビュー体制の整備まで伴走しますので、興味があればお問い合わせ・無料相談からどうぞ。

---

著者：佐藤傑（さとう・すぐる）。株式会社Uravation代表取締役。X（@SuguruKun_ai）フォロワー約10万人。100社以上の企業向けAI研修・導入支援を実施。著書『AIエージェント仕事術』（SBクリエイティブ）。

参考・出典

• Claude Code overview — Anthropic 公式ドキュメント
• Manage Claude’s memory（CLAUDE.md）— Anthropic 公式ドキュメント
• Common workflows — Anthropic 公式ドキュメント
• React — Learn React（公式）
• React Hooks リファレンス（公式）
• Next.js App Router ドキュメント（公式）
• Tailwind CSS — Responsive Design（公式）
• WAI-ARIA Authoring Practices Guide — W3C

あわせて読みたい：【2026】Claude Codeでモバイルアプリ開発を効率化する実践ガイド

あわせて読みたい：【2026】Claude Code IDE統合｜VSCode・JetBrains

あわせて読みたい：【2026】Claude Codeでプロトタイプ・MVPを高速に作る実践ガイド

関連記事（自動）

• ▸ Claude Codeでライブラリ選定・技術調査を効率化する【2026】
• ▸ Claude Codeで技術的負債を返済する実践ガイド【2026】
• ▸ Claude Codeでプロトタイプ・MVPを高速に作る実践ガイド【2026】
• ▸ Claude Codeの拡張思考活用ガイド｜難問で深く考えさせる【2026】
• ▸ Claude Code IDE統合｜VSCode・JetBrains【2026】