-
Notifications
You must be signed in to change notification settings - Fork 0
React Concepts
Reactとは、WebサイトやWebアプリのUI部分を開発する際に活用するJavaScriptライブラリ（※1）です。
ReactはReact.js（React.JS）と表記されることもあります。
ReactはFacebook社が開発し、2013年にオープンソース化されました。
現在、FacebookをはじめInstagram・Slack・Netflix・Yahoo!など、世界的なWebサイト・WebアプリでReactが採用されています。
日本でもReactは注目を集め、採用企業も増えている状況です。
ライブラリとよく比較されるものにフレームワーク（※2）があります。
フレームワークを使えばプログラムの枠組み（土台）まで用意される分だけ、ライブラリより効率的とは言えます。
その反面、決まった枠組みに従わないといけないので、ライブラリより自由度は低いです。
ReactはJavaScript用のフレームワークと勘違いされることがありますが、実際には上述の通りライブラリとなります。利用する際は違いに注意して下さい。
「宣言的」とは「このコードではこういう動作をする」ということが、コードのなかで明示された（宣言された）状態のことです。
Reactは宣言的であるため、他の人がそのソースコードを見ても中身を理解しやすくなっています。
第三者からみても中身が分かりやすいことから、仮に不具合が発見されてもその原因を調査しやすいのもメリットです。
コンポーネント指向とはプログラムを小さな機能ごとの部品（＝コンポーネント）に分け、必要に応じて組み合わせて開発する考え方です。
コンポーネント指向でない場合、あとからプログラムを変更するときは全体的な変更が余儀なくされます。
一方でコンポーネント指向であれば、あとから改良したいときも対象のコンポーネントだけ変更すればすむのです。
Reactはコンポーネント指向であるため、あとから拡張しやすくなっています。
ReactはWebサイト・Webアプリだけでなく、それ以外の様々な分野でも活用されています。
たとえばスマートフォンのアプリを開発する場合、これまでは複数のプログラム言語を使い分ける必要がありました。
一方でReactであれば、1つの開発環境でAndroid・iOS両方のアプリを開発可能です。Reactから派生した「React VR」技術を使えば、VRアプリも開発できます。
Reactの特徴として仮想DOM採用により、Webページの描画処理が高速な点があげられます。
仮想DOMについて理解するためには、そもそもDOM（※3）とは何かから知らなくてはなりません。
WebブラウザはHTML・XMLドキュメントを読み込んだ際に、DOM（Document Object Model）構造を構築し、それに基づきWebページを描画します。
その上で仮想DOMとはDOM構造をメモリに保存しておき、Webページを描画する際は変更が加えられた箇所だけ反映させるのです。
そのためWebページが更新された際に、ページ全体を更新する必要がなくなり、描画処理が高速になります。
これはReactを使う際の分かりやすいメリットと言えるでしょう。
Reactは世界中で多くのユーザーが利用しており、ライブラリに用意された各コンポーネントは今風に洗練されています。
そのためWebページのデザイン経験が少ない人でも、Reactを使えば比較的簡単に最先端のユーザーインターフェースを作れるわけです。
Reactは優れた技術ですが、UI開発における全てのシーンに適しているわけではありません。以下、Reactを採用する際に注意しておくべき点について解説します。
Reactは仮想DOMを採用することで、アプリ・Webページの種類によってはかえって処理速度が落ちてしまう面があり注意が必要です。
仮想DOMではDOM構造をメモリ上に保持する関係から、その分だけメモリを多く消費することになります。
その上でニュースアプリのように、ユーザーが読むだけでページ更新が少ない場合は仮想DOMのメリットが活かされません。
せっかくメモリ上に保存したDOM構造の役割がなくなってしまうわけです。
そうなると、仮想DOMはメモリを多く消費するだけでかえって非効率で処理が遅くなります。
ReactはGoogle Mapのように、ユーザー操作によって頻繁に表示内容がかわるアプリ・Webページに適した技術です。
Reactを使う際は、仮想DOMの特性が活かされるかを検討する必要があります。
Reactを使うためには、Node.jsをはじめbabel・webpackなどのプログラムをインストールすることが求められます。
インストール後は、これらプログラムのアップデートなどの対応も必要です。その分、環境の構築に手間がかかることは否めません。
ただし、昨今ではReactの環境構築をシンプルにするスターターキットなどもあります。それらを利用すれば、環境構築の手間を軽減可能です。
※1. ライブラリとは、再利用可能なプログラムを特定のコンセプトに従って1つのファイルに集めたものです。
アプリケーションなどの開発をする際にライブラリを使うと、ライブラリの中から適宜必要なプログラムを取り出して使うことができます。
ライブラリを使えば、その分だけプログラムをする手間を省けるわけです。
※2. フレームワークとは、新しいプログラムを開発する際に使える枠組みです。
※3. DOMとは、JavaScriptでHTMLのドキュメントを操作する際に使う仕組みです。