動きの指示

動きは「操作」と「結果」の2つで書く

ここまでは止まっている画面の話でした。この回は動きです。ボタンを押したら何かが起きる、文字を入れたら一覧に増える、といった部分です。

動きを頼むときの型は決まっています。何をしたら、何が起きるか。この2つを1文にします。

悪い例には結果が書いてありません。入力欄だけ置いて終わりかもしれないし、押しても何も起きないかもしれない。良い例は「押す」という操作と「1行増える」という結果が両方あるので、できたかどうかを自分の目で確かめられます。

確かめられる形にする

動きの指示には、もう1つ利点があります。自分で検品できることです。

止まっている見た目は「思ったのと違う気がする」で終わりがちですが、動きは違います。押してみて増えなければ、できていない。増えれば、できている。白黒がはっきりします。

そのために、頼むときにこう考えます。

1. 自分がどこを操作するか (押す、入れる、送る)
2. そのあと画面のどこが、どう変わるか
3. 変わったことを、目で見て分かるか

3つ目が抜けると厄介です。「データを保存してください」だけだと、保存されたのか画面から分かりません。「保存したら、画面上部に 保存しました と表示してください」まで足すと、確かめられる形になります。

一度に3つまで

動きは、まとめて頼むほど壊れます。第1章で学んだ1回1変更は、動きでは特に効きます。とはいえ、関係し合う動きは一度に伝えたほうが早いこともあります。目安は3つまでです。

番号を振って並べると、AI もどれをやり残したか分かります。返ってきたら、番号の順に1つずつ押して確かめます。

この回でやること

おこづかい帳に、金額を追加する動きを付けます。押したら増える、という一番基本の形を、操作と結果の言葉で頼んでみます。

• 「何をしたら、何が起きるか」の形で頼みます
• 入力欄は id が amount、ボタンは id が add、一覧は id が list です
• 押したあと一覧が1行増えることを、自分の目で確かめます