「React入門」ではフロントエンド業界で注目のJavaScriptライブラリ「React」について何回かに分けて解説をしていきます。
Reactとは?
ReactはFacebookが開発しているUI(MV*フレームワークでいうViewのようなもの)に特化したJavaScriptライブラリです。
大きな特徴としてVirtual DOM(仮想DOM)と呼ばれるレンダリング機構がそなわっており、Webページの表示を従来のフレームワークと比較すると大幅に向上させることが可能になっています。
Virtual DOM
従来のテンプレートエンジンやフレームワークはロジックより受け取った状態などの情報を元にHTMLを作成してブラウザに描画をおこないます。
そして状態などの情報が変化した場合は、ふたたび情報を受け取りHTMLを再作成してブラウザに再描画をおこないます。
Reactでは情報が受け渡われてもいきなり描画は行わずVirtual DOMとよばれる構造体を作成してからVirtual DOMの内容を元にHTMLを作成してブラウザに描画します。
そして情報が変化した場合は、まずVirtual DOMに反映を行なってから、Virtual DOMと現在のHTMLの内容の比較を行い、差分のみをHTMLに反映させてブラウザの再描画をおこないます。
一見手間がかかることをしているように思えますが、一連の処理の流れの中でブラウザの描画コストというのが非常に高いため、描画コストが差分のみの最小限に抑えられるためReactでは表示のパフォーマンスを向上させることが可能なっています。
Virtual DOMはReact以外でも以下の様なフレームワークで採用されており、今もっとも注目されている技術です。
他にも多数のフレームワークでVirtual DOMの考え方が導入されています。
Reactが得意なこと
上記のVirtual DOMの特徴からページに表示されている広いエリアの情報をJavaScriptで管理しておき、なにか変更があった場合に変更箇所のみを再描画するUIなどには向いています。
複雑なWebアプリケーションやSPA(Single Page Application)などではこの恩恵を得られることが多いでしょう。
(どのようなUIか想像がつかない場合はFacebookのUIを見てみてください。様々なエリアが細かく再描画されているのがわかるでしょう)
Reactが苦手なこと
こちらも上記のVirtual DOMの特徴からjQueryなど直接HTMLに操作をおこなうライブラリとの併用は相性があまり良くはありません。（Virtual DOMとの比較がおかしくなるため）
Reactを利用する場合は、Reactを介さずに直接HTMLを操作するのはあまり良くないとされています。
ReactからReact Nativeへ
Reactの特徴として「Learn Once, Write Anywhere」というものがあります。これは一度Reactを覚えてしまえば様々な箇所でReactのエコシステムが利用できるという考え方です。
この考え方を体現しているエコシステムが「React Native」です。
React NativeではJavaScriptやReactと同様の書き方でネイティブのスマホアプリケーションが作成できるようになっています。
Reactはお世辞にも学習コストが低いライブラリではありませんが一度覚えてしまえば、こういったエコシステムの恩恵に預かることが可能になっています。(※Reactそのものは複雑ではありませんが、他のライブラリとの組み合わせなどにより複雑差が増していきます。)
それでは、Reactがどういったものかという説明はこれぐらいにしておき、次回は「 Reactで「Hello world」」と題して実際にReactはどのように記述していくかを解説いたします。
