Level 0 実践: はじめての Claude Code — 詰まる体験をする

このチュートリアルについて

概念・仕組みを先に理解したい方は Level 0 の概念ガイド を参照してください。

---

なぜ最初に「詰まる体験」をするのかというと、コンテキストなし状態の限界を肌で感じることが、Level 1 以降の学びの土台になるからです。「何が足りなかったのか」を知ってから解決策を学ぶと、CLAUDE.md の役割が自然に理解できます。

対象読者: Claude Code をインストールしたばかりで、初めてプロジェクトで使おうとしている方。

学習時間の目安: 読了 5分 + 実践 10分

---

前提: my-portfolio プロジェクトの準備

このチュートリアルでは my-portfolio という Next.js 14 + TypeScript の個人ポートフォリオサイトを使います。まだ中身がほとんどない「空プロジェクト」の状態から始めます。

# Next.js 14 プロジェクトを作成する（まだの場合）
npx create-next-app@14 my-portfolio \
  --typescript \
  --tailwind \
  --app \
  --src-dir \
  --import-alias "@/*"

cd my-portfolio

作成直後のディレクトリ構成は以下のとおりです。

my-portfolio/
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── globals.css
│   └── components/    # まだ空
├── public/
├── package.json
├── tsconfig.json
├── tailwind.config.ts
└── next.config.mjs

Claude Code のインストールがまだの場合は、以下のコマンドでインストールしてください。

npm install -g @anthropic-ai/claude-code
claude --version

---

Step 1: Claude Code を起動する

my-portfolio ディレクトリで Claude Code を起動します。

cd my-portfolio
claude

起動すると対話型の REPL が開きます。プロンプトが表示されたら入力待ち状態です。

✓ Connected to Claude
>

---

Step 2: コンテキストなしでポートフォリオ作成を依頼する

何も準備せずに、こう入力します。

> Next.js でポートフォリオサイトを作って

Claude は大量のコードを返します。たとえばこのような出力です。

// app/page.tsx
export default function Home() {
  return (
    <main className="min-h-screen p-24">
      <h1 className="text-4xl font-bold">My Portfolio</h1>
      <section className="mt-8">
        <h2 className="text-2xl font-semibold">About</h2>
        <p>Your description here...</p>
      </section>
      <section className="mt-8">
        <h2 className="text-2xl font-semibold">Projects</h2>
        ...
      </section>
    </main>
  )
}

一見よさそうに見えますが、いくつかの問題があります。

• このコードをどのファイルに貼ればよいか分からない（app/page.tsx は既に存在するが、上書きするのか追記するのかが曖昧）
• src/ ディレクトリ構成を使っているが、Claude は src/app/page.tsx と app/page.tsx のどちらに書くべきか知らない
• コンポーネントを src/components/ に分割してほしいが、その指示がないのでモノリシックなコードが返ってきた

---

Step 3: 詳細化を求めると噛み合わない

「コンポーネントに分割して」と追加で依頼します。

> コンポーネントに分割して

返ってきた出力例:

// components/About.tsx  ← src/ なしのパスで書かれている
export default function About() { ... }

// components/Projects.tsx  ← 同様
export default function Projects() { ... }

components/About.tsx と src/components/About.tsx は別の場所です。Claude は create-next-app のオプションで --src-dir を指定したことを知らないため、間違ったパスを生成します。

さらに続けて依頼します。

> Tailwind CSS のクラスをもっとちゃんとデザインして

今度は className が増えますが、プロジェクト固有の色設定（tailwind.config.ts のカスタムカラーなど）は使われていません。Claude はそのファイルの中身を知らないからです。

---

Step 4: この状態が Level 0 であることを確認する

何度やり取りしても噛み合わない理由は、Claude がプロジェクトについて何も知らないからです。

Claude が知らないこと	影響
--src-dir オプションで作成したこと	パスが src/components/ ではなく components/ になる
TypeScript を使っていること	.js と .tsx が混在することがある
App Router（app/ ディレクトリ）を使っていること	Pages Router 向けのコードが返ることがある
Tailwind の設定内容	カスタムカラーやフォントが使われない

これが Level 0: コンテキストなし状態 です。Claude Code 自体は正常に動作しています。足りないのは「Claude にプロジェクトを説明する設定ファイル」です。

---

この時点の my-portfolio

my-portfolio/
├── src/
│   ├── app/
│   │   ├── layout.tsx     # create-next-app が生成したまま
│   │   ├── page.tsx       # 変更なし
│   │   └── globals.css
│   └── components/        # 空のまま
├── package.json
└── ...

Claude Code を起動して会話はしたが、プロジェクトのファイルは何も変わっていない状態です。これが Level 0 の終着点です。

---

まとめ: Level 0 から学んだこと

• Claude Code はコンテキストがなければプロジェクト固有の正しいコードを生成できない
• 毎回「このプロジェクトは…」と説明するのは非効率
• 解決策は CLAUDE.md — プロジェクトの技術スタックと構成を Claude に永続的に伝えるファイル

---

次のレベルへ

Level 1 実践: CLAUDE.md を作って About ページを生成する