クイックスター ト
チュートリアル
ここでは解説へ入る前に簡単なチュートリアルを実施して、まずはClaude Codeの基本的な動作に慣れてみましょう。
最初のセッションを開始する
VS Codeでプロジェクトを開いている状態から、Claude Codeを起動します。
- Windows: Ctrl+Shift+P → "Claude Code: Open in Terminal"
- macOS: ⌘+Shift+P → "Claude Code: Open in Terminal"
IDE統合のセットアップ
つぎにIDE統合をするために /ideコマンドを実行して連携するIDEとしてVS Codeを選択します。
/ide
╭──────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ Select IDE │
│ Connect to an IDE for integrated development features. │
│ │
│ ❯ 1. Visual Studio Code │
│ 2. None │
(中略)
Enter to confirm · Esc to exit
これにより、IDEと連携して以下の機能が使えるようになります。
選択コンテキスト: IDEの現在の選択/タブが自動的にClaude Codeと共有され、確実に閲覧中のファイル内容をClaude Codeとのコンテキストに利用してくれます。
(プロンプト右下に選択されているタブが表示されます)
⧉ In README.md
差分表示: コードの変更をターミナルではなくIDE差分ビューアーで直接表示できます。これは/configで設定できます。
ファイル参照ショートカット: Cmd+Option+K（Mac）またはAlt+Ctrl+K（Linux/Windows）を使用してファイル参照（例：@File#L1-99）を挿入します。
診断情報の共有: IDEからの診断エラー（lint、構文など）が作業中に自動的にClaudeと共有されます。
最初の質問をする
以下のような質問で、すでにあるコードベースに対して質問をしてみましょう。
> このプロジェクトは何をしていますか？
プロジェクトの概要を解説してくれたはずです。さらに具体的な質問をしてみましょう。
> このプロジェクトで利用している技術スタックを説明してください
> メイン関数のエントリーポイントはどこですか？
> このプロジェクトのディレクトリ構造について解説して
Claude Codeの機能について質問することもできます。
> Claude Codeで利用できるコマンドについてすべて説明して
⏺ Fetch(https://docs.anthropic.com/en/docs/claude-code/slash-commands)
⎿ Fetching…
╭─────────────────────────────────────────────────────────────────────────────────────────────────╮
│ Fetch │
│ │
│ https://docs.anthropic.com/en/docs/claude-code/slash-commands │
│ Claude wants to fetch content from docs.anthropic.com │
│ │
│ Do you want to allow Claude to fetch this content? │
│ 1. Yes │
│ ❯ 2. Yes, and don't ask again for docs.anthropic.com │
│ 3. No, and tell Claude what to do differently (esc) │
│ │
╰─────────────────────────────────────────────────────────────────────────────────────────────────╯
シェルコマンドを実行したり、外部リソースに アクセスするためには明示的なユーザの許可が必要になるため、許可してもよいか聞かれています。1回のみ許可するか、このプロジェクト内ではこの外部リソースには永続的に許可をするか、許可を与えず他の方法を模索させるかを選択します。
ここで許可したコマンドや外部リソースは、.claude/settings.local.jsonに保存されています。
{
"permissions": {
"allow": [
"WebFetch(domain:docs.anthropic.com)"
],
"deny": [],
"ask": []
}
}
最初のコード作成をおこなう
では、Claude Codeに実際のコーディングをしてもらいましょう。適当になにかアプリを作る指示を出してみてください。
> タスク管理アプリを作って。React使って、タスクの追加、削除、完了マークができるやつ。
⏺ React を使ったタスク管理アプリを作成します。
⏺ Update Todos
⎿ ☐ React アプリの初期セットアップ
☐ タスク管理コンポーネントの作成
☐ タスクの追加機能の実装
☐ タスクの削除機 能の実装
☐ タスクの完了マーク機能の実装
☐ スタイリングの追加
Claude Codeがタスクを計画してフォルダやソースコードを作成し始めます。
目的のコマンドがエラーになったら、そのエラーを解析して、よりうまくいくコマンドを再度実行する様子も見えます。
しかし、無計画にコード作成をすると、想定している機能やエラー処理の考慮をしてくれていない可能性があります。
そこで、原則的にはまず仕様書、設計書をしっかり作ってからコードを作成し、テストを実施するという通常のソフトウェアエンジニアリングの工程管理をClaude Codeを使う場合にも実施する必要がでてきます。
いったんここで作成したフォルダやコードは削除し、Claude Codeとやりとりをした履歴（コンテキスト）もクリアしましょう。
/clear
IDE統合におけるチャットウィンドウの使いかた
編集モードの切り替え
インタラクティブモードの左下の編集モードは shift+tab を押下するたびに「標準」→「書き込み」→「プランのみ」モードに切り替えることが可能です。Claude Codeの編集を一時的に止めて計画内容を確認してから先に進みたいときなどに切り替えて利用してください。
╭─────────────────────────────────────────────────────────────────────────────────────────────╮
│ > │
╰─────────────────────────────────────────────────────────────────────────────────────────────╯
⏵⏵ accept edits on (shift+tab to cycle) ⧉ In tasklist-mvp-implementation-20250907-235011.md
ファイル内の特定箇所やエラー出力などをコンテキストに渡したいとき
インタラクティブモード中にファイル内の特定行を選択したり、エラー出力内を選択すると、自動的にコンテキストに含まれます。これにより、素早くエラー内容や特定行の内容についてClaude Codeに質問をしたり、改善を促したりできます。
╭───────────────────────────────────────────────────────────────────────╮
│ > このエラー内容を説明してください │
╰─────────────────────────────────────────────────────── ────────────────╯
⏵⏵ accept · 1 bash running ⧉ 9 lines selected
スペック駆動開発の基本
上記で試したとおり、Claude Codeは非常に汎用性が高いため、あまり詳細を決めずにノリ（Vibe）でコーディングを開始しても、それなりにコードを生成してくれます。ただしノリでコーディングをおこなっても、ユーザの意図が100%反映されたプロダクトになるとは限らない点に注意が必要です。ソフトウェアエンジニアとして、エンジニアリングの工程管理を通じて、期待通りの機能を充足したソフトウェアを、期待通りの品質・非機能性を満たして作り上げる必要があります。
そのために注目されているのがスペック駆動開発のアプローチです。以下で簡単なスペック駆動開発の作法を実践して、タスク管理アプリケーショ ンを開発してみましょう。
まずは簡単に以下の手順で開発を開始します。
-
Claude Codeに相談しながら、設計やコーディングの標準ルールをプロジェクトメモリ（CLAUDE.md）に定義する
> まずは開発標準ルールとして、開発を進めるときは必ず以下のドキュメントを参照して開発を進めることとします。
- プロダクト企画書 `product.md`
- プロダクトビジョンや目的
- ターゲットユーザと課題・ニーズ
- 主要な機能や目標
- 成功の定義
- 要求仕様書を`requirements.md`
- ユーザストーリー
- 受け入れ条件
- 機能設計書 `design.md`
- 機能ごとのアーキテクチャ
- 構成図
- 技術仕様書 `tech.md`
- テクノロジースタックやフレームワーク
- 開発ツールや手法
- 技術的な制約事項や要求事項
- 利用するサードパーティ製品
- アプリ構造定義書 `structure.md`
- フォルダやファイルの構成
- 命名規則
- コーディング規約
- タスクリスト
- 機能やインフラの実装タスク
- テストや品質保証タスク
追加開発や修正開発をする際には影響ドキュメントを洗い出して当該ドキュメントを修正してから、新規のタスクリストを作成し、タスクを実行することとし、タスクリストのファイル名は`tasklist-`+`実施内容を端的に表現した名用`+`作成日時`で作成すること。
また、ドキュメントを編集したときは、1ファイルごとにわたしに必ず確認、承認を得てから次のファイル編集をおこなってください。
これをCLAUDE.mdに整理して定義してください。プロジェクトメモリ（CLAUDE.md）はプロジェクト全体で共有するチーム共有の指示です。プロジェクトのアーキテクチャ、コーディング標準や一般的なワークフローをあらかじめ規程しておき、Claude Codeに参照させるためのコンテキスト情報として保存しておけます。さらに詳細な管理方法は後述します。
まずはプロジェクトメモリに記載した内容を確認し、簡潔で漏れなく記述できるところまで、繰り返しClaude Codeとやりとりをして仕上げましょう。途中から自分で修正したり書き足したりしたくなりますが、できるかぎりClaude Codeに書かせるクセをつけてお きましょう。
-
Claude Codeに相談しながら、以下の順番でドキュメントにまとめる
- 作りたいアプリのプロダクト企画を
product.mdにまとめる- プロダクトビジョンや目的
- ターゲットユーザと課題・ニーズ
- 主要な機能や目標
- 成功の定義
- 作りたいアプリの要求仕様書を
requirements.mdにまとめる- ユーザストーリー
- 受け入れ条件
- 作りたいアプリの機能設計を
design.mdにまとめる- 機能ごとのアーキテクチャ
- 構成図
- 作りたいアプリの技術仕様を
tech.mdにまとめる- テクノロジースタックやフレームワーク
- 開発ツールや手法
- 技術的な制約事項や要求事項
- 利用するサードパーティ製品
- 作りたいアプリの構造を
structure.mdにまとめる- フォルダやファイルの構成
- 命名規則
- コーディング規約
- 開発を進めるうえでのタスクリスト
- 機能やインフラの実装タスク
- テストや品質保証タスク
⏺ まず、プロダクト企画書(product.md)を作成するために、以下の情報を教えてください：
プロダクトビジョンについて
1. このタスク管理アプリの主な目的は何ですか？
2. どのような価値を提供したいですか？
ターゲットユーザについて
(中略)
> - 作りたいアプリのプロダクト企画を
このようにプロダクト企画書に必要な情報のヒアリングからClaude Codeが開始するので、できあがった仕様書を何度もClaude Codeとやりとりをしながらブラッシュアップし、次の工程に進んでください。
⏺ 必要なドキュメントをすべて作成しました：
1. ✅ product.md - プロダクトビジョンと目的を定義
2. ✅ requirements.md - ユーザストーリーと受け入れ条件
3. ✅ design.md - アーキテクチャとコンポーネント設計
4. ✅ tech.md - 技術スタックと仕様
5. ✅ structure.md - フォルダ構成とコーディング規約
6. ✅ tasklist-initial-implementation-20250907.md - 実装タスクリスト
これらのドキュメントをレビューしていただき、修正や追加したい点があれば教えてください。問題なければ、実装を開始します。
実装を始めてよろしいですか？
╭─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ > │
╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
⏵⏵ accept edits on (shift+tab to cycle) ⧉ In product.md
1ファイルずつレビューと改善を繰り返すことで納得のいく仕様書が出来上がったら、実際に実装タスクを開始しましょう。
> すべてのドキュメントがレビューOKです。実装に進んでください。
ここまで、簡単なClaude Codeの実践と、スペック駆動開発の基礎を実践しました。
ここまでの流れをひととおり押さえたうえで、次はより実践的なアプリケーションを開発してみましょう。