Plan モードで実装前に計画する

Codex 学習目次に戻る

目標と準備

先に依頼の書き方を読みます。選択肢や調査、複数工程がある作業に向き、背景確認・質問・計画作成を行えます。「計画」と書くだけでは不十分で、読み取り専用サンドボックスとも同じではありません。権限と場所を別に確認します。

手順1：やり直せる開始状態

最初のプロジェクトの ZIP にある start 内の5ファイルを、新しい codex-plan-lab の直下へコピーします。index.html、style.css、app.js、core.mjs、core.test.mjs です。修正済み expected は使いません。場所と node --version を確認し、復元用 start を残します。実際のプロジェクトは使いません。

node --test core.test.mjs

開始状態の結果を保存します。2件成功、1件失敗が期待値です。教材の故障なのでテストを弱めません。違う場合は broken や expected ではなく start かを確認します。それぞれ別の教材です。

画面確認は最初の教材の Python プレビューを使います。自分の前の教材サーバーを止め、codex-plan-lab から Windows は py -m http.server 4173 --bind 127.0.0.1、macOS/Linux は py を python3 にして起動します。HTML を直接開かず http://127.0.0.1:4173 へ進み、テストは別端末、終了はサーバー端末で Ctrl+C です。

プレビューを開いたら、必要な以前の教材記録を先に残します。About this exercise の Reset practice data を使い、All tasks で空一覧を確認して Read と Build を追加し、Read だけ完了します。Active／Completed は誤って両方を表示するはずです。教材データだけをリセットし、ブラウザー全体を消しません。

手順2：Plan を有効にして調べる

デスクトップでは教材の課題を作り、入力欄の /plan または Add の Plan mode を使います。CLI は教材から codex を起動し、待機中に /plan を入力します。公式資料には Shift+Tab の切替もあります。モードを確認してから送信します。シェルでは入力しません。入口がなければ更新と対応コマンドを確認します。

Plan before implementation. In this codex-plan-lab, inspect index.html, app.js, core.mjs and core.test.mjs. Do not edit files yet.
Goal: make All, Active and Completed filters correct.
Keep the current UI, storage format and task ordering. Add no dependencies.
Report the existing selector and event wiring, the failing behavior and the smallest implementation scope. Ask about unresolved behavior before proposing a plan.
The plan must name files, acceptance cases, test commands and a scoped restoration method. Separate observations from assumptions.

index.html の既存選択欄、app.js のイベント、core.mjs の visibleTasks の不足を具体的に挙げたか確認します。画面全面変更やフレームワークなら必要な根拠を求めます。All が既定、Active は未完了、Completed は完了、順序維持、空入力は空出力と明示します。

手順3：計画を確認・修正する

次の例のように入力・変更箇所・成功条件が必要で、「分析、開発、テスト」だけでは不十分です。同じ文章でなくても範囲を判断できることが大切です。結果は将来の合格条件で、計画時点の実績ではありません。手動確認とエージェントのブラウザー利用も区別します。

# Filter plan
1. Read the existing selector, event handler and tests. Confirm the start fixture's failing filter assertion.
2. Edit only visibleTasks in core.mjs: active selects unfinished tasks; completed selects finished tasks; all keeps every task in order.
3. Run node --test core.test.mjs. Target: all 3 tests pass without changing their assertions.
4. Preview Read (completed) and Build (active). Expect All=Read,Build; Active=Build; Completed=Read. Empty lists stay empty.
Scope: no dependencies, storage migrations, UI redesign or deployment.
Restore: copy only core.mjs from the preserved start fixture back into this lab. The known failing baseline should return.

「入力配列をその場で変更せず、確認方法を計画に追加」と補足します。filter は新しい配列を作り、タスク自体を変更しません。All は元の配列を返してよいが並べ替え・値変更は禁止です。別の変更が必要なら理由と許可範囲を明示して更新します。

詳しくても誤った計画は実装前に修正する

例：ボタンの作り直し、パッケージ導入、テストを通るよう変更する計画は、詳しくても今回には不適切です。ボタンとイベントは既存で、不足は visibleTasks です。コードの根拠がない手順を示して次の修正を依頼し、範囲、空入力、非変更の条件を再確認してから実装へ進みます。

Revise the plan only; do not implement yet. Use the existing filter controls and event wiring. Limit program changes to visibleTasks in core.mjs, add no dependencies and preserve all test assertions. For each proposed change, cite the observed gap. Include empty input, stable order, no input mutation, actual test execution and separate browser checks. Mark unknown facts instead of assuming them.

手順4：実装して確認する

確認後に画面のモード操作で実装へ戻ります。CLI は現在の Shift+Tab 案内に従い、デスクトップは Plan が解除されたか確認します。次を送り、また計画が来たら連続送信せずモードを確認します。差分は core.mjs の関数だけのはずです。参考例でファイル全体を無確認上書きしません。

Implement the reviewed filter plan now. Modify only visibleTasks in core.mjs. Preserve task order and do not mutate inputs. Keep tests and other files unchanged. Run node --test core.test.mjs, inspect the final diff and report actual results. If browser verification is unavailable, list the manual cases as NOT RUN. Do not publish or deploy this practice project.

export function visibleTasks(tasks, filter) {
  if (filter === "active") return tasks.filter((task) => !task.completed);
  if (filter === "completed") return tasks.filter((task) => task.completed);
  return tasks;
}

参考修正は3件成功するはずです。次に表の画面確認をします。専用ブラウザープロファイルか、画面で教材の架空タスクだけ削除して古い保存値を避けます。普段の全データは消しません。Read と Build を追加して Read のみ完了、空一覧も確認し、実施・未実施を記録します。

問題の対処、復元と完了条件

曖昧なら工程ごとのファイルと合格例を求め、コードと違う仮定なら再読します。テストや依存追加の範囲外差分を確認して戻します。Plan のままで未実装なのはサイト故障ではありません。必要な権限だけを解決し、保護全解除を標準にしません。出力のないテストは未実施です。

最終計画、core.mjs だけの差分、3テストと画面表を残し、計画完成と機能受入を区別します。やり直すなら start/core.mjs だけ戻して2成功1失敗を確認し、別フォルダーや認証は消しません。図1は起点、2は調査と確認、3は実装検証です。長い作業は引継ぎへ進みます。

Codex 学習目次に戻る

詳しい説明を読む

Questions to /plan to Implementation

• AIツール
• チュートリアル
• Codex