Claude Code でブログを作った話 — このサイトができるまで

このブログは Claude Code を使って構築しました。プロジェクトの初期化からデプロイまで、AI とのペアプログラミングでどのように進めたかを振り返ります。

最初のステップ — プロジェクト設計

まず Claude Code にやりたいことを伝えました。

SvelteKit + Tailwind CSS + shadcn-svelte で
Markdown ベースの技術ブログを作りたい。
Cloudflare Pages にデプロイする。
全文検索は Pagefind を使う。

Claude Code はこの要件を受けて、プロジェクトの構成を提案くれます。ディレクトリ構造、必要なパッケージ、設定ファイルの内容まで、一通りの計画を立ててくれます。

段階的な実装

一度にすべてを作ろうとせず、機能ごとに段階的に進めました。

Phase 1: 基盤構築

1. SvelteKit プロジェクトの初期化
2. Tailwind CSS + shadcn-svelte の設定
3. 基本的なレイアウト（ヘッダー、フッター）

Phase 2: 記事管理

1. mdsvex の設定
2. 記事用レイアウトコンポーネント
3. 記事一覧ページ
4. 記事詳細ページ

Phase 3: 機能追加

1. タグによるフィルタリング
2. Pagefind による全文検索
3. ダークモード

Claude Code が特に役立った場面

設定ファイルの作成

svelte.config.js、vite.config.ts、ESLint、Prettier などの設定ファイルは、バージョンによって書き方が変わるため調べるのが大変です。Claude Code はプロジェクトの依存関係を確認した上で、適切なバージョンの設定を生成してくれます。

shadcn-svelte コンポーネントのカスタマイズ

shadcn-svelte のコンポーネントを追加した後、ブログに合わせたカスタマイズも Claude Code に依頼しました。既存のコードスタイルを理解した上で修正してくれるので、一貫性のあるコードが維持できます。

デバッグ

ビルドエラーや型エラーが発生したとき、エラーメッセージを貼り付けるだけで原因を特定し、修正を提案してくれます。特に TypeScript の型エラーは、コンテキストを理解した上での修正が必要なので、AI の支援が効果的でした。

学んだこと

AI に任せて良いこと

• 定型的な設定ファイル — 正確さが求められるが創造性は不要
• ボイラープレートコード — ルーティング、データ取得のパターン
• リファクタリング — 既存のパターンに沿った改善

人間が判断すべきこと

• アーキテクチャの選択 — どの技術を使うか
• デザインの方向性 — 見た目の好み
• 機能の優先順位 — 何を先に作るか

ワークフローのコツ

1. CLAUDE.md を活用する

プロジェクトのルールや構成を CLAUDE.md に書いておくと、Claude Code が毎回コンテキストを理解してくれます。

# CLAUDE.md

## コマンド

- pnpm dev — 開発サーバー
- pnpm build — ビルド

## アーキテクチャ

- 記事は src/posts/\*.md に配置
- すべてのルートは prerender = true

2. 小さな単位で依頼する

「ブログ全体を作って」より「記事一覧ページを作って」の方が品質の高い結果が得られます。

3. 生成されたコードを理解する

AI が書いたコードをそのまま使うのではなく、内容を理解してから採用しましょう。理解できないコードは、説明を求めてから判断します。

まとめ

Claude Code との協業により、技術選定からデプロイまでの開発プロセスが大幅に効率化されました。特に設定ファイルの生成やデバッグでの時間節約が大きかった。AI は万能ではありませんが、適切に活用すれば強力な開発パートナーになります。

参照

• Claude Code 公式サイト
• Claude Code ドキュメント