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

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

Level 1 で About ページが完成しました。次に追加したいのはスキルセクションです。GitHub MCP を設定すると、Claude が Issues を直接読んで実装できます。

---

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

このレベルを終えると、my-portfolio に以下の変化が起きます。

my-portfolio/
├── .claude/
│   └── settings.json             ← ★ 追加（GitHub MCP 設定）
└── src/
    └── components/
        └── Skills.tsx             ← ★ 追加（Issue #1 を読んで生成）

Claude に「GitHub Issue #1 を確認してスキルセクションを実装してください」と一言依頼するだけで、 Issue の要件を読み取ったスキルコンポーネントが src/components/Skills.tsx に自動生成されます。 今後は Issue を書けば、Claude が実装してくれるワークフローが確立します。

---

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

Level 1 で CLAUDE.md と src/components/About.tsx が完成しました。

Step 1: GitHub MCP を .claude/settings.json に追加する

my-portfolio/.claude/settings.json を作成します：

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_your_token_here"
      }
    }
  }
}

GitHub Personal Access Token は github.com/settings/tokens で取得してください（repo スコープが必要）。Claude Code を再起動すると GitHub ツールが有効になります。

✅ 確認: claude を再起動して /mcp を実行し、github サーバーが connected 状態で表示されれば設定成功です。 エラーが出る場合はトークンの権限（repo スコープ）を確認してください。

Step 2: GitHub リポジトリに Issue #1 を作成する

my-portfolio リポジトリに以下の Issue を作成します：

タイトル: スキルセクションを追加する

本文:
## 要件
- プログラミング言語・フレームワーク・ツールをカテゴリ別に表示する
- アイコン付きのカード形式で表示する
- Tailwind CSS でスタイリングする

## 表示するスキル例
- 言語: TypeScript, Python
- フレームワーク: Next.js, FastAPI
- ツール: Docker, GitHub Actions

✅ 確認: GitHub の Issues タブに「スキルセクションを追加する」が #1 として表示されていれば次へ進めます。

Step 3: Claude に Issue #1 を読ませてスキルコンポーネントを生成する

> GitHub Issue #1 を確認して、スキルセクションのコンポーネントを実装してください。

生成された src/components/Skills.tsx：

// src/components/Skills.tsx
// スキルセクションのコンポーネント（Issue #1 に基づく実装）

type Skill = {
  name: string
  category: 'language' | 'framework' | 'tool'
  icon?: string
}

type SkillsProps = {
  skills: Skill[]
}

export const Skills = ({ skills }: SkillsProps) => {
  const categoryLabel: Record<Skill['category'], string> = {
    language: '言語',
    framework: 'フレームワーク',
    tool: 'ツール',
  }

  return (
    <section className="py-16 px-4 max-w-3xl mx-auto">
      <h2 className="text-3xl font-bold mb-8">スキル</h2>
      {(Object.keys(categoryLabel) as Skill['category'][]).map((cat) => (
        <div key={cat} className="mb-8">
          <h3 className="text-xl font-semibold mb-4 text-gray-700">
            {categoryLabel[cat]}
          </h3>
          <div className="flex flex-wrap gap-3">
            {skills
              .filter((s) => s.category === cat)
              .map((skill) => (
                <div
                  key={skill.name}
                  className="flex items-center gap-2 px-4 py-2 bg-white border border-gray-200 rounded-lg shadow-sm"
                >
                  {skill.icon && <span>{skill.icon}</span>}
                  <span className="text-sm font-medium">{skill.name}</span>
                </div>
              ))}
          </div>
        </div>
      ))}
    </section>
  )
}

✅ 確認: src/components/Skills.tsx が作成されましたか？cat src/components/Skills.tsx で内容を確認してください。

💡 何が起きたか: GitHub MCP を設定すると、Claude は mcp__github__get_issue ツールを使って Issue の本文・ラベル・コメントを直接読み込めます。Issue に要件が書かれていれば、「何を作るか」を毎回説明する必要がなくなります。

Step 4: CLAUDE.md に Issue 参照ルールを追記する

## 開発ルール

- 新機能の実装前に、必ず対応する GitHub Issue を確認すること
- コミットメッセージには Issue 番号を含める（例: `feat: add skills section (#1)`）

✅ 確認: CLAUDE.md の末尾に「開発ルール」セクションが追記されていれば Level 2 完了です。

この時点の my-portfolio

• .claude/settings.json — GitHub MCP の設定
• src/components/Skills.tsx — Issue #1 を読んで生成したコンポーネント
• CLAUDE.md — Issue 参照ルールを追記

---

次のレベルへ

スキルセクションが完成しました。次はブログ機能を追加して、記事作成を 1 コマンドで自動化します。

Level 3 実践: /blog コマンドでブログ記事を量産する