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

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

Level 2 でスキルセクションが完成しました。次はブログ機能を追加します。記事を書くたびに「MDX ファイルを作って、frontmatter を書いて…」という手作業をなくすため、/blog タイトル の一言で記事の雛形を生成するカスタムコマンドを作ります。

---

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

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

my-portfolio/
└── .claude/
    └── commands/
        ├── blog.md      ← ★ 追加（/blog コマンド定義）
        └── review.md    ← ★ 追加（/review コマンド定義）

また、以下のコマンド一発でブログ記事を生成できるようになります。

/blog TypeScript の型推論を初心者向けに解説

タイトルを入力するだけで frontmatter・構成・コード例がすべて入った MDX ファイルが src/content/posts/ に生成されます。

---

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

Level 2 で .claude/settings.json（GitHub MCP）と src/components/Skills.tsx が完成しました。

Step 1: .claude/commands/blog.md を作成してコマンドを登録する

.claude/commands/blog.md を作成します：

# ブログ記事生成

`$ARGUMENTS` をタイトルとして、`src/content/posts/` に MDX ファイルを生成してください。

## ファイル名のルール

タイトルを kebab-case に変換してファイル名にする。
例: "TypeScript の型推論" → `typescript-type-inference.mdx`

## frontmatter の形式

```mdx
---
title: "$ARGUMENTS"
description: "記事の内容を 1〜2 文で要約"
publishedAt: "今日の日付（YYYY-MM-DD）"
tags: ["関連タグ1", "関連タグ2"]
---
```

## 記事の構成

1. **導入** — なぜこのトピックを学ぶのか・誰向けか・読了時間（3〜4 文）
2. **基本概念** — 初心者向けの説明（具体例を含める）
3. **コード例** — 動作するサンプルコードを最低 1 つ含める
4. **実践的なユースケース** — 実際の開発でどう使うか
5. **まとめ** — 要点を箇条書きで 3〜5 点

## 制約

- です・ます体で書く
- コードブロックには言語を指定する（\`\`\`typescript など）
- 初心者が読んでも理解できる説明を心がける

✅ 確認: .claude/commands/blog.md が作成されましたか？Claude Code を再起動して / を入力すると、/blog がサジェストされれば登録成功です。

Step 2: /blog コマンドを実行してブログ記事を生成する

/blog TypeScript の型推論を初心者向けに解説

生成された src/content/posts/typescript-type-inference.mdx：

---
title: "TypeScript の型推論を初心者向けに解説"
description: "TypeScript が自動で型を推測する仕組みを、具体的なコード例を交えながら初心者向けに解説します。"
publishedAt: "2026-03-29"
tags: ["TypeScript", "入門", "型システム"]
---

TypeScript を使い始めると「型を毎回書くのが面倒」と感じることがあります。実は TypeScript には**型推論**という機能があり、多くの場面で型を明示しなくても自動で推測してくれます。

## 型推論とは

TypeScript は変数に代入された値から、自動で型を推測します。

```typescript
// 型を書かなくても TypeScript が推測する
const name = "田中"   // string と推測される
const age = 25        // number と推測される
const isActive = true // boolean と推測される

// 間違った代入はエラーになる
// name = 123  // Error: Type 'number' is not assignable to type 'string'

…

もう一本生成します：

/blog Next.js App Router 入門

`src/content/posts/nextjs-app-router-intro.mdx` が生成されます。

> **✅ 確認**: `src/content/posts/` に `.mdx` ファイルが2つ生成されていますか？
> `ls src/content/posts/` で確認してください。

> **💡 何が起きたか**: `.claude/commands/` に配置した Markdown ファイルは、Claude Code で `/ファイル名` として呼び出せるスラッシュコマンドになります。`$ARGUMENTS` はコマンド実行時に渡された引数（ここではブログタイトル）に置換されます。

## Step 3: `.claude/commands/review.md` を作成してレビューコマンドを登録する

`.claude/commands/review.md`：

```markdown
# コードレビュー

現在の変更差分（git diff）を確認し、以下の観点でレビューしてください：

1. TypeScript の型安全性（any の使用・型定義の漏れ）
2. React のベストプラクティス（不要な再レンダリング・useEffect の依存配列）
3. アクセシビリティ（alt 属性・aria ラベル）

問題を「重要度（高/中/低）: 説明」の形式で列挙してください。
問題がなければ「✅ レビュー完了: 問題なし」と返してください。

✅ 確認: Claude Code で /review と入力してコマンドが実行されれば登録成功です。

この時点の my-portfolio

• .claude/commands/blog.md — ブログ記事生成コマンド
• .claude/commands/review.md — コードレビューコマンド
• src/content/posts/typescript-type-inference.mdx
• src/content/posts/nextjs-app-router-intro.mdx

---

次のレベルへ

ブログ記事を量産できるようになりました。ただ記事ごとに文体がバラバラになる問題があります。次はメモリを設計して品質を統一します。

Level 4 実践: 文体ルールをメモリに書いて品質を統一する