最初の小さなプロジェクトを完成させる

Codex 学習目次に戻る

このレッスンの到達点

準備：正しい版を選ぶ

Small Steps 教材を展開すると start、broken、expected があります。今回は expected だけを codex-first-site にコピーし、展開した原本は残します。start の絞り込みは未完成、broken は意図的な不具合があり後の教材用です。三つを混ぜず、検証対象の版が分かるようにします。

コピー直下には index.html、style.css、app.js、core.mjs、core.test.mjs が必要です。HTML は構造、CSS は表示、app.js はブラウザー操作、core.mjs はデータ、test は基本動作の確認を担当します。すべて理解する必要はありませんが、存在を確認します。Codex、Node.js、Python 3 が必要で、導入済みなら再インストールせずコマンドを確認します。

Windows はこのフォルダーで PowerShell、macOS/Linux は端末を開きます。不慣れなら端末とパスを参照してください。Python は Windows で py --version、それ以外は python3 --version、Node は全環境で node --version です。見つからなければ必要なツールを導入して端末を開き直します。この教材に package.json はないため npm install や npm test は使いません。

手順 1：変更前の動作を確認する

コピー直下で基本テストを実行し、三件成功・失敗ゼロを確認します。これは変更前の証拠です。すでに失敗するなら start や broken をコピーしていないか、ファイル不足がないか確認します。壊れた状態で画面変更と全不具合修正を同時に頼むと、どの依頼がどの結果を生んだか分からなくなります。

node --test core.test.mjs

Windows は次で表示用サーバーを起動します。この端末はログを出し続けるので閉じず、プロンプトにすぐ戻ることを期待しません。別コマンドには別端末を使います。接続先はローカルの 127.0.0.1 だけです。

py -m http.server 4173 --bind 127.0.0.1

macOS/Linux は次の同等コマンドを使います。自分の OS の一方だけを実行し、二つで 4173 を共有しません。別の自分の練習が使っていれば、確認したサーバーを止めるか 4174 に変えて以後の URL も揃えます。

python3 -m http.server 4173 --bind 127.0.0.1

ブラウザーで http://127.0.0.1:4173 を開きます。このオリジンに残したい架空タスクがあれば先に記録します。About this exercise を開いて Reset practice data を選び、All tasks で空の一覧を確認します。これは練習データだけを消し、ソースファイルは復元しません。その後 Read と Build を追加して Read を完了し、Completed では Read だけ、Active では Build だけになることを確認します。再読み込みでも状態が残るはずです。index.html のダブルクリックは file URL の制約でモジュールを読めない場合があるため、起動した HTTP URL を使います。

手順 2：調査してから変更を依頼する

デスクトップは codex-first-site を選んでタスクを作り、CLI はその直下で起動します。まず五ファイルの役割、現在地、テスト命令を読み取りだけで報告させます。パッケージ導入の不要な静的サイトと理解したことを確認してから次の依頼を送ります。小さな表示変更でも残すべき機能を伝えましょう。

Work only in this codex-first-site practice folder.
1. In index.html, set the h1 text to "Small steps, clear progress."
2. In style.css, set the :root background to #fff8ed.
Keep all todo behavior, labels, storage keys and data formats unchanged.
Do not add packages or external requests. Do not deploy the site.
Run node --test core.test.mjs.
Check the page at 390px and 1280px if browser access is available.
Report changed files, checks performed and any checks not run.

期待する差分は index.html の h1 と style.css の背景だけです。HTML 全体の作り直しや別フレームワークへの置換ではありません。ブラウザーツールがなければ画面検証を未実施と報告させ、自分で行います。推測画像を求めたり、エラーが出ないだけで画面合格としたりしないでください。

手順 3：成果を自分で確認する

二つのファイルで指定の文字と色を確認し、再テストの結果を残します。ブラウザーを再読込して見出し、背景、以前の Read と Build を見ます。約 390px でページ全体が横スクロールせず、1280px でも幅が適切か確認します。狭い表示の確認はレスポンシブ検証で、iPhone や Android の実機試験ではありません。

境界も二つ確認します。空白だけでは追加されず、下のサンプルは画像ではなく文字として表示されます。Tab で入力、ボタン、絞り込み、チェックボックスへ移動し、フォーカスが見えることも確認します。表示変更に付随するデータやキーボード操作の退行を見つけるためです。基本テストは CSS 外観を自動確認しないので両方の証拠を見ます。

<img src=x>

問題対応、停止、復元

一覧ページになったらサーバーの起動場所が上位すぎます。止めて index.html が直下にあるコピーへ移動し、再起動します。ポート使用中なら自分のサーバーを確認するか番号を変え、無関係なサービスを停止しません。変更が見えなければ保存、URL、場所、再読込を確認します。ポートが変わると保存元も変わるため、ToDo が消えて見えても削除とは限りません。

停止は Python の端末で Ctrl+C です。復元は保存した expected 原本から今回の index.html と style.css だけを戻すか、二行を手動で戻します。ブラウザー全データを消さないでください。練習の ToDo を消す場合は About this exercise 内の Reset practice data が専用キーだけを扱います。必要な架空記録を残してから操作します。

追加練習と検証記録

追加練習は主見出しを別の英文に変えるだけにして、正常系と空入力を再確認します。実際の差分、テスト結果、二つの幅の観察、未実施項目を提出できれば完了です。依頼の書き方、プロジェクト規則、テストとレビューで繰り返せる習慣にします。

教材はこのシリーズ独自の公開共有可能な架空サイトです。参考版の基本動作とブラウザー動作は Windows/Edge で検証し、他 OS の起動説明を実機試験と称していません。入口は 2026-09-20 の公式クイックスタートと CLI 文書で確認しました。画像は練習成果で Codex UI ではありません。

期待値と実際の確認結果を分けて記録する

次の表は受け入れ時の期待値であり、今回の実行が合格した記録ではありません。実際に変えたファイル、テスト実行場所と成功／失敗数、390px と 1280px それぞれの画面結果、未完了の確認を別に記録します。この三つのテストは ToDo のデータ処理を検証するため、全成功でも見出しや背景が違う場合があります。プレビューできなければ画面確認は未実施として残し、ソース中の色指定を画面結果の代わりにしません。

Codex 学習目次に戻る

詳しい説明を読む

Request to index.html to Browser

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