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

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

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

---

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

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

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

---

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

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 コンポーネントで読み込む

---

## 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 が認識されていることを確認できます。

---

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

---

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 を参照できます。

---

この時点の 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 コンポーネントを実装する