Level 2 実践: GitHub Issues を読んで Skills コンポーネントを実装する
概念・仕組みを先に理解したい方は Level 2 の概念ガイド を参照してください。
Level 1 で About ページが完成しました。次に追加したいのはスキルセクションです。GitHub MCP を設定すると、Claude が Issues を直接読んで実装できます。
対象読者: CLAUDE.md を作成済みで、GitHub Issues と Claude Code を連携させたい方。
学習時間の目安: 読了 10分 + 実践 30分
前のレベルからの引き継ぎ
Section titled “前のレベルからの引き継ぎ”Level 1 で CLAUDE.md と src/components/About.tsx が完成しました。
GitHub MCP を設定する
Section titled “GitHub MCP を設定する”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 ツールが有効になります。
GitHub に Issue を登録する
Section titled “GitHub に Issue を登録する”my-portfolio リポジトリに以下の Issue を作成します：
タイトル: スキルセクションを追加する
本文:
## 要件
- プログラミング言語・フレームワーク・ツールをカテゴリ別に表示する
- アイコン付きのカード形式で表示する
- Tailwind CSS でスタイリングする
## 表示するスキル例
- 言語: TypeScript, Python
- フレームワーク: Next.js, FastAPI
- ツール: Docker, GitHub ActionsClaude が Issue を読んで実装する
Section titled “Claude が Issue を読んで実装する”> 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>
)
}CLAUDE.md にタスク管理ルールを追記する
Section titled “CLAUDE.md にタスク管理ルールを追記する”## 開発ルール
- 新機能の実装前に、必ず対応する GitHub Issue を確認すること
- コミットメッセージには Issue 番号を含める（例: `feat: add skills section (#1)`）この時点の my-portfolio
Section titled “この時点の my-portfolio”.claude/settings.json— GitHub MCP の設定src/components/Skills.tsx— Issue #1 を読んで生成したコンポーネントCLAUDE.md— Issue 参照ルールを追記
次のレベルへ
Section titled “次のレベルへ”スキルセクションが完成しました。次はブログ機能を追加して、記事作成を 1 コマンドで自動化します。