本日のあらすじ
フロントエンド界隈で流行っていたらしい React という謎のテクノロジーにちょっと触ったよ！ 流行に乗り遅れた気もするけどきにしない！
Reactか……
— たーせる (@tercel_s) 2016年6月12日
React とは
2013年に Facebook が開発した JavaScript ライブラリで、『フロントエンドエンジニアのための現在とこれからの必須知識』によると、React はあらゆる JavaScript フレームワークの中でも特に将来性が期待されています。ほんとかな？
React は何をしてくれるか？
React の仕事は、本質的にはたったの2つだけです。
- DOMの更新
- イベントへの反応
これだけ見ると、「べつに React を使わなくてもよくね？」と思うのですが、『入門 React ―コンポーネントベースのWebフロントエンド開発』には React ならではのアドバンテージについて以下の記述があります。
React は従来とまったく異なる方法でブラウザの DOM を扱います。手動で DOM を更新して状態を管理するといった旧態依然としたアプリケーションの開発方法は、スケーラビリティの点で劣っており、新機能の開発を遅らせる要因となります。一方、React を使えばユーザーインタフェースをより宣言的に記述することができます。
従来とまったく異なる点として、「テンプレートと表示ロジックを敢えて分離しない」「必要なコンポーネントは HTML ごと作る」というのが React 流。
そのほか 仮想 DOM とか JSX とか小難しげな話題が次から次へと出てきてなかなか本題に入れなさそうなので、その辺はすべてすっ飛ばしてとっとと始めようと思います。
まずはお約束として、この記事を書くにあたり使用したライブラリの一覧のご紹介から。
本日の使用ライブラリ一覧
- React 0.15.1
- Browser 5.8.24
- Bootstrap 3.3.6
React で Hello, World
さっそく Hello, World を書きました。僕にとって記念すべき初 React です。
実は公式がすでに公開しているものを、ほぼそのままパクっています。
ソースの構造
React 独自のお作法を攻略すべく、ソースの中でどことどこがどう繋がっているのかを図にしてみました。
HTML自体はほとんど空っぽで、必要なコンポーネントはマークアップも表示ロジックも JavaScript 側が一手に担っています。
React では、JavaScript 側でマークアップしやすいよう、わざわざ JSX という JavaScript の特別な拡張言語が用意されています。ソース中の return <div>Hello, {name}.</div>; に注目すると、JavaScript から直接 HTML を返している（ように見える）のが直感的にわかります。
React でイベント処理
続いて、React の 2 つめの機能であるイベント処理にいってみます。テキストボックスの入力と表示を連動させる仕掛けを見よう見まねで書いてみました。
以下のデモの「お名前：」欄を変更して、表示の変化を確かめていただくことができます。
コンポーネントの分割
さきほどのサンプルでは、画面内のすべての構成要素を単一のコンポーネントとしてコーディングしました。
React では、コンポーネント一つ一つを分割し、それぞれに親子関係を与えることができます*1。
見た目も振る舞いも全く一緒ですが、コンポーネントを分けると、一つの render にすべてを詰め込まずに済むため、個人的にはスッキリしているように見えます。
ちょっと面倒な点といえば、子コンポーネントで発生したイベントを親コンポーネントに通知するための仕掛けが必要になることでしょう。
ここでは、以下の方法で子から親にイベント通知を行っています。
ソースの構造
