Skip to content

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 の歩き方 ​

2.1題材設定ToDo の仕様2.2最初の実装全消去 + 全描画2.3差分更新手で書く2.4同期バグ痛みの発生源2.5Reactとの対応づけVanilla JS で書いて苦しむ → React の恩恵が見える手を動かす章は 2.2 / 2.3 / 2.4、その整理が 2.5Part 3 以降で React を見たとき、ここでの「面倒」と対になって理解が深まります

この Part の章一覧 ​

この Part を読み終えると ​

  • React がない世界で UI を書くときの限界を、体で分かるようになります
  • 「Virtual DOM」「宣言的」「単方向データフロー」といった言葉の価値が、単なる用語ではなく 実感 として残ります
  • Part 3 以降で React のコードを読むときに「これは Vanilla で書くと何行になるだろう」と比べる視点が身につきます

急がなくて大丈夫です。手を動かして、つまずいて、それから次に進みましょう。

参照ソース ​