ここから先の学びかた

解説

このレッスンで分かること

• このコースで実際に書けるようになったことの棚おろし
• 次に触る道具が、素の JavaScript のどの面倒を引き受けてくれるのか

いま書けるようになっていること

「JavaScript が書けます」では粗すぎるので、手が動く単位で並べます。

• 配列から欲しいものだけを選び、形を変え、並べ替える。filter map sort をつないで 1 本の流れにできる
• throw で自分のエラーを投げ、try catch で受け、利用者に見える場所へ出せる
• 正規表現で入力の形を確かめられる
• async と await で非同期の処理を上から下へ読める形に書き、Promise.all で同時に待てる
• fetch でデータを取り、response.ok を見て失敗を分け、読み込み中と失敗の表示を切り替えられる
• モジュールで書かれた他人のコードを読み、import の行が何を持ってきているか言える

最後の課題で作ったものは、外のサーバーからデータが来て、遅れて届き、ときどき失敗し、しぼり込みも並び替えも入力の検証もできるページです。求人票に JavaScript の実務経験と書かれている仕事で、最初に任される作業とほぼ同じ形をしています。

次に触る道具は、面倒の引き受け先

どれも素の JavaScript の代わりではありません。素の JavaScript のどこが面倒だったかを引き受ける道具です。だから、面倒を体験していないと何が嬉しいのか分かりません。あなたはもう体験しました。

TypeScript は、work.tags が配列なのか文字列なのかを書いている最中に教えてくれます。下の関数は、views が文字列で届いても、結果がおかしくなるまで気づけません。

取ってきたデータの形を信じるしかなかったところに、書き留めておく場所ができます。新しく覚えるのは書きかたであって、考えかたではありません。

React は、一覧を空にして積み直す作業を機械にやらせる道具です。書くのは、いま出すぶんを決める関数と、1 件ぶんの見た目を返す関数までです。一覧を組み立てるのに使うのも map です。

配列を別の配列に変えるという考えかたが、データの加工にも画面の組み立てにも効いているだけです。Node.js では、document はありませんが async await fetch はそのままです。読んでいた API の返す側を書けるようになります。

解説

順番に迷ったら、まず TypeScript で型を付け、そのあと React へ進んでください。Node.js は、サーバー側の JavaScript が必要になった段階で選ぶ別の道です。

明日から何をするか

次の 3 つを、この順でおすすめします。

1. 最後の課題を自分のパソコンに移す。 index.html style.css app.js の 3 枚に分け、そのフォルダで python3 -m http.server 8000 を実行して開く。教材の外でも同じものが動くと確認できます
2. ファイルを分けてみる。 加工の関数を別のファイルへ移し、export と import でつなぐ。走らせられなかったものが自分の手元では動く、という体験が次の下地になります
3. お題を 1 つ決めて作りきる。 読んだ本の記録でも、今週やったことの一覧でもかまいません。データを配列で持ち、しぼり込みと並び替えを付け、フォームで足せるようにする。ここまでの内容で全部書けます

3 番のお題は、他人のためのものにしないでください。自分が使わないものを作ると、途中で誰のためだったかが分からなくなって手が止まります。毎日開くページなら、直したいところが自然に出てきます。それが、次に学ぶことを教えてくれます。

作ったものは公開できる場所に置き、何ができるページかを 1 行で説明できるようにしてください。説明できる制作物が 1 つあることは、修了証よりも強い材料になります。

最後にひとつ

見本のとおりに書き写して終えると、その 1 行を自分で変えられません。書き写したあとに必ず 1 か所変えてください。並び順を逆にする、別のキーで並べる、その程度で十分です。自分で変えて壊して直したところだけが、次に何も見ずに書けるようになります。