実践：既存プロジェクトを保守する

Codex 学習目次に戻る

目標と開始地点

この段落の教材・資料: 教材 · コード地図 · Git 復元

手順1：書換え前に基準を記録する

maintenance-lab の5ファイル index.html・style.css・app.js・core.mjs・core.test.mjs を確認し、node --test core.test.mjs の3合格と Node 版・日付・場所を記録します。異なれば start・broken を使っていないか調べ、既存失敗を今回の責任にしません。ローカル Git 基準コミットか完全 baseline コピーを保存してから変更し、復元点を確保します。

変更前の画面基準も作ります。このフォルダーで後述の画面回帰節にある OS 別プレビューコマンドを使い、練習専用のブラウザープロファイルと接続元 URL を使います。Show で All tasks を選び、既存データがないことを確認します。既存データがあれば先に保存し、消去せず別の新規練習プロファイルで空の状態から始めます。Read・Build を追加して Read を完了にし、1 active / 2 total を確認します。ブラウザー開発者ツールの Application／Storage → Local Storage から mokaair-codex-todo-v1 の架空 JSON を保存し、2件の ID と完了状態を記録します。この2件、URL、プロファイルを変更後の比較まで保ちます。続いてデスクトップアプリで maintenance-lab を開いてタスクを作るか、このフォルダーの別の端末で codex を実行してから次の依頼を送ります。

Codex に app.js の #count 更新を読み取り専用で見せ、全件か絞込後か説明させます。基準は Completed 選択中も全件の active／total です。保存鍵 mokaair-codex-todo-v1、version 1、ID、completed の真偽値も確認します。集計責務だけを移し、形式変更・移行は追加しません。先に読むことで似たコードを統合して細部を変える事故を防ぎます。

手順2：確認可能な変更範囲を決める

小範囲でも検証は必要で、失敗と変更を結び付けやすくします。

手順3：まず失敗する新試験を加える

下記 maintenance.test.mjs を元試験の隣に保存して両方を先に実行します。関数未実装のため新3件は失敗し、元3件は合格します。欠如を検知できる証拠としてこの期待失敗を保存し、教材不良と思ったり試験削除で緑にしたりしません。入力は既存 Task 契約に従い、任意資料の整理へ範囲を拡げません。

import test from 'node:test';
import assert from 'node:assert/strict';
import * as core from './core.mjs';

test('empty list counts are zero', () => {
  assert.deepEqual(core.countTasks([]), { active: 0, total: 0 });
});
test('count all tasks without deduplicating equal titles', () => {
  const tasks = [
    { id: 'a', title: 'Read', completed: false },
    { id: 'b', title: 'Read', completed: true },
    { id: 'c', title: 'Build', completed: false },
  ];
  assert.deepEqual(core.countTasks(tasks), { active: 2, total: 3 });
});
test('counting preserves frozen task data and storage compatibility', () => {
  const task = Object.freeze({ id: 'a', title: 'Read', completed: true });
  const tasks = Object.freeze([task]);
  const before = core.encodeTasks(tasks);
  assert.deepEqual(core.countTasks(tasks), { active: 0, total: 1 });
  assert.equal(core.encodeTasks(tasks), before);
  assert.deepEqual(core.decodeTasks(before), tasks);
});

node --test core.test.mjs maintenance.test.mjs

手順4：実装して差分を見る

Add countTasks(tasks) to core.mjs, returning {active, total} for the full list.
Use it in app.js when updating #count; keep the existing visible text.
Preserve storage format, key, IDs, task behavior and original tests.
Do not edit index.html, style.css or the new test expectations.
Run node --test core.test.mjs maintenance.test.mjs.
Report changed files, test results and remaining browser verification.

完了後は6試験合格です。参考関数は下記で、app.js が import して render 内の tasks を数え、元と同じ文字を作ります。絞込済み shown を渡すと Completed の総数が誤るため特に確認します。git diff や編集差分で元試験・HTML・CSS・保存処理が不変か見ます。純関数の合格だけでは画面との接続確認を代替しません。

export function countTasks(tasks) {
  return {
    active: tasks.filter((task) => !task.completed).length,
    total: tasks.length,
  };
}

app.js の既存 import に countTasks を加え、元の六関数を残します。render 内の #count.textContent 代入行だけを二つ目の断片へ置き換えます。先の shown 絞込みを含む他の render は保持します。指定位置の断片であり、完全な app.js ではありません。

import { countTasks, addTask, toggleTask, removeTask, visibleTasks, decodeTasks, encodeTasks } from "./core.mjs";

const counts = countTasks(tasks);
document.querySelector("#count").textContent = `${counts.active} active / ${counts.total} total`;

引数が tasks か確認します。Read 完了、Build 未完了なら Completed の shown は一件です。shown を渡すと本来の 1 active / 2 total でなく 0 active / 1 total になります。六つのコアテストは関数契約だけを検査するため成功し得ます。接続と画面の別検証を残します。

手順5：画面と保存資料の回帰確認

変更前と同じ練習サーバーが動いていれば、その URL を再読込して使い、二つ目を起動しません。停止済みの場合だけ次のコマンドを使います。同じ場所で Windows は py -3 -m http.server 4173 --bind 127.0.0.1、macOS／Linux は python3 -m http.server 4173 --bind 127.0.0.1 を使い、同じ http://127.0.0.1:4173 を開きます。占用なら停止前に既存サービスを確認します。前後で同じ origin・架空タスクを使い、ポート違いの空 localStorage を資料消失と混同しません。変更前の Read・Build をリセットも再追加もせず保持し、保存した ID と完了状態を基準と照合してから、All tasks・Active・Completed 全てで1 active / 2 totalを確認します。

再読込で2件・ID・完了状態の保持を確認します。同じ2件で先に390pxとデスクトップ幅の両方のフィルターと統計を確認します。その後 All tasks を選んで Read を一度だけ削除し、1 active / 1 total と Tab の可視フォーカスを検証します。回帰確認なので新しい設計図は不要です。絞込で数が変われば app.js 引数、関数自体が誤れば新試験の失敗から調べます。実観察後だけブラウザー合格とし、未操作 OS は別記します。

復元と引継ぎ

撤回は差分保存後、今回の core.mjs・app.js だけを復元し、自分の新 maintenance.test.mjs を別保存します。元3試験と統計画面で基準に戻ったか確認し、プロジェクト全体の強制リセットで他者の編集を消しません。引き継ぎには基準、抽出責務、不変契約、6試験、実画面検証、復元場所を記し、未実行を合格にしません。次の保守はコンテキストの引き継ぎで別範囲とし、保存層や framework 置換をついでに加えません。 確認後は自分のプレビュー端末で Ctrl+C を押して今回のサーバーを止め、基準 JSON と検証記録を保持します。

Codex 学習目次に戻る

詳しい説明を読む

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

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