つくる:思い通り化

第2章の総まとめ

この回で、自分のアプリを v2 に上げます。v1 は「とりあえず動く」段階でした。v2 は見た目と動きが、自分の指定どおりになっている段階です。

第2章で身につけた道具を並べます。

1. 曖昧な言葉を、数値か具体例に置き換える
2. 雰囲気は、背景色・文字色・余白・角丸の部品に分ける
3. 動きは「何をしたら、何が起きるか」の形で書く
4. 迷ったら2案を並べて、自分で選ぶ

この4つを1回の作業でまとめて使うのが、この回の課題です。

頼む順番を決める

まとめて使うといっても、全部を1文に詰め込むのは失敗のもとです。順番があります。

先に形、あとから動き。まず箱と部品を置いて、それから押したときの処理を足します。逆にすると、動かす相手の部品がまだ無い状態で処理を書くことになり、うまくいきません。

実際の並びは次のようになります。

1回ごとに画面を見て、思ったとおりか確かめてから次へ進みます。3回とも一気に送っても動くことはありますが、途中で崩れたときにどこが原因か分からなくなります。

完成の基準を先に決める

もう1つ、v2 で覚えておきたいことがあります。作り始める前に、できあがりの条件を書き出すことです。

書き出しておくと、返ってきた画面を条件と照らして検品できます。条件が無いと、いつまでも「もう少し良くしたい」が続いて終われません。今回の条件は次の3つです。

1. カードの中に、入力欄と追加ボタンと一覧がある
2. カードは白く、角が12px丸い
3. 入力欄に文字を入れて追加を押すと、一覧に1行増える

この3つを満たしたら完成です。それ以上の磨き込みは第4章で扱います。

この回でやること

第2章の4つの道具を全部使って、おこづかい帳を v2 に仕上げます。見た目と動きの両方が、自分の指定どおりに出せるかを確かめましょう。

• 先に部品と見た目、あとから動きの順で頼みます
• カードは背景 #ffffff、角丸12px、内側の余白24pxです
• 入力欄は amount、ボタンは add、一覧は list という名前 (id) にします
• 押したら一覧が1行増えることを、自分の目で確かめます