つくる:AIと手の合わせ技
大枠は AI、詰めは手
この章で見てきた2つを、今日は続けて1回でやります。大きいところは AI に頼み、細かいところは自分の手で直す。この順番が、いちばん速く仕上がる進め方です。
順番が大事です。逆にすると損をします。先に手で細かく整えてから AI に大きな変更を頼むと、整えたところごと作り替えられてしまうからです。荒く作ってから細かく整える。この向きは変えません。
実際の手順
おこづかい帳に、残高を出す欄を足す場合で考えます。
プレーンテキスト
1 AI に頼む 残高を表示する欄を、合計の下に足してください
2 画面を見る 出たけれど、文言が「残高」ではなく「バランス」になっている
3 手で直す index.html を開いて、その4文字を書き換える2 で気になった点をもう一度 AI に投げると、また往復が始まります。画面を見て「ここのこの文字」と自分で言えた時点で、もう手で直せる状態です。
手を出す範囲を決めておく
とはいえ、何でも手で直そうとすると今度は詰まります。今の時点で手を出してよい範囲は、はっきりしています。
プレーンテキスト
手で直してよい 札にはさまれた文字を書き換える
手で直してよい 数字を別の数字にする
AI に頼む 新しい部品を足す、色や余白を変える、動きを付ける山かっこで囲まれた札そのものや、style.css の中身、script.js の中身は、まだ AI に任せてください。ここを手で触るには、HTML と CSS の書き方をもう少し知っている必要があります。その先が、このコースの次の一歩です。
直したあとに必ずやること
手で書き換えたら、画面を見て確かめます。書き換えたつもりで別の場所を消していたり、閉じの札をうっかり壊していたりすることがあるからです。
もし画面が崩れたら、慌てずに元の文字に戻してください。第3章でやった「壊れたら戻す」と同じで、直前の1手を取り消せば必ず元に戻ります。手で直すことの気楽さは、ここにあります。間違えても、戻せばいいだけです。
今日の演習
合わせ技を1セットやります。まず AI に、合計の下へ残高の欄を足してもらってください。そのうえで、見出しの文字を「わたしのおこづかい帳」に変えます。
見出しの変更は、本来なら自分の手で開いて5文字足すだけの作業です。演習の画面では指示を出す形になりますが、実際にはこちらのほうが速いということを頭に置きながらやってみてください。
完成条件
- 残高の欄は id を balance にして、中身に「残高」という文字を入れてください
- 見出しの文字は、ちょうど「わたしのおこづかい帳」にしてください
- 記録の一覧と合計の行は、そのまま残してください