やることリストを作る

ここまでで、JavaScript で考える力と、HTML / CSS で画面を作る力がそろったね。この章ではその2つを1つにするよ。作るのは、やることを打ちこんでふやして、終わったら消せるアプリ。

進み方がほかのコースと違う。1レッスンが作る手順の1ステップで、前の回の完成形から始まるよ。だから途中で詰まっても大丈夫 — 次の回は「そこまでできている状態」から始まるので、置いていかれることはない。

5ステップの中身はこうだよ。

• 骨組みを作る … 入力欄・ボタン・空のリストを置く。まだ動かない
• 打った文字をふやす … はじめて画面が動く。作る → 入れる → くっつける
• Enter でもふやす … form で囲んで、読み込み直しを止める
• 終わったものを消す … 行ごとにボタンを付けて、押した行だけ消す
• 仕上げて持ち帰る … カードらしく整えて、端末に書き出す

答え合わせもいままでと違う。書いたものを実際に動かして、ボタンを押してから画面を見るよ。「入力欄に打ってボタンを押したら、リストが1つふえる」——そこまで確かめて正解になる。だからコードの見た目が模範解答と違っても、動けば正解だよ。

最後の回で、作ったものを自分の端末に落とせる。1つのファイルにまとめた形なら、タップするだけでその場で動く。3つのファイルの zip なら、パソコンのエディタで続きを書ける。ここがアプリの外へ出ていく最初の一歩だよ。