はじめに
昨今、AIの進化は凄まじく次々と新しいモデルや機能が登場しています。
それに伴い我々のAIの使い方にも変化が起こっています。「プロンプトを投げて、そのままコードを書かせる」
という使い方が主流でしたが、もはやそれだけでは十分とは言えません。
そこで今回は、GitHub Copilotの新機能「Planモード」に注目し、
実際に使ってみて「開発体験がどう変わるのか」を紹介します。
プランモードとは
これまでCopilotには主に以下のモードが存在していました。
・Ask
・Agent
・Edit
そして 2025年後半、新たに 「Plan」モード が追加されました。
Planモードの特徴は実装前の詳細設計相当のタスク分解・仕様確認、手順書作成を行うものとなっています。
従来のAIを使用した開発では追加したい機能をプロンプトで投げてそれをAIが実行してくれるというものでした。
具体的にどう変わるのか
今回は例として、TODOリストアプリの作成を目標にPlanモードを使ってみます。
まずプロンプト設計について説明します。
Planモードでは、以下のように 情報を整理したプロンプト を渡すと、より実用的な手順を作成してくれます。
1. ゴール（何を達成したいか）
2. 前提条件 / 制約（期限・技術・環境）
3. 粒度（1タスク何分〜何時間か）
4. 出力フォーマット（チェックリスト・表など）
実際に使用したプロンプト
あなたはプロジェクトマネージャーです。
以下の内容をもとに、実行可能なTODOリストを作成してください。
[目的]
リストに入力したTODOが登録されCRUD操作を可能にする
[前提条件・制約]
仕様技術：JavaScript,html
変数名、クラス名は目的に沿ったわかりやすい名前にすること
マジックナンバーは使用しない。
[粒度]
1タスクは1時間~3時間で完了する単位
[優先度]
CRUD操作を優先
【出力形式】
・チェックボックス付きのTODOリスト
・必要であればフェーズ分け
・各タスクに簡単な補足説明をつける
ポイント
AIに役割（今回は「プロジェクトマネージャー」）を与えると、
その視点で思考・整理してくれるためおすすめです。
Planモードの出力例
このプロンプトをPlanモードに投げた結果、
Copilotは以下のように フェーズ単位で詳細な実行手順 を作成してくれました。
フェーズ1（1〜8h）: 土台整備（UI骨格・状態・定数）
（1–2h）画面レイアウト枠（一覧/詳細/フォーム/操作）をHTMLで用意する（CRUD導線の器）
（1–2h）データモデル（予定）を定義する（例: id, title, createdAt, updatedAt）（CRUD対象の固定）
（1–2h）状態モデルを定義する（例: items, selectedId, formMode）（state→render前提）
（1–2h）定数を集約する（STORAGE_KEY, FORM_MODE, MAX_TITLE_LENGTH 等）（マジック値排除）
完了条件: ブラウザで起動でき、CRUDの導線が画面上に存在する
フェーズ2（2〜6h）: Create（追加）
（1–3h）作成フォーム（タイトル）＋エラー表示領域を作る（空入力などを表示できる）
（1–2h）Create処理（id 生成、createdAt/updatedAt 付与）を実装する（定数で制約適用）
（1–2h）作成成功時のUI更新（フォームリセット、一覧再描画）を統一する（後のCRUDと揃える）
完了条件: 追加した項目が即一覧に出て、入力不備は追加されない
フェーズ3（2〜6h）: Read（一覧・選択・表示）
（1–3h）一覧表示（空状態、件数、選択ハイライト）を実装する（状態が見える）
（1–2h）選択した項目の表示（詳細 or 選択状態）を実装する（編集/削除の起点）
（1–2h）並び順ルールを定義して実装する（比較ロジックを関数化）（表示の一貫性）
完了条件: 一覧が破綻せず、選択で表示が切り替わる
フェーズ4（4〜9h）: Update（編集）※同一フォーム再利用
（1–2h）フォームに CREATE/EDIT モードを導入する（見出し/ボタン文言/キャンセル表示を切替）
（1–3h）「編集開始」導線を追加する（選択中項目→フォームへ値を投入）
（1–3h）Update処理を実装する（updatedAt 更新、バリデーション共通化、対象なしIDを安全に扱う）
（1–2h）キャンセル動作を統一する（編集解除→新規モードへ戻す、状態クリア）
完了条件: フォームは1つだけで編集でき、更新が一覧/表示に反映される
フェーズ5（2〜6h）: Delete（削除）
（1–2h）削除ボタン＋確認UIを実装する（確認文言は定数化）（誤操作防止）
（1–2h）Delete処理を実装する（削除後の selectedId の扱いを仕様化して実装）
（1–2h）削除後のUI整合（詳細/フォーム/一覧の状態）を整える（境界ケース含む）
完了条件: 削除して復活せず、選択や編集状態が破綻しない
フェーズ6（2〜6h）: 永続化（localStorage）
（1–2h）load/save を実装する（STORAGE_KEY 定数、JSON例外時は安全に初期化）
（1–2h）起動時ロード→初回描画を確立する（空/破損データでも落ちない）
（1–2h）CRUD後の保存タイミングを統一する（1箇所に集約し二重保存を防ぐ）
完了条件: リロード後もデータが保持され、CRUD結果が永続化される（＝目的達成）
フェーズ7（2〜6h）: 仕上げ（品質・受け入れ）
（1–2h）手動テスト観点を作って消化する（追加/編集/削除/リロード/不正入力/空状態）
（1–2h）アクセシビリティ最低限を調整する（ラベル、フォーカス、キーボード操作）
（1–2h）文言・エラー表示の一貫性を整理する（文言は定数へ）
完了条件: 主要操作がチェックでOK、既知の制約が説明できる状態
各フェーズには、
・作業時間の目安
・タスクの目的
・実装時の注意点
・完了条件
が明確に記載されており、そのまま作業手順書として使えるレベルでした。
Plan → Agentの連携が強力
Planモードでここまで来たらAgentモードに変えてプロンプトで、
フェーズ1からお願いします。
と投げるとPlanで作成した設計をもとに、順番に実装を進めてくれます。
使ってみて感じたメリット
実際に使ってみて、特に良いと感じた点は以下です。
・フェーズごとに作業が分割され、コードを追いやすい
・目的・完了条件が明確で迷いにくい
・実装前に設計レビューができる
・「とりあえず動くコード」にならない
AIを「作業者」ではなく「設計パートナー」として使える感覚がありました。
このような点がいいと感じました
まとめ
Planモードを使うことで、
設計 → 実装 の流れが明確になる
AI任せにならず、開発の主導権を持てる
中〜大規模開発でも使える再現性のある手順が作れる
と感じました。
「AIに全部書かせる」から
「AIと一緒に考えて作る」
CopilotのPlanモードは、その転換点になる機能だと思います。