Level 3 実践: /blog コマンドでブログ記事を量産する
概念・仕組みを先に理解したい方は Level 3 の概念ガイド を参照してください。
Level 2 でスキルセクションが完成しました。次はブログ機能を追加します。記事を書くたびに「MDX ファイルを作って、frontmatter を書いて…」という手作業をなくすため、/blog タイトル の一言で記事の雛形を生成するカスタムコマンドを作ります。
対象読者: MCP 連携を設定済みで、繰り返し作業をコマンド化したい方。
学習時間の目安: 読了 10分 + 実践 30分
前のレベルからの引き継ぎ
Section titled “前のレベルからの引き継ぎ”Level 2 で .claude/settings.json（GitHub MCP）と src/components/Skills.tsx が完成しました。
/blog コマンドを作る
Section titled “/blog コマンドを作る”.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 など）
- 初心者が読んでも理解できる説明を心がける/blog TypeScript の型推論を初心者向けに解説生成された src/content/posts/typescript-type-inference.mdx：
---
title: "TypeScript の型推論を初心者向けに解説"
description: "TypeScript が自動で型を推測する仕組みを、具体的なコード例を交えながら初心者向けに解説します。"
publishedAt: "2026-03-29"
tags: ["TypeScript", "入門", "型システム"]
---
TypeScript を使い始めると「型を毎回書くのが面倒」と感じることがあります。実は TypeScript には**型推論**という機能があり、多くの場面で型を明示しなくても自動で推測してくれます。
**対象読者**: TypeScript を使い始めたばかりの方。
**読了時間**: 約 10 分
## 型推論とは
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` が生成されます。
## コードレビューコマンドも追加する
`.claude/commands/review.md`：
```markdown
# コードレビュー
現在の変更差分（git diff）を確認し、以下の観点でレビューしてください：
1. TypeScript の型安全性（any の使用・型定義の漏れ）
2. React のベストプラクティス（不要な再レンダリング・useEffect の依存配列）
3. アクセシビリティ（alt 属性・aria ラベル）
問題を「重要度（高/中/低）: 説明」の形式で列挙してください。
問題がなければ「✅ レビュー完了: 問題なし」と返してください。この時点の my-portfolio
Section titled “この時点の my-portfolio”.claude/commands/blog.md— ブログ記事生成コマンド.claude/commands/review.md— コードレビューコマンドsrc/content/posts/typescript-type-inference.mdxsrc/content/posts/nextjs-app-router-intro.mdx
次のレベルへ
Section titled “次のレベルへ”ブログ記事を量産できるようになりました。ただ記事ごとに文体がバラバラになる問題があります。次はメモリを設計して品質を統一します。