最初のアプリをつくる

小さなアプリを作り、テストと画面で確かめる

1. 完成条件を小さくする

   操作対象：Codex — 依頼文の設計例

   依頼に3つの完成条件を指定する

   学習チェックリストを作って。
   追加・完了・空入力の拒否に絞って。
   まず設計を示し、実装後にテストして。

   確認：追加・完了・空入力拒否の3つを、テストできる完成条件にする。

   ローカル実測の再構成 / AI 応答は未収録

2. まず失敗を確認する

   操作対象：Terminal — 修正前の実測結果

   修正前の空白入力テストを実行する

   node --test demo/empty-input.before.mjs

   確認：fail 1：空白のタスクが追加され、期待した例外が出ない。

   実測 / Node.js テスト出力を抜粋

3. 入力を整えて検証する

   操作対象：demo/tasks.mjs — 修正後の実コード

   addTask で空白を除去し、空なら拒否する

   export function addTask(tasks, input) {
     const title = input.trim();
     if (!title) {
       throw new Error(
         "学習内容を入力してください"
       );
     }
     return [...tasks, {title, done: false}];
   }

   確認：trim() → 空ならエラー → 有効な入力だけを配列に追加。

   実装済み関数 / 表示用に改行を調整

4. テストをまとめて実行

   操作対象：Terminal — 修正後の実測結果

   修正後の4件のテストを実行する

   node --test demo/tasks.test.mjs

   確認：ローカル実測：追加・空白拒否・空白除去・完了の4件が成功。

   実測 / Node.js テスト出力を抜粋

5. 画面でも動きを確認

   操作対象：Browser — 学習チェックリスト

   入力 →「追加」→ タスクの完了を押す

   確認：一覧への追加と「1 / 1 完了」を確認。実装済みデモの再構成。

   ローカルデモの操作再構成

6. 差分と結果を確認する

   操作対象：Review — 実装した変更の要点

   コードの差分と検証結果を照合する

     export function addTask(tasks, input) {
   +   const title = input.trim();
   +   if (!title) throw new Error(
   +     "学習内容を入力してください"
   +   );
   -   return [...tasks, {title: input, done: false}];
   +   return [...tasks, {title, done: false}];
     }

   確認：4件成功。データはメモリー内のみで、再読み込み後の保存は未実装。

   実コードの差分を表示用に再構成