既存のコードベースを理解する

Codex 学習目次に戻る

目標と準備

最初のプロジェクトが前提です。全行翻訳ではなく、入口、操作経路、保存先、確認証拠を答えます。一つの利用者操作を小サイト内で追い、変更判断に使えないファイル名一覧で終わらせません。

手順1：版、入口、基準を確認

ZIP の expected の5ファイルを新しい codex-read-lab にコピーし原本を残します。start/broken ではありません。Windows PowerShell は Get-Location、macOS／Linux は pwd で、5ファイルが直下にある場所を確認します。見慣れた形にするためだけに package.json を追加しません。

node --version
node --test core.test.mjs

3テスト成功を実測してから読取り調査へ進みます。失敗ならエラーと版を残し、構造理解のついでに不明な故障を直しません。実プロジェクトでは既存の未コミット変更を記録し、全体リセットや整形を避けます。

デスクトップでは codex-read-lab をローカルプロジェクトに追加し、そこで新規タスクを作ります。CLI は確認済みの教材端末から codex を起動します。タスクの場所を確認し、次の依頼をシェルではなく Codex の入力欄へ送ります。

Read this codex-read-lab without editing any files. Identify the actual entry point, file responsibilities and commands available from the files, not from framework assumptions.
Trace adding a task, marking it complete, changing the filter and reloading the page. Name the relevant functions and DOM elements.
Separate observed code from inferred intent. List what the existing tests cover and what still needs browser verification. If evidence is missing, say so instead of inventing a backend or build step.

手順2：根拠付きのファイル地図

表を実ファイルで確認します。index.html が CSS と module app.js を読み、app.js が core.mjs を import します。テストは Node 内蔵で npm script ではありません。API、DB サーバー、bundler はないため、挙げたら根拠を求め修正します。

Read 追加は submit の既定阻止、addTask の文字検証と新配列、tasks 代入、persist の保存、入力クリアと render、入力へのフォーカスを追います。名称と順序・型を実ファイルで確認してから機能案を考えます。

filter.value は表示を選び、隠れた tasks を削除しません。完了は画面行番号ではなく task.id を使います。理解せず Completed を直すと、未完了データを削除して見た目だけ合う危険があります。

手順3：保存とエラー経路を追う

app.js の mokaair-codex-todo-v1 は localStorage キーです。起動時 decodeTasks は JSON 版と項目、保存時 encodeTasks は版付き文書を扱います。ブラウザーの origin と保存拒否が関係し、クラウド同期ではありません。catch の一時状態表示も説明させます。

第3テストの壊れた JSON、版、重複 ID、項目型を確認します。デコード規則の証拠であり、実画面エラー、フォーカス、再読込保存の保証ではありません。データ関数と利用者操作を分けてテストと確認へ残します。

手順4：画面で理解を確認して地図を残す

codex-read-lab から Python サーバーを起動します。Windows は1番目、macOS/Linux は2番目だけを使い、http://127.0.0.1:4173 を開きます。自分の旧教材がポートを使うならその端末で止め、場所不明の画面を流用しません。テストは別端末です。

py -m http.server 4173 --bind 127.0.0.1

python3 -m http.server 4173 --bind 127.0.0.1

必要な以前の教材記録を残してから、About this exercise の Reset practice data を使います。All tasks で空一覧を確認し、Read と Build を追加して Read だけ完了します。All は両方、Active は Build、Completed は Read です。All に戻して再読込し保存を確認します。コアと画面の接続の検証で、全エラー経路は含みません。最後は教材データだけを消します。

エディターで次の骨組みを project-map.md に保存し、実テストと未確認を記入します。元5ファイルは変更不要です。Codex に書かせるなら新文書だけ許可し、元5ファイル不変を確認させます。読取り段階の終了とリファクタリング許可は混同しません。

# Small Steps project map

## Entry and runtime
index.html loads style.css and app.js as a browser module.
app.js imports core.mjs. Local HTTP preview; no dependency installation.

## Flow
submit -> addTask -> tasks -> persist -> input clear -> render -> input focus
checkbox change -> toggleTask by ID -> persist -> render with focus restoration
filter change -> render -> visibleTasks; hidden tasks stay in tasks
reload -> localStorage -> decodeTasks -> tasks -> render

## Storage
Key: mokaair-codex-todo-v1. Versioned JSON; invalid data is rejected.
Browser storage failures leave a temporary session and a visible message.

## Verification
node --test core.test.mjs: fill actual result and date.
Browser filters, reload, keyboard and storage errors: record separately.
Do not claim checks you did not perform.

## Change boundaries
Filter logic: core.mjs visibleTasks.
DOM and storage orchestration: app.js.
Layout and controls: style.css and index.html.
Unknowns and next task: fill from evidence.

失敗経路を読み、判断の根拠を示す

app.js の submit ハンドラーと core.mjs の addTask を照合します。空白だけの入力は trim 後に長さ 0 となり、addTask が title-length を投げます。イベント側の catch がメッセージを表示して return するため、その送信では persist、入力のクリア、render に進みません。これはコードから判断した経路で、ボタンを実際に押した証拠ではありません。同様に localStorage の書き込み失敗を追い、storageAvailable が false になり、タブ内の一時作業は続けられても再読み込み後の保持は保証されないことを確認します。

「フィルター変更でデータを保存する」「3件のテスト通過でボタンの正常動作が証明できる」という誤った説明も確認します。filter の change は render だけを呼び、コア関数のテストは DOM を操作しません。次の節を project-map.md に追記し、未実施は NOT RUN のままにします。引用した関数が見つからなければ expected のコピーを開いたか確認し、5つのプログラムファイルを変えずに案内文書を修正します。

## Evidence and limits
- Blank input: core.mjs/addTask throws; app.js/submit catches and returns before persist.
- Filter change: app.js connects change to render; that handler does not persist.
- Count: app.js/render counts all tasks, not only the displayed subset.
- Storage failure: app.js/persist disables further writes after a failed setItem.
- Automated baseline: node --test core.test.mjs; record actual exit and totals.
- Browser submit/filter/reload checks: NOT RUN until performed.

誤解、停止と受入

依存追加には宣言ファイルを求め、一覧だけなら submit を追わせ、テスト成功と全画面正常を同一視したら未確認範囲を求めます。広く探す前にルートを確認し、expected の結論を broken に適用しないよう実パスで区別します。

追加、切替、絞り込み、再読込を関数で説明し、未確認を最低一つ挙げられたら完了です。Ctrl+C でサーバーを止め、地図と元5ファイル一致を確認します。誤変更は対象だけ戻します。図1は基準、2は追跡、3は証拠確認で、次は機能実装です。

Codex 学習目次に戻る

詳しい説明を読む

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

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