不具合修正の一連の流れ

Codex 学習目次に戻る

目標と準備

この段落の教材・資料: コード理解

手順1：故障版と再現手順を固定

broken の5ファイルを新しい codex-bug-lab へコピーし原版を残します。Completed の条件が逆で、start の未実装とは異なります。Get-Location/pwd で場所を確認し、2成功1失敗を実測します。

node --test core.test.mjs

ローカルプレビューは Windows で py -m http.server 4173 --bind 127.0.0.1、macOS／Linux で python3 -m http.server 4173 --bind 127.0.0.1 を使います。URL を開き、残したい架空データがあれば先に記録します。Reset practice data を選び、All tasks で空の一覧を確認してから Read、Build を追加し、Read 完了、Completed 選択の順に進めます。期待は Read、故障版の実際は Build です。この順序を残します。データのリセットはソースファイルを復元しません。

環境、起点、操作、期待、実際、証拠を記し、先にキャッシュ原因と決めません。日付とテストは実測で埋めます。違う画面なら教材と場所を確認し、記事の期待を自分の実測にしません。

# Bug: Completed shows unfinished tasks
Environment/date: fill from this run
Fixture: broken copied to codex-bug-lab
Steps: reset practice data; add Read and Build; complete Read; select Completed.
Expected: Read only.
Observed: Build only, if reproduced.
Baseline: node --test core.test.mjs; fill actual result.
Scope: keep UI, storage format, ordering and tests unchanged.
Root cause: not confirmed yet.
Unperformed checks: list explicitly.

手順2：画面を使わない最小再現

次の repro.mjs を直下へ追加します。完了・未完了を直接渡し、保存、DOM、キャッシュ、通信を通りません。別端末で node repro.mjs を実行すると b を表示し a との不一致で非ゼロ終了するのが故障の証拠です。

import assert from "node:assert/strict";
import { visibleTasks } from "./core.mjs";

const tasks = [
  { id: "a", title: "Read", completed: true },
  { id: "b", title: "Build", completed: false },
];
const actual = visibleTasks(tasks, "completed").map((task) => task.id);
console.log("Completed IDs:", JSON.stringify(actual));
assert.deepEqual(actual, ["a"]);
console.log("Reproduction passed.");

node repro.mjs

ブラウザーなしで誤答するため、この故障にキャッシュやボタンは不要です。全 UI 正常の証明ではありませんが Completed を先に調べる根拠です。未完了を選ぶ理由を説明させ、偶然の再読込成功を根因発見にしません。

動作の失敗と環境の失敗を分ける

node repro.mjs が ERR_MODULE_NOT_FOUND を返す場合、Completed の検証まで進んでいません。現在のフォルダーと core.mjs の名前を確認します。SyntaxError なら貼り付け漏れを調べます。読み込みに成功し、b を表示し、a を期待する検証で失敗したときに、この欠陥を再現できたと言えます。最初から通過しても修正済みとは限らず、expected をコピーした可能性があります。色や「失敗」だけでなく、コマンド、終了コード、実出力、コピーの場所を記録します。

手順3：最小修正と原因説明を依頼

デスクトップでは codex-bug-lab の Codex タスクを作ります。CLI はそのフォルダーを確認して codex を起動します。その後、次の限定依頼を送り、既存テストと repro.mjs は固定します。修正後に古くなる故障コメント一行は消してよいものの、他関数の整理や画面・フレームワーク変更はしません。失敗未確認なら先に確認させます。

Fix the reproduced Completed-filter bug in this codex-bug-lab.
First read core.mjs, core.test.mjs and repro.mjs. Run node repro.mjs and node --test core.test.mjs to confirm the current failure.
Explain the predicate error using the actual a/b IDs. Modify only the completed predicate in core.mjs and remove its obsolete deliberate-bug comment. Do not change tests, repro.mjs, active behavior, storage or UI.
Rerun both commands, inspect the final diff and report actual results. Browser checks must be marked NOT RUN unless actually performed. Do not publish or deploy.

Completed が Active と同じ !task.completed を使うことが原因です。次の行だけにして Active の ! は残します。表示名交換では repro が失敗し、表面変更と挙動修正を区別できます。

if (filter === "completed") return tasks.filter((task) => task.completed);

手順4：同じ証拠で回帰確認

修正後 repro は ["a"] と成功文、終了0、既存3テスト成功です。同じ画面操作で Completed Read、Active Build、All 両方を確認します。先に同入力で原故障の解消を証明し、次に空や未完了戻しを追加します。

差分で addTask、decodeTasks、期待値の不変を確認します。修正済み主張だけなら命令、終了状態、失敗要約を求め、実行不能は理由を残します。成功命令は画面確認の代わりでなく、環境と URL を付けて実施します。

完了の解除と空のリストも確認する

元の再現が通過したら、次の内容で regression.mjs を別途作り、node regression.mjs を実行します。Completed の a を確認し、a の完了を解除した後、Completed は空、Active は a／b になることを検証します。元入力の保持と3種類の空リストも確認し、Regression passed と終了コード 0 が期待結果です。独立した検証プログラムなので、node --test core.test.mjs のテスト件数は自動では増えません。

import assert from "node:assert/strict";
import { toggleTask, visibleTasks } from "./core.mjs";

const tasks = Object.freeze([
  Object.freeze({ id: "a", title: "Read", completed: true }),
  Object.freeze({ id: "b", title: "Build", completed: false }),
]);
const ids = (items, filter) => visibleTasks(items, filter).map((task) => task.id);
assert.deepEqual(ids(tasks, "completed"), ["a"]);
const changed = toggleTask(tasks, "a");
assert.deepEqual(ids(changed, "completed"), []);
assert.deepEqual(ids(changed, "active"), ["a", "b"]);
assert.deepEqual(ids(changed, "all"), ["a", "b"]);
assert.deepEqual(tasks.map((task) => task.completed), [true, false]);
for (const filter of ["all", "active", "completed"]) {
  assert.deepEqual(ids(Object.freeze([]), filter), []);
}
console.log("Regression passed.");

node regression.mjs

原版 broken/core.mjs に戻す練習でも regression.mjs は残します。repro.mjs の b と一致して、再び非ゼロで失敗するはずです。テスト、ラベル、保存処理も変更して通過させたなら、保存した原版から単一修正をやり直し、捨てた仮説を引き継ぎ記録に残します。完全な回帰確認には実画面と再読み込みの確認も必要で、未実施はそのまま記録します。

調査の習慣、復元と引渡し

検証できる仮説を一つずつ変え、試行と結果を残して無効修正の反復を防ぎます。別原因の証拠なら範囲を絞り直し、一行という教材へ無理に合わせません。実案件の時間、認証、通信の違いもあり、私的データを除いて再現を渡します。

報告、最小再現、原因、差分、回帰表を渡します。再実行は自分のプレビュー停止後 broken/core.mjs だけ戻し、repro と元2成功1失敗を確認します。詳しい例は機能受入へ。図1再現、2原因修正、3回帰で、参考検証と各自の Codex 実行を分けます。

Codex 学習目次に戻る

詳しい説明を読む

Reproduce to Fix to Regression

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