Chapter 02

なぜReactが必要なのか

このチャプターでは、Reactを選択する理由について簡単に説明します。
「そんなことはわかっているよ」という方は、次のチャプターへお進みください。

フロントエンドの複雑化

かつてWebページの描画は、HTMLを読み込むだけの非常にシンプルな内容でした。
しかし時代が進むにつれ、フロントエンドに要求される実装は複雑になっていきます。

例えば、Twitterを想像してください。
画面の更新が常に発生するので、HTML1枚ではとても対応できません。

  • 新しいツイートの読み込み
  • ツイート入力モーダルがアニメーションと共に表示される
  • など...

動的なWebページを作る

ユーザーの操作やデータの読み込みによって変化する動的なWebページを作るためには、JavaScirptからDOM(HTML要素と思ってください)を操作する必要があります。

jQueryというライブラリは、まさにJavaScirptからDOMを操作するAPIを備えており、かつてフロントエンドの主流として一世を風靡しました。
がしかし、jQueryが全ての問題を解決できたわけではありませんでした。

Todoアプリの例で考える

Todoアプリの例を考えてみましょう。

リストが増えたり減ったりするアプリケーションです。この場合、DOM自体が増えたり消えたりするわけですが、増えたり消えたりするDOMに対して、外側のJSからどうやってデータを紐づけたりするんでしょうか?

「DOMを足せ、DOMを消せ」っていう命令を出すしかありません。非常にやっかいです。
完了したToDoリストを元に戻したくなったらどうしますか?
消えたHTMLをどう元に戻せば良いでしょう?

仮想DOMの登場

そこでFacebookのある天才が、とある事実に気づきます。

そもそもDOMがJavaScriptの外部モデルとして存在していて、JavaScriptの操作対象になっているからやりにくいのだ、と。
ならばもう、DOMはJavaScriptの値(ファーストクラスオブジェクト)にしてしまおう。

そうFacebookの技術者は考えました。こういうのを、仮想DOMといいます。

具体的には、以下のような記述ができます。

const helloNode = <div>Hello!</div>;

こうなるとDOMはただのJavaScriptの値なので、いくらでも自由に操作できます。

Reactでは、このような仮想DOMをJSX(ジェーエスエックス)と呼びます。

そして、Reactへ...

仮想DOMの考え方は、Reactだけでなく様々なフレームワークで使用されていますが、Reactはその先駆けとして大きなコミュニティを抱え、またFacebookという巨大なバックに支えられています。

そのため、以下のような恩恵をうけることができます。

  • 強力なバージョンアップ
  • コミュニティのサポート
  • 豊富なライブラリ
  • React Nativeによるモバイル開発への応用
  • など...

Reactを学び、フロントエンド開発の強力な武器を手に入れましょう!