【OSS情報アーカイブ】React

※当記事に記載されている情報は、古くなっている場合があります。オフィシャルサイトで最新情報をご確認ください。

「React」とは

「React」基本情報

■概要

React(リアクト)とは、Facebook製のJavaScriptライブラリです。Webアプリケーションのユーザーインターフェースを効率的に構築することを目的としており、主にView部分を実装します。

■基本説明

Reactは、公式サイトに「A JavaScript library for building user interfaces」と記されているように、UIを構築するためのライブラリです。フレームワークではなく、あくまでUI構築ライブラリで、MVCでの「V」部分の構築機能を提供します。

ステートレスコンポネートを組み合わせていく構築スタイルを採用しており、構築時に多少の手間はかかりますが、「堅牢」「スケーラブル」「メンテナンスしやすい」アプリケーションを構築できます。

そのため、小規模アプリケーション高速開発より大規模アプリケーション開発に適しています。

■経緯

・2013年：初版リリース

Facebook社を中心として、各種開発コミュニティによって維持管理されています。

■ライセンスに関する論争と経緯

2013年

Reactの最初の公開リリースでは、ライセンスとして「Apache License 2.0」が使用されました。

2014年

2014年のリリースにおいて、Facebook社はこれを置き換え、「3条項BSDライセンス」と「ソフトウェアに関連する任意のFacebookによる特許使用許可テキスト」が追加されました。

この非慣習的な条項は、Reactユーザー開発コミュニティで論争と議論を引き起こしました。

2017年8月

Facebook社はApache Foundationからのライセンスに関する懸念を却下し、ライセンスの再考を拒否しました。

その結果、WordPressはGutenbergとCalypsoプロジェクトをReactから切り離すことを決定する事態に発展しました。

2017年9月

Facebook社は『標準MITライセンスの下でFlow、Jest、React、Immutable.jsを再ライセンスする』と発表しました。

同社は「ReactはWeb用オープンソースソフトウェアの幅広いエコシステムの基盤であり、技術的ではない理由から進歩を阻止したくない」と述べています。

2017年9月

React 16.0.0が「MITライセンス」でリリースされました。

MITライセンスへの変更は、React 15.xリリースラインにもバックポートされています。

■オフィシャルサイト情報

オフィシャルサイト

→React(React – A JavaScript library for building user interfaces)

ライセンス情報

Reactのライセンスは「MIT License」です。

詳細について、こちらを参照ください。
→GitHub　→react/LICENSE

ダウンロード

→GitHub　→React　→Downloads

■同様製品

同様な機能を提供する製品として、次のようなものがあります。

オープンソース製品：「AngularJS」「jQuery」「Immutable.js」など。

「React」の主な特徴

■リアクティブプログラミング

「リアクティブプログラミング」とは、「値の変更を伝播させるデータフロー指向のプログラミングパラダイム」です。

モデルビューコントローラ(MVC)アーキテクチャにおいて、「関連するビューがある要素の変更に対して自動的に対応する」「ある要素が変更されたら、一方向の流れで、関係する要素も変更される」という考え方に成り立っています。インタラクティブなユーザーインターフェースの作成を簡略化する手段として提案されています。

Reactは、この「リアクティブプログラミング」の考え方に沿って設計されており、UI実装において「アプリケーションがどのように見えるか」についてシンプルに表現できます。

■アーキテクチャパターン「Flux」

Facebookが提唱している「Flux」はアプリケーション設計手法です。

「単方向データフロー(データの流れを一方向にする)」という原則を作り、数種類のコンポーネントの組み合わせによって実現します。

Reactを使う場合には「Flux」の採用が有効です。

■JavaScript構文拡張「JSX」

「JSX」は、JavaScriptにXMLライクのシンタックスを追加する言語拡張です。

コードはコンパイラ「JSXTransfomer」により動的にコンパイルされます。

JavaScriptコード中にHTMLタグを埋め込むように記述でき、エレメントを生成するコードとして「JSX」を利用すると、よりシンプルに記述できます。

「コード可読性向上」「エラーチェック機能」などの効果も得られます。

→React　→Docs　→Introducing JSX

■外部連携機能

Reactには拡張性があり、他のライブラリやフレームワークとのインターフェースを可能にするフックを提供します。

「Ajax」などの機能と連携が可能です。

「React」のコンポーネント(エレメント)

「React」のコンポーネント(エレメント)

■Reactコンポーネント

コンポーネントとは「UIを独立した再利用可能な部分に分割したもの」と捉えることができます。分割することで各部分について個別に考えることができます。

Reactアプリケーションでは、「ボタン」「フォーム」「ダイアログ」「画面」などのすべての項目について、コンポーネントとして表現されます。

概念的には、コンポーネントは「JavaScript関数のようなもの」で、任意の入力を受け入れ、何が画面に表示されるべきかを記述するReactエレメントを返します。

コンポーネントは、出力において他のコンポーネントを参照できます。これにより、どのレベルであっても同じコンポーネント抽象化を使用できます。

■Reactエレメント

「エレメント」とは「コンポーネントをインスタンス化したもの」を表し、Reactアプリケーションの最小ビルディングブロックとなります。

■ステートレスコンポーネント指向

Reactでは、コンポーネントを組み合わせてUIを構築していきます。

Reactには「コンポーネントを極力ステートレス(状態不保持)にすることで、コンポーネントを管理しやすくする」「ステート(状態)を保持するコンポーネントを最小限にして、ステートレスコンポーネントを組み上げていく」という特徴があります。

各コンポーネントは親コンポーネントからデータを渡され、それを元にViewを構築します。コンポーネント自身はステート(状態)を持たずに、入力されたデータによって一意な表示を出力します。

このステートレスコンポーネント指向により、「高メンテナンス性」「高い再利用性」を持つコンポーネント群を構築できます。

■ステートフルコンポーネント

Reactは、ステートフルコンポーネントの構築も可能です。

状態管理ロジックをJavaScriptで記述して、独自の状態を管理するカプセル化されたコンポーネントを構築することで、複雑なUI群の状態管理を行えます。

「React」の仮想DOM(Virtual DOM/VDOM)

「React」の仮想DOM(Virtual DOM/VDOM)

■仮想DOMとは

Reactでは、コンポーネント(エレメント)などの仮想DOMを通してUIを構築します。

「仮想DOM(Virtual Document Object Model)」とは、JavaScriptオブジェクトとしてDOMツリーのようなものを保持しておき、データに変更が発生した場合に、関連するオブジェクトのみの差分を計算し、実際のDOMへの再レンダリングを最小限にする仕組みです。

■手動DOM更新の抽象化

仮想DOMにより、アプリケーションを構築するために使用しなければならない「手動によるDOM更新(属性操作/イベント処理など)」を抽象化できます。

Reactにおける開発では、「ある状態を反映するために各種DOMをどのように変更すべきか？」という考え方から、「ある状態に対応するために仮想DOM構成はどうあるべきか？」という定義に集中できます。

適切な仮想DOM構成を構築することで、既存のVMCアーキテクチャでは大量に存在していた状態遷移用コードがほぼ一掃され、自動的にページ全体の一貫性が保たれるようになります。

また、ページ全体の情報を1箇所に集められるため、「ブラウザリロードによる状態復元」「ユーザー操作の取り消し」などの実装も比較的容易に行えます。

■差分レンダリング

Reactはメモリ内に「仮想DOMツリー(データ構造キャッシュ)」を作成し、各コンポーネントの状態を管理します。

表示を変更する必要が発生した場合、Reactライブラリは結果の差異を計算することで、ブラウザに表示されていて「実際に表示変更が必要となるコンポーネントのみ」を効率的にレンダリングします。

この仕組みにより、開発者は、各変更時にページ全体がレンダリングされるかのようにコードを作成できます。

■高速レンダリング

差分レンダリングにおいて、仮想DOMの比較はJavaScript内のみで完結する軽い演算処理であるため、本物のDOM操作と比較すると圧倒的に高速に処理されます。

そのため、Webページ全体をReact化して適用することも可能です。

「React」のネイティブモバイルアプリ構築機能「React Native」

「React」のネイティブモバイルアプリ構築機能「React Native」

■概要

React Nativeを利用すると、JavaScriptのみを使用してネイティブモバイルアプリを構築できます。

Reactと同じデザインを使用しており、宣言的なコンポーネントから豊富なモバイルUIを作成できます。

→GitHub　→Facebook　→React Native(Build native mobile apps using JavaScript and React)

■ネイティブモバイルアプリ

React Nativeでは、「モバイルウェブアプリ」「HTML5アプリ」「ハイブリッドアプリ」を構築するのではなく、Objective-CやJavaを使用して作成されたアプリと区別がつかないネイティブモバイルアプリを構築できます。

通常のiOSやAndroidアプリと同じ基本的なUIビルディングブロックを使用し、JavaScriptとReactを使用してこれらのビルディングブロックをまとめることで実現しています。

■部分的ネイティブコード化

React Nativeは、「Objective-C」「Java」「Swift」で書かれたコンポーネントとスムーズに結合します。

ネイティブコードへの部分的ドロップダウンが可能で、特定処理のみのネイティブコード化を行えます。

　

参考元サイト

• React
• Wikipedia　→React (JavaScript library)
• Qiita　→出来る限り短く説明するReact.js入門
• Qiita　→Reactを使うとなぜjQueryが要らなくなるのか
• Wikipedia　→Reactive programming

※定期的にメンテナンスを実施しておりますが、一部情報が古い場合がございます。ご了承ください。

この記事のタグ一覧

• React

  1

• 一覧はこちら
• 次の記事へ