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

読了 5分＋実践 20分

Level 0 を完了した方、または CLAUDE.md の効果を実際に体験したい方。

Level 0 を読んでいること

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

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

CLAUDE.md を作ることで、Claude はセッションをまたいでプロジェクトの技術スタックとルールを記憶します。「毎回説明する」という無駄がなくなり、コードの品質と一貫性が上がります。

このレベルで完成するもの

このレベルを終えると、my-portfolio に以下のファイルが追加されます。

my-portfolio/
├── CLAUDE.md                     ← ★ 追加（Claude へのプロジェクト説明書）
└── src/
    ├── app/
    │   └── page.tsx              ← ★ 更新（About コンポーネントを組み込み）
    └── components/
        └── About.tsx             ← ★ 追加（Claude が正しいパスに生成）

npm run dev → localhost:3000 を開くと、名前・職業・自己紹介・SNS リンクが並ぶ About セクションが表示されています。 Level 0 と同じ依頼をするだけで、今度はファイルパスも TypeScript 型定義も正しく生成されます。

前のレベルからの引き継ぎ

Level 0 では、コンテキストなし状態の限界を体験しました。

Claude はプロジェクトのディレクトリ構成（src/ 配下）を知らなかった
App Router と Pages Router の区別がつかず、ファイルパスが間違った
Tailwind のカスタム設定を反映できなかった

現在の my-portfolio の状態:

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

Step 1: CLAUDE.md を作成する

my-portfolio/CLAUDE.md を作成します。このファイルが Claude への「プロジェクト説明書」になります。

# my-portfolio ディレクトリのルートに作成
touch my-portfolio/CLAUDE.md

以下の内容を記述します。

# my-portfolio — Claude へのプロジェクト説明

## プロジェクト概要

個人ポートフォリオサイト。経歴・スキル・制作物・ブログを掲載する。

## 技術スタック

- **フレームワーク**: Next.js 14（App Router）
- **言語**: TypeScript 5
- **スタイリング**: Tailwind CSS 3
- **パッケージマネージャー**: npm

## ディレクトリ構成

src/
├── app/              # Next.js App Router のページ
│   ├── layout.tsx    # ルートレイアウト
│   ├── page.tsx      # トップページ
│   └── globals.css   # グローバルスタイル
├── components/       # 再利用可能な UI コンポーネント
└── lib/              # ユーティリティ・ヘルパー関数

## コーディング規約

- コンポーネントは `src/components/` に配置する（`components/` ではない）
- ファイル名はパスカルケース: `About.tsx`, `Skills.tsx`
- コンポーネントは `export default function` で定義する
- Props には TypeScript の型定義を必ずつける（`interface` または `type`）
- スタイリングは Tailwind CSS のユーティリティクラスのみ使用（CSS Modules は使わない）
- `"use client"` は状態管理や DOM 操作が必要なコンポーネントにのみつける

## よく使うコマンド

```bash
npm run dev      # 開発サーバー起動（localhost:3000）
npm run build    # 本番ビルド
npm run lint     # ESLint 実行
npm run type-check  # TypeScript 型チェック

注意事項

src/app/ 配下のファイルはページ。src/components/ のファイルはコンポーネント
Server Component がデフォルト。useState など React hooks を使う場合は "use client" が必要
画像は public/images/ に配置して next/image の Image コンポーネントで読み込む


> **✅ 確認**: `cat my-portfolio/CLAUDE.md` を実行してファイルの内容が表示されれば作成成功です。

---

## Step 2: Claude Code を起動して読み込みを確認する

Claude Code を起動し、`/memory` コマンドで CLAUDE.md が読み込まれているか確認します。

```bash
cd my-portfolio
claude

起動後に /memory を実行します。

> /memory

出力例:

Active memory files:
  ✓ /Users/yourname/my-portfolio/CLAUDE.md
    - Project: my-portfolio (Next.js 14, TypeScript, Tailwind CSS)
    - Components: src/components/
    - App Router enabled

CLAUDE.md が認識されていることを確認できます。

✅ 確認: 出力に ✓ /Users/yourname/my-portfolio/CLAUDE.md が含まれていれば読み込み成功です。表示されない場合は Claude Code を再起動してください。

💡 何が起きたか: Claude Code は起動時にカレントディレクトリとその親ディレクトリを走査して CLAUDE.md を自動で読み込みます。この自動読み込みにより、次回以降「このプロジェクトは Next.js 14 で…」と毎回説明する必要がなくなります。

Step 3: About コンポーネントの生成を依頼する

Level 0 と同じ種類の依頼をしますが、今度は CLAUDE.md がある状態です。

> About ページのコンポーネントを追加してください。
> 名前・職業・自己紹介文・SNS リンク（GitHub, Twitter）を含む構成にしてください。

Claude は src/components/About.tsx を正しいパスに生成します。

生成された src/components/About.tsx:

interface AboutProps {
  name: string
  role: string
  bio: string
  links: {
    github?: string
    twitter?: string
  }
}

export default function About({ name, role, bio, links }: AboutProps) {
  return (
    <section className="py-16 px-4 max-w-3xl mx-auto">
      <h2 className="text-3xl font-bold text-gray-900 mb-4">About</h2>

      <div className="flex flex-col md:flex-row gap-8 items-start">
        <div className="flex-1">
          <h3 className="text-xl font-semibold text-gray-800">{name}</h3>
          <p className="text-gray-600 mt-1">{role}</p>
          <p className="text-gray-700 mt-4 leading-relaxed">{bio}</p>

          <div className="flex gap-4 mt-6">
            {links.github && (
              <a
                href={links.github}
                target="_blank"
                rel="noopener noreferrer"
                className="text-gray-600 hover:text-gray-900 transition-colors"
              >
                GitHub
              </a>
            )}
            {links.twitter && (
              <a
                href={links.twitter}
                target="_blank"
                rel="noopener noreferrer"
                className="text-gray-600 hover:text-gray-900 transition-colors"
              >
                Twitter
              </a>
            )}
          </div>
        </div>
      </div>
    </section>
  )
}

Level 0 との違いを確認します。

確認ポイント	Level 0（CLAUDE.md なし）	Level 1（CLAUDE.md あり）
ファイルパス	`components/About.tsx`	`src/components/About.tsx`
TypeScript 型定義	なし・または曖昧	`interface AboutProps` で明示
スタイリング	混在することあり	Tailwind CSS のみ
コンポーネント形式	不定	`export default function`

✅ 確認: 生成されたファイルのパスが src/components/About.tsx（src/ あり）になっているか確認してください。components/About.tsx のように src/ がない場合は CLAUDE.md が読み込まれていません。

Step 4: トップページに組み込む

生成された About コンポーネントを src/app/page.tsx に組み込みます。

> src/app/page.tsx に About コンポーネントを組み込んでください。
> データはサンプルのダミーデータで構いません。

Claude が更新した src/app/page.tsx:

import About from "@/components/About"

export default function Home() {
  return (
    <main className="min-h-screen">
      <About
        name="山田 太郎"
        role="フロントエンドエンジニア"
        bio="Next.js と TypeScript を使った Web アプリケーション開発が専門です。
             オープンソースへの貢献と技術ブログの執筆も行っています。"
        links={{
          github: "https://github.com/taro-yamada",
          twitter: "https://twitter.com/taro_yamada",
        }}
      />
    </main>
  )
}

@/ エイリアスは tsconfig.json の paths 設定から自動で使われています。CLAUDE.md に import-alias "@/*" の情報を書いていなくても、Claude は tsconfig.json を参照できます。

✅ 確認: npm run dev を起動して localhost:3000 を開き、About セクションが表示されれば Level 1 完了です。

この時点の my-portfolio

my-portfolio/
├── CLAUDE.md                     # 追加: Claude へのプロジェクト説明書
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   ├── page.tsx              # 更新: About を組み込み
│   │   └── globals.css
│   └── components/
│       └── About.tsx             # 追加: About コンポーネント
├── package.json
└── ...

CLAUDE.md を追加したことで、Claude がプロジェクトの構成を理解し、正しいパスと形式でコードを生成できるようになりました。

まとめ: Level 1 で学んだこと

CLAUDE.md はセッションをまたいで有効な「プロジェクト説明書」
技術スタック・ディレクトリ構成・コーディング規約を書くことで、Claude の出力品質が安定する
/memory でどの CLAUDE.md が読み込まれているか確認できる

次のレベルへ

Level 2 実践: GitHub Issues を読んで Skills コンポーネントを実装する

このページの外部仕様・背景情報は、参考文献を参照してください。[1][2]

参考文献

Anthropic, Claude Code documentation
Anthropic, Claude API documentation

クイズ

Level 2 実践: GitHub Issues を読んで Skills コンポーネントを実装する

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