つくる:復旧訓練

この章でやったことを、一巡させます

第3章では4つのことを学びました。エラーはそのまま渡すこと。期待と実際と直し方の3点で伝えること。大きな変更は刻むこと。直らないなら戻ること。

今回はこれを、ひとつのおこづかい帳の上で通しでやります。目の前にあるのは、いくつかの壊れ方が同時に起きている画面です。実際の制作でも、壊れ方はひとつずつ親切にはやってきません。まとめて来ます。

落ち着いて、順番を決めます

複数壊れているとき、いっぺんに全部直そうとしないでください。画面が出ない壊れ方から先に直します。理由は単純で、画面が出ていないと他の壊れ方が見えないからです。

順番はおおむね次のようになります。まず JavaScript が止まっているなら、それを直します。エラー文をそのまま渡します。次に、画面の構造が崩れているところを直します。閉じ忘れや入れ子の間違いです。最後に、見た目の指定が効いていないところを直します。ここは期待と実際と直し方の3点で伝えます。

動かない、形が崩れている、見た目が違う。この順です。

1つ直すたびに、画面を見ます

2つ以上をまとめて頼むと、直ったのか直っていないのかが混ざって分からなくなります。1つ頼んで、画面を見て、確かめてから次へ進んでください。手数は増えますが、迷子になりません。

そして、直した時点を覚えておいてください。もし途中でさらに壊れたら、その印まで戻れます。

直ったと言われても、自分の目で確かめます

この章で一番大事なのはここです。AIは自信を持って「修正しました」と言います。それが本当かどうかを決めるのは、あなたの目に映っている画面です。

見出しは出ているか。残金は出ているか。ボタンは押せるか。押したら増えるか。ひとつずつ、自分で見ます。この確かめる習慣が身につけば、あとの章はずっと楽になります。

演習

右の画面のおこづかい帳は、3か所同時に壊れています。JavaScript が途中で止まり、一覧の場所も間違い、色の指定も効いていません。順番を決めて、1つずつ直してください。

• 画面が出ない壊れ方から先に直してください
• 1つ直すたびに画面を見て確かめてから次へ進んでください
• 直したと言われても、自分の目で確かめてください