Part 2 — Vanilla JS で書くとどうなるか
ここから数章は、あえて React を使わず、素の JavaScript(Vanilla JS)だけで小さな ToDo アプリを作ります。なぜ寄り道するかというと、React が代わりに引き受けてくれる「面倒」を、自分の手で一度書いておくと、あとで React の仕組みがずっと腑に落ちるから です。
手を動かして「つらい」と感じるところがゴールです。つらさが分かれば、Part 3 以降で「これは React が肩代わりしている仕事だな」と見分けが付くようになります。
この Part のコードは Node.js や npm を使いません。ブラウザと任意のテキストエディタさえあれば動きます。TypeScript もまだ使わず、.html と .js だけで完結させます(TypeScript の導入は 3.1 開発環境 から)。
図 2.0.1 Part 2 の歩き方
この Part の章一覧
- 2.1 題材設定 — ToDo リストの仕様
- 2.2 Vanilla JS 実装 — 最初のバージョン
- 2.3 差分更新を手で書く — DOM 同期の実装
- 2.4 状態と DOM の同期バグ — 何が起きるか
- 2.5 React が自動化していること
この Part を読み終えると
- React がない世界で UI を書くときの限界を、体で分かるようになります
- 「Virtual DOM」「宣言的」「単方向データフロー」といった言葉の価値が、単なる用語ではなく 実感 として残ります
- Part 3 以降で React のコードを読むときに「これは Vanilla で書くと何行になるだろう」と比べる視点が身につきます
急がなくて大丈夫です。手を動かして、つまずいて、それから次に進みましょう。