第 2 章

AI 使用ガイド

AI プログラミングの経済原理を理解し、標準的なワークフローを構築し、高効率な開発環境を整え、AI がより良くあなたのために働けるようにする。

AI プログラミングの経済学

核心原則：Token はお金である

AI にプロジェクトファイルを読み取らせたり、コードを検索させたり、回答を生成させたりするたびに、実際のコストが発生しています。コンテキストが大きいほど、コストも高くなる。プロジェクト全体を読むのと1つのファイルだけを読むのとでは、差は桁違いである。

しかし、より重要なのは——正確なコンテキストはコストを節約するだけでなく、出力をより正確にします。 プロンプトの最適化は「言い回しを磨く」ことではなく、AI が読み取る必要のあるコンテキスト範囲を減らすことです。

正確なコンテキスト戦略

❌ あいまいな説明

「このプロジェクトに何か問題がないか見てください」

→ AIはプロジェクト全体を読み取る必要があり、大量のトークンを消費する

✅ 正確に指定

"`src/utils/auth.ts` のログインロジックを確認する"

→ AI は関連ファイルのみを読み取り、トークン消費を 90% 削減

最適化のコツ

  • ファイルパスを指定する：あいまいな説明よりも良い
  • 機能の範囲を明示する：漠然と「プロジェクトに問題がある」と言うより、より焦点が絞られている
  • 丁寧な表現を削除する：専門家ロールを設定せず、直接タスクを伝える
  • 要約を使用する：長いドキュメントは全文ではなく要約を使う
  • 監視の使用：定期的に Token 使用統計を確認し、無駄を特定する

コスト最適化の例

プロジェクト全体（100+ ファイル）を読み込む~50,000 Tokens
関連するファイルのみを読み取る（3〜5 個のファイル）~5,000 Tokens
💡 正確なコンテキストは節約できます コストの 90%、同時に出力の精度を高める

VibeCoding ワークフロー

コアインサイト：Vibecoding の核心は Prompt ではなく Workflow にある

以前は思いつくままに進めて、AI に直接書かせていましたが、そうすると手戻りが多くなりがちです。本当の上級者は設定に頼るのではなく、話す芸術と標準的なプロセス。

AI に「出口」を与える

AI はときどき答えを知らないのに、無理に作り話をしてしまいます。こう伝えてください："もし不確かな場合は、はっきりそう言って、無理に作り話をするのではなく、私の確認を待ってください。"

例の Prompt：
「もし実装の詳細が不明な場合は、明確に [要確認] と記載してください、
そして、あなたの仮定を説明し、私の確認を待ってから続けてください。"

5つの標準的な手順

1

プロジェクト構造を探索する

まずプロジェクト構造を把握して、途中でファイルが既に作成されていたと気づくのを避ける

2

実装手順を計画する

実装手順を列挙し、AI に思いつくまま書かせるのではなく、計画どおりに実行させる

3

コーディング実装

計画に従って段階的に機能を実装し、各ステップごとに検証する

4

テスト検証

機能が正常に動作するかを検証し、境界ケースとエラー処理を確認する

5

コードを提出する

各独立機能を完成させるたびにコードをコミットし、バージョン履歴を作成する

手戻りを避ける方法

  • •まず探索してからコーディングする：プロジェクト構造を理解してからコードを書き始める
  • •実装手順を計画する：AI に計画どおりに実行させる手順を列挙する
  • •段階的検証：各ステップを完了するたびに検証し、最後まで待たないこと
  • •期限内に提出する：機能を1つ完成させるたびにコミットして、ロールバックしやすくする

拡張：マルチエージェントシステム

コアワークフローを十分に習得したら、マルチエージェントシステムを試すことができます。複数の AI に協働させ、1 つはコードを書き、別の 1 つはレビューし、1 つはテストを書き、別の 1 つはドキュメントを作成します。並列処理で効率を高めることも、逐次処理で品質を確保することもできます。

バージョン管理 Git

AI コーディングは非常に急進的なので、安全策を構築しなければならない

AI は、1つのバグを修正するために3つの古い機能を壊してしまう可能性があります。そのため、適切に設定する必要があります Git、高頻度のものを構築するローカル版履歴。

高頻度コミット戦略

独立した機能の開発を完了したり、Bug を修正して検証が通ったら、git commit を自動で実行してコードをコミットしてください。

標準プロセス：
1. AIが機能を完成 → 検証に合格
2. `git add .` を実行
3. `git commit -m "feat: 添加用户登录功能"` を実行する
4. 次の機能に進む

Commit Message規約

簡潔な中国語の commit message を使用し、今回の変更内容を明確に記述します。

✅ 良い例
feat: ユーザーログイン機能を追加
fix: ログインページのスタイル問題を修正
refactor: ユーザー認証ロジックをリファクタリング
❌ 悪い例
コードを更新する
fix bug
changes

いつでもロールバックできます

コードが壊れてしまっても、いつでも前の安定版に戻せます。

ロールバックコマンド：
# コミット履歴を表示する
git log --oneline
# 直前のコミットに戻す
git reset --hard HEAD~1
# 指定されたコミットにロールバックする
git reset --hard <commit-hash>

設定のコツ

ツールを正しく選ぶことに加えて、AIをさらに使いやすくする3つのコツがあります。AIの記憶力の弱さや、でたらめに書いてしまう問題を解決します。ツールごとに設定方法が異なるため、以下ではツール別に紹介します。

4.1 Cursor の設定

プロジェクトルール (.cursorrules)

プロジェクトのルートディレクトリに作成する .cursorrules ファイル、プロジェクト規範を定義する。

例 .cursorrules：
# コーディング規約
- `any` 型の使用を禁止
- パッケージマネージャーとして `pnpm` の使用を必須とする
- すべてのコンポーネントは TypeScript を使用すること
- ESLint と Prettier の設定に従うこと
- 関数コンポーネントと Hooks を使用すること
- すべての API 呼び出しにはエラー処理を含めること

Skills を作成

Skills は ... に保存されています .cursor/skills/ ディレクトリ内で、Markdown 形式を使用します。

作成手順：
  1. 作成 .cursor/skills/ 目次
  2. 作成 skill-name.md ファイル
  3. Skill の説明と指示を書く
  4. Cursor で Skill を呼び出す
サンプル Skill：
# コードレビュー Skill ## 用途 コード品質を自動レビューする ## 指令 コードがチーム規約に準拠しているか確認する： - TypeScript の型安全性 - エラー処理の完全性 - コードの可読性

MCPサーバー設定

中で .cursor/mcp.json で MCP サーバーを設定します。

.cursor/mcp.json：
{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "your-token"
      }
    },
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem"],
      "env": {
        "ALLOWED_DIRECTORIES": ["/path/to/allowed"]
      }
    }
  }
}

Agent モードの使用

Cursor で次を押す Cmd/Ctrl + K Agent モードを開く、または使用する Cmd/Ctrl + L Chat モードを開く。

  • • Agent モード：AI は複数ステップのタスクを自動実行し、複数のファイルを変更できる
  • • Chatモード：AI と対話して、提案やコードスニペットを得る
  • • Composer：複数の操作を組み合わせて、タスクを一括処理する

4.2 Claude Code 設定

MCPサーバー設定

Claude Code の MCP 設定は ~/.claude/mcp.json またはプロジェクトディレクトリの .claude/mcp.json。

~/.claude/mcp.json：
{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "your-token"
      }
    },
    "sequential-thinking": {
      "command": "node",
      "args": ["path/to/sequential-thinking-server.js"]
    }
  }
}

Skills を作成

Claude Code Skills は に保存されています ~/.claude/skills/ ディレクトリ内。

作成手順：
  1. 作成 ~/.claude/skills/ 目次
  2. 作成 skill-name.md ファイル
  3. Skill の説明を書く（Markdown 形式）
  4. ターミナルで使用 @skill-name 呼び出す

4.3 Codex CLI の設定

プロジェクト規則 (.codexrules)

プロジェクトのルートディレクトリに作成する .codexrules ファイル、または /init コマンドを自動生成します。

/init コマンドを使用する：
codex /init
→ プロジェクト構造を自動分析
→ .codexrules ファイルを生成
手動で作成：
# .codexrules プロジェクトは TypeScript + React を使用 pnpm をパッケージマネージャーとして使用 Airbnb ESLint 設定に従う

Monorepo 分析設定

Codex CLI は大規模な Monorepo プロジェクトを分析できるため、ワークスペース情報の設定が必要です。

  • • 自動検出：Codex は Monorepo 構造を自動検出する
  • • ワークスペース設定：.codexrules でワークスペースのパスを指定する
  • • コンテキスト管理：関連するワークスペースのコードのみを読み込む

4.4 その他のツール設定

Windsurf

  • • Fast Context：自動設定、手動設定不要
  • • Cascade Agent：設定で有効にする
  • • プロジェクトルール：を使用する .windsurfrules ファイル

GitHub Copilot

  • • プロジェクトルール：を使用する .github/copilot-instructions.md
  • • 関連ファイル：関連ファイルのコンテキストを自動識別
  • • コード補完：設定で補完動作を構成する

Continue.dev

  • • 設定ファイル：.continue/config.json
  • • カスタムモデル：ローカルモデル（Ollama）の設定
  • • コンテキストプロバイダー：リポジトリのコンテキストを設定する

Fabric

  • • Patterns：に保存されている ~/.config/fabric/patterns/
  • • カスタム Pattern：作成 pattern-name.md
  • • API Key：環境変数で設定する

効率的なデバッグの要点

AIがあれば、エラーに遭遇しても慌てない

でも、AI に手伝ってもらうには、学ぶ必要がある適切な助けの求め方。

最初に：完全なエラーログを提供してください

初心者は画面いっぱいの赤いエラーを見ると怖くなりがちで、最後の1行だけをコピーしてしまいます。しかし AI は医者のように、正確に診断するには完全な症状を見る必要があります。

❌ 誤ったやり方
Error: Cannot read property 'x' of undefined

→ 情報不足のため、AI は診断できません

✅ 正しいやり方
Error: Cannot read property 'x' of undefined at UserService.getUser (src/services/user.ts:45:12) at UserComponent.handleClick (src/components/User.tsx:23:5) ...完全なスタック情報...

→ 完全な情報があれば、AI は正確に特定できる

💡 操作の提案：いちばん長くて複雑に見える赤いエラーメッセージを、そのまま全部選択してコピーし、AI に送ってください。

第二：ループ修復モード

もしAIが最初に修正できなくても、あきらめないでください。試した結果を伝えて、AIに継続して試させましょう。

反復修正プロセス：
  1. AI が修正案を提示
  2. あなたは方案に従ってコードを修正します
  3. 新しいエラーが出た場合は、結果を説明してください：「指示どおりに修正しましたが、今は新しいエラーが発生しました...」
  4. AI は新しい情報に基づいて修復を継続する
  5. 問題が解決するまで、手順 2〜4 を繰り返す

💡 経験：ほとんどのバグは解決するまでに 2〜3 回の反復が必要です。AI が一度で全ての問題を解決してくれることを期待しないでください。

よくあるエラーの種類と対処

型エラー
TypeScript の型が一致しない
💡 型定義とエラーメッセージを提供する
ランタイムエラー
コード実行時にクラッシュする
💡 完全なスタック情報と関連コードを提供する
論理エラー
機能が期待どおりではない
💡 期待される動作と実際の動作を説明する
依存関係エラー
パッケージのインストールまたはインポートに失敗
💡 package.json とエラー情報を提供してください

学習成果

この章を終えると、あなたは：

  • 1Token コスト最適化戦略を習得し、コンテキスト範囲を正確に制御して、コストを 90% 節約する
  • 2標準的な VibeCoding ワークフローを確立し、5段階の開発プロセスを習得して、手戻りを避ける
  • 3プロジェクトルールと Skills を設定して、AI にプロジェクトの規約を覚えさせ、コード品質を向上させる
  • 4効率的なデバッグ手法を習得し、適切な助けの求め方を学び、問題を迅速に解決する
  • 5高頻度の Git コミット習慣を身につけ、いつでもロールバックできるようにして、安全網を構築する
前の章：環境構築次の章：PRD とドキュメント駆動