Codex実践編　全4講

実践編第1講

実リポジトリで変更を完走

小さなWebサイト改善を、計画から検証まで一度やり切る

この講座で残すものお試しWebサイトと検証記録

実践編第1講　実リポジトリで変更を完走

最初の実践は小さな変更1つに絞る

見出し・文章・色など、変更箇所を一つに絞る。

本番ではなく、練習用または複製したリポジトリを使う。

完成後に人が見て判断できる変更を選ぶ。

公開や外部送信は、最初の成果物に含めない。

大きなアプリより、最初から最後まで確認できる変更の方が学習になります。

実践編第1講　実リポジトリで変更を完走

入口は作業の形で選ぶ

対話しながら進める

デスクトップでフォルダと差分を見ながら進める。

IDEで開いているコードを小さく直す。

画像や参考画面をContextへ加える。

繰り返し実行する

CLIで同じ検査や生成を繰り返す。

結果をファイルや構造化出力に残す。

非対話の自動化は上級編で扱う。

この講座では、デスクトップを主画面にして差分と表示を確認します。

実践編第1講　実リポジトリで変更を完走

Plan modeで実装前の地図をつくる

01

現状確認

構成と関係ファイルを読む

02

質問

不足情報と判断点を聞く

03

計画

変更対象・順番・検証を示す

04

承認

人が確認してから実装へ進む

Plan modeでは、何を変えるかだけでなく、どう確かめるかまで決めます。

実践編第1講　実リポジトリで変更を完走

画像もContextとして渡す

現在の画面を同じ状態・同じ幅で記録する。

参考画像は、どこを参考にするか言葉で補足する。

変更後も同じ条件で表示して比較する。

個人情報や機密が写る画像は渡さない。

画像は『雰囲気』ではなく、比較条件を固定する材料として使います。

実践編第1講　実リポジトリで変更を完走

実装は小さな差分で進める

最初に関係ファイルだけを変更対象へ入れる。

既存のデザイン・命名・構造を先に確認する。

途中で目的が広がったら、別タスクへ分ける。

変更した理由を短く記録する。

一度に多く変えるほど、どの変更が結果へ効いたか分かりにくくなります。

実践編第1講　実リポジトリで変更を完走

検証はコードだけで終わらない

構文・ビルド・自動テストを実行する。

ブラウザーで表示と主要操作を確認する。

画面幅が変わるなら、代表的な幅で確認する。

確認できないことは、未確認として残す。

Webサイトなら、テスト結果と実際の表示の両方が必要です。

実践編第1講　実リポジトリで変更を完走

差分レビューで意図外を止める

変更したファイルが予定と一致しているか。

削除や大きな置換が混ざっていないか。

画面の文言・余白・状態が意図どおりか。

秘密情報や一時ファイルが含まれていないか。

『動いた』だけでなく、触る必要のない場所を触っていないかを見ます。

実践編第1講　実リポジトリで変更を完走

公開は最後の別工程にする

ローカルの完成条件を先に満たす。

公開先、URL、費用、影響範囲を人が確認する。

明示承認後にだけデプロイや送信を行う。

公開後は実URLを開き、表示と主要導線を確認する。

この講座の完了はレビュー可能なローカル成果物。公開は承認後の追加工程です。

実践編第1講の振り返り

成果物と証拠がそろえば完了

1

実装前にGoal・Context・Constraints・Done whenが決まっている

2

差分・ビルド・テスト・表示を確認し、未確認事項を分けている

3

公開は別工程として、人の明示承認後に行う

残す成果物お試しWebサイトと検証記録

次は、同じ安全基準を設定として残します。