React 【React.js】
概要
React(React.js)とは、Webアプリケーションなどの表示・操作部分(UI:ユーザーインターフェース)を効率的に開発することができるJavaScriptライブラリ。米フェイスブック(Facebook)社が開発しオープンソースとして公開している。Webブラウザなどで表示・実行されるクライアント側のWebページやJavaScriptプログラム(フロントエンド)を開発するためのライブラリで、サーバ側などに他のフレームワークやライブラリなどを用いて組み合わせることも多い。
JavaScriptのコード中にHTMLによるタグの記述を直に埋め込むことができる「JSX」と呼ばれる独自のJavaScript拡張記法を備え、ページ中のUI要素を動作も含め宣言的(declarative)に定義していくことができる。実行時には通常のJavaScriptコードに変換されてブラウザ側へ送信される。
ページ上のHTMLの現在の状態を内部的に保持しておく「仮想DOM」(virtual DOM)の仕組みを採用しており、要素に変更が加えられると自動的に必要な箇所だけ描画し直す。少しの更新のためにページ全体を再描画しないため高速で軽快な表示・操作感が得られる。仮想DOMの操作はReactが内部的に行うため開発者は意識しなくて良い(明示的に操作することもできる)。
ページ上の要素とスクリプト上のデータを対応付け(バインディング)でき、変化に追随して自動的に(リアクティブに)更新・反映させることができる。Reactが提供するのは単方向(一方向)のバインディングで、プログラム中でデータを変更するとページ上の対応する要素に自動的に反映される。
UI要素をコンポーネント(部品)化する仕組みを内蔵しており、独自の機能や属性を持つ新しいHTML要素(タグ)を定義することができる。このカスタム要素をテンプレート中で組み合わせてページを構成することができ、大規模なアプリケーション開発で共通のUI要素を定義したい場合などに役立つ。
React Native
Reactの仕組みをスマートフォンやタブレット端末のネイティブアプリケーションにほとんどそのまま持ち込めるようにした実装がReact Nativeである。iOSやAndroid、UWP(Windows)向けのアプリ開発に利用できる。
Reactと同じようにJavaScriptを用いてアプリのUIを宣言的に記述していくことができる。コードは開発時に各種環境向けにコンパイル(変換)され、目的の環境に適したネイティブコード(Android向けならAndroidアプリ)として出力される。
Web版と異なりHTMLタグなどは使えないため、定義済みのコンポーネントを組み合わせて記述する。標準で組み込まれているものには文字表示のTextタグや画像表示のImageタグ、表示領域を定義するViewタグ、表示スタイル指定を行うStyleSheetタグなどがある。
Webアプリケーションとして提供されているネットサービスで、共通のバックエンド(サーバ側アプリケーション)を用いて動作するネイティブアプリ版を追加するのに適しており、実際に開発元のFacebook社のモバイル端末向けFacebookアプリなどに採用されている。