次に進むのは React と Node.js のどちらがよいですか

画面を作るのが好きなら React、データを返す側に興味があるなら Node.js です。どちらから入っても、第8章と第9章で覚えた非同期の扱いがそのまま効きます。迷ったら、最後に作ったページを React で書き直すところから始めるのが分かりやすいです。

TypeScript は後回しでよいのですか

後でかまいません。TypeScript はすでに書けるコードに形の情報を足す道具なので、書きたいものが先にあるほうが効きます。ただし React や Node.js の入門記事は TypeScript で書かれていることが多いので、読めるようにはしておくと楽です。

作ったものをどこに公開すればよいですか

HTML と CSS と JavaScript の 3 枚を置ければどこでもかまいません。無料で使える静的サイトの置き場がいくつもあります。大事なのは場所選びよりも、開いた人が 10 秒で何のページか分かる状態にしておくことです。

ここから先の学びかた｜基礎を学ぶ

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

このコースで実際に書けるようになったことの棚おろし

TypeScript React Node.js ビルドツールが、それぞれ何を引き受ける道具なのか

素の JavaScript の知識が、その 4 つのどこにそのまま効くのか

明日から何を作りはじめるとよいか

ここから先の学びかたとは

55 レッスンで身に付いたものを具体的に確かめ、次に触るべき 4 つの道具と、それぞれに今の知識がどう効くのかを結びつける最終回です。

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

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

配列から欲しいものだけを選び、形を変え、合計を出し、並べ替える。filter map reduce sort をつないで 1 本の流れにできる
引数の分割代入と既定値で、関数の入口を読みやすくできる。{ ...defaults, ...options } の上書き順を説明できる
クロージャで状態を閉じ込め、設定を覚えた関数を作って返せる
クラスで型をそろえ、# の private フィールドで外から触られたくない値を守れる
throw で自分のエラーを投げ、try catch finally で受け、利用者に見える場所へ出せる
正規表現で入力の形を確かめ、キャプチャを使って置換できる
async と await で非同期の処理を上から下へ読める形に書き、Promise.all で同時に待てる
fetch でデータを取り、response.ok を見て失敗を分け、読み込み中と失敗の表示を切り替えられる
モジュールで書かれた他人のコードを読み、import の行が何を持ってきているか言える

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

次に触る 4 つの道具

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

道具	引き受けてくれる面倒	このコースのどこが効くか
TypeScript	形の食い違いに実行するまで気づけないこと	第4章のオブジェクト、第5章のクラス
React	状態が変わるたびに DOM を書き直す手間	第2章のパイプライン、第3章の純粋関数
Node.js	ブラウザの外で JavaScript を動かすこと	第8章の非同期、第9章の HTTP
ビルドツール	分けたファイルをまとめて配ること	第10章のモジュール

TypeScript

work.tags が配列なのか文字列なのかを、書いている最中に教えてくれます。第9章で data.works を取り出したとき、中身の形は API のドキュメントを読んで信じるしかありませんでした。TypeScript はその形を書き留めておく場所を用意し、食い違いを保存した瞬間に指摘します。

// いまのコード。views が文字列で来ても、足し算の結果がおかしくなるまで気づけない
function totalViews(works) {
  return works.reduce((sum, work) => sum + work.views, 0);
}

第5章でクラスのフィールドを決めた作業が、そのまま型を書く作業に化けます。新しく覚えるのは書きかたであって、考えかたではありません。

React

render を毎回自分で呼び、textContent = "" で空にしてから積み直す作業を、機械にやらせる道具です。最後の課題で書いたこの形を思い出してください。

function render() {
  const list = visibleWorks();
  workList.textContent = "";
  list.forEach((work) => workList.append(createWorkCard(work)));
}

React でやることは「visibleWorks を書いて、1 件ぶんの見た目を返す関数を書く」までです。空にして積み直す部分は書きません。第3章で「副作用のない関数」を作った感覚が、そのまま部品の書きかたになります。

一覧を組み立てるときに使うのも map です。第2章でさんざん書いた形が、そのまま画面を作る道具になります。

// このコースで書いた形
list.forEach((work) => workList.append(createWorkCard(work)));
// React ではこの形になる
list.map((work) => WorkCard(work));

配列を別の配列に変える、という 1 つの考えかたが、データの加工にも画面の組み立てにも効いているだけです。

Node.js

同じ JavaScript を、ブラウザではなく自分のパソコンやサーバーで動かします。document はありませんが、async await fetch JSON.parse はそのままです。第9章で読んでいた API の返す側を書けるようになります。

最後の課題で叩いた works.json も、返している側は数十行の JavaScript です。作品の配列を持ち、クエリを見て遅らせたり失敗を返したりして、Response.json で返しているだけです。第6章のエラー設計と第9章のステータスコードの知識が、そのまま「どういうときに何番を返すか」の判断になります。

順番に迷ったら、TypeScript より先に React か Node.js を触ってください。TypeScript は「すでに書けるコードに型を足す」道具なので、書きたいものが先にあるほうが効きます。

ビルドツール

第10章で import を走らせられなかった理由がここにつながります。Vite のような道具は、分けて書いたファイルをまとめ、type="module" の面倒や http での配信を裏でやってくれます。npm create vite@latest を実行して出てきたフォルダの中身が、このコースで書いてきたものと地続きだと分かるはずです。

明日から何をするか

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

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

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

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

よくある間違い

道具を先に増やす。

// React も TypeScript も入れたのに、中身がこれだけで止まる
function App() {
  return <h1>Hello</h1>;
}

環境を整える作業は進んでいる感じがしますが、書けるようになる作業ではありません。素の JavaScript で 1 本作りきってから道具を足すほうが、結局速く進みます。

型を書かずに any で逃げる。

// TypeScript を入れた初日にやりがちな形。指摘は消えるが、何も守られない
function totalViews(works) {
  return works.reduce((sum, work) => sum + work.views, 0);
}

any を付けて回ると、実行するまで気づけない状態に戻ります。形が分からないときは、いったん自分が期待している形を書いてください。違っていれば教えてくれます。

写経で終える。

// 見本のとおりに書き写しただけだと、この 1 行を自分で変えられない
sorted.sort((a, b) => b.views - a.views);

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