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である。iOSAndroidUWPWindows)向けのアプリ開発に利用できる。

Reactと同じようにJavaScriptを用いてアプリUIを宣言的に記述していくことができる。コードは開発時に各種環境向けにコンパイル(変換)され、目的の環境に適したネイティブコードAndroid向けならAndroidアプリ)として出力される。

Web版と異なりHTMLタグなどは使えないため、定義済みのコンポーネントを組み合わせて記述する。標準で組み込まれているものには文字表示のTextタグや画像表示のImageタグ、表示領域を定義するViewタグ、表示スタイル指定をStyleSheetタグなどがある。

Webアプリケーションとして提供されているネットサービスで、共通のバックエンドサーバアプリケーション)を用いて動作するネイティブアプリ版を追加するのに適しており、実際に開発元のFacebook社のモバイル端末向けFacebookアプリなどに採用されている。

(2021.9.22更新)

他の辞典による解説 (外部サイト)

この記事の著者 : (株)インセプト IT用語辞典 e-Words 編集部
1997年8月より「IT用語辞典 e-Words」を執筆・編集しています。累計公開記事数は1万ページ以上、累計サイト訪問者数は1億人以上です。学術論文や官公庁の資料などへも多数の記事が引用・参照されています。
ホーム画面への追加方法
1.ブラウザの 共有ボタンのアイコン 共有ボタンをタップ
2.メニューの「ホーム画面に追加」をタップ
閉じる