ToDo のフィルターを実装する

Codex 学習目次に戻る

目標と準備

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

Planは計画確認が中心でした。今回は失敗から完成までの証拠です。一行表示だけでなく、非表示データの維持、順序、同名の識別を確認します。

手順1：未完成版の基準を取る

ZIP の start 5ファイルを新しい codex-feature-lab へコピーします。expected や前の修正を使わず、Windows PowerShell は Get-Location、macOS／Linux は pwd で場所を確認します。原版を残し、既存テストの2成功1失敗を確認します。

node --test core.test.mjs

選択肢と change イベントが既存であることを確認します。不足は visibleTasks で、画面全面変更や framework は不要です。フロントの名前でも変更先は画面とは限りません。失敗を残し、assertion 削除を修正にしません。

手順2：具体例で完了条件を固定

次を filter.test.mjs として追加し、既存テストは上書きしません。同名 Read の a/c の ID と順序、All の全件維持、三つの空一覧を確認します。凍結入力でその場の変更も検出しやすくします。

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

const tasks = Object.freeze([
  Object.freeze({ id: "a", title: "Read", completed: true }),
  Object.freeze({ id: "b", title: "Build", completed: false }),
  Object.freeze({ id: "c", title: "Read", completed: true }),
]);
const ids = (items) => items.map((item) => item.id);

test("filters preserve identity and order with duplicate titles", () => {
  assert.deepEqual(ids(visibleTasks(tasks, "active")), ["b"]);
  assert.deepEqual(ids(visibleTasks(tasks, "completed")), ["a", "c"]);
  assert.deepEqual(ids(tasks), ["a", "b", "c"]);
});

test("All retains every task without changing its completion state", () => {
  assert.deepEqual(ids(visibleTasks(tasks, "all")), ["a", "b", "c"]);
  assert.deepEqual(tasks.map((task) => task.completed), [true, false, true]);
});

test("every filter accepts an empty list", () => {
  for (const filter of ["all", "active", "completed"]) {
    assert.deepEqual(visibleTasks(Object.freeze([]), filter), []);
  }
});

node --test core.test.mjs filter.test.mjs

start は4成功2失敗で、既存フィルターと新しい最初のテストが失敗します。All と空は元から成功です。新テストの検出力を確認します。構文・ファイル不在は準備の不具合で、期待する機能失敗と区別します。

手順3：最小の機能変更を実装

デスクトップは codex-feature-lab をローカルプロジェクトに追加して課題を作り、CLI は同じ教材ディレクトリから codex を起動します。場所を確認して全文を送ります。今は core.mjs だけ変更可能で、新テストも固定です。他の変更案には具体的理由を求め、全体整理を任せません。文章だけで推測せずテストを読ませます。

Implement the missing filters in this codex-feature-lab.
Read index.html, app.js, core.mjs, core.test.mjs and filter.test.mjs first.
Modify only visibleTasks in core.mjs: all keeps every task, active returns unfinished tasks, completed returns finished tasks. Preserve original order, IDs and input data. Do not edit tests, add dependencies or change UI/storage.
Run node --test core.test.mjs filter.test.mjs. Inspect the final diff and report actual results and any unperformed browser checks. Stop and explain if the requested scope cannot satisfy the tests. Do not publish or deploy.

filter は元のオブジェクトを選ぶ新配列を作り、対象を変更しません。All は元配列を返してよく、不要な深いコピーは求めません。!task.completed と task.completed の差を理解して確認します。

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;
}

手順4：データ、画面、範囲を確認

同じ命令で6成功を確認します。元5ファイルは core.mjs だけ変更、新規 filter.test.mjs だけ追加です。削った assertion は戻して再試験し、無関係な追加も確認します。実装終了と受入終了は別に記録します。

教材から Windows は py -m http.server 4173 --bind 127.0.0.1、macOS/Linux は python3 で起動し、http://127.0.0.1:4173 を開きます。自分の旧プレビューの競合だけ解消します。HTML 直接起動は module 制約があり、旧画面なら場所と再読込を確認します。

必要な以前の教材記録を残し、About this exercise の Reset practice data を使います。All tasks で空一覧を確認してから Read、Build、Read を追加し1・3番目を完了します。表と All 全件を確認し、同名は元位置と状態で区別します。1番目を未完了に戻すと Completed は元3番目だけ、Active は元1番目と Build です。All と再読込で保存も確認します。

反例で確認：全体件数と同名タスク

Read、Build、Read の3件で1件目と3件目を完了にすると、All／Active／Completed の表示行は 3／1／2 ですが、件数はすべて 1 active / 3 total です。1件目の完了を解除すると行数は 3／2／1、件数はすべて 2 active / 3 total になります。app.js は tasks 全体を数えます。コアのフィルターテスト通過だけでは画面の件数を証明できないため、実際の UI 結果を別に記録します。

6件通過後、修正済み core.mjs を練習フォルダーの外へコピーして保存します。Completed 分岐だけを次の誤った行に一時置換して、両テストファイルを実行します。完了で絞った後に title で重複排除するため ID c が失われ、5件通過・1件失敗となるはずです。元の3件だけなら、2つのタイトルが異なるため通過します。失敗時の ID を確認したら、保存した修正版で core.mjs を直ちに戻し、テストを変更せず6件通過・0件失敗を確認します。

if (filter === "completed") return tasks.filter((task) => task.completed).filter((task, index, selected) => selected.findIndex((other) => other.title === task.title) === index);

反例が通過したら、filter.test.mjs を実行したか、3件目が異なる ID の Read のままか、変更したコピーをテストしたか確認します。構文やモジュール未検出のエラーならファイルを戻して置換位置を確認してください。それは重複排除の欠陥を検出した証拠ではありません。この練習はテスト範囲の確認であり、UI の変更や欠陥版のコミットは不要です。

失敗対処、引渡しと復元

消失なら選択結果を tasks や保存へ戻していないか、同名違いなら title を ID 代わりにしていないか確認します。コアのテストが成功しても古い画面なら import、HTTP、キャッシュを確認し、表の失敗行と再現順序を伝えます。

6テスト、画面例、最終差分、未実施を渡します。再実行は停止後 core.mjs だけ start へ戻し、新テスト込みは4成功2失敗、旧テストのみは2成功1失敗です。命令差を区別します。図1は事例固定、2は限定変更、3は回帰・復元で、読者の Codex 実行を主張しません。

Codex 学習目次に戻る

詳しい説明を読む

Three numbered stages: identify the starting point, perform the exercise, and verify the result. Original illustration, not a product screenshot.

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