React

歴史

ReactはFacebookのソフトウェアエンジニアであるJordan Walkeによって開発された。PHP向けのHTMLコンポーネントフレームワークであるXHPの影響を受けている。2011年にFacebookのニュースフィード上で最初に使用され、2012年にはInstagramでも使用されるようになった。2013年5月のJSConf USでオープンソース化された。
React NativeはAndroid・iOS・UWPでのReactを利用したネイティブ開発を可能にするもので、2015年2月のReact.js Confで発表され、3月にオープンソース化された。
2017年4月17日、Facebookはユーザインタフェースを構築するためのReactフレームワークライブラリの新しいコアアルゴリズムであるReact Fiberを発表した。React FiberはReactフレームワークの将来の改良と機能開発の基盤となるものである。

基本的な使い方

以下はJSXとJavaScriptを利用したHTMLでのReactの基本的な使い方である。
<div id="myReactApp"></div><script type="text/babel">
  class Greeter extends React.Component { 
    render() { 
      return <h1>{this.props.greeting}</h1>
    } 
  } 

  ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));</script>
Greeterクラスはgreetingプロパティを受け入れるReactコンポーネントである。ReactDOM.renderメソッドはGreeterのインスタンスを作成し、greetingプロパティを"Hello World!"に設定し、レンダリングされたコンポーネントを子要素としてidがmyReactAppのDOM要素に挿入する。
ウェブブラウザに表示される結果は以下のようになる。
<div id="myReactApp">
  <h1>Hello World!</h1></div>

プロパティの一方向データバインディング

プロパティ (通常はprops) は親コンポーネントからコンポーネントに渡される。コンポーネントは1組のイミュータブルなJavaScriptオブジェクトとしてプロパティを受け取る。

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

stateはコンポーネントの全体に渡って値を保持し、プロパティを通じて子コンポーネントに渡すことができる。
class ParentComponent extends React.Component {
  state = { color: 'green' };
  render() {
    return (
      <ChildComponent color={this.state.color} />
    );
  }}

仮想DOM

もう1つの注目すべき機能は、仮想DOMの使用である。Reactでは仮想DOMとしてメモリ上にDOMの状態をキャッシュしておき、仮想DOMに差分が発生した場合にのみ差分を計算し、実際のDOMに差分のみを反映させることにより効率的な描画を実現している。これにより、プログラマは変更があるたびにページ全体を描画するコードを記述しながら、Reactライブラリによって実際に変更されたサブコンポーネントのみを描画することができる。

HTML外のアーキテクチャ

Reactの基本的なアーキテクチャはウェブブラウザでHTMLを描画すること以外にも適用される。例えば、Facebookはcanvasタグに描画する動的チャートを持ち、NetflixとPayPalではサーバとクライアントの両方で読み込むことができる同一のHTMLを描画するために利用されている。

一般的なイディオム

Reactは完全なアプリケーションフレームワークを提供しようとはしていない。Reactはユーザインタフェースを構築するために設計されており、故に、開発者がアプリケーションを構築する際に必要であると考えるかもしれない多くのツールは含まれていない。このことにより、開発者はネットワークアクセスやローカルデータストレージなどで好みのライブラリを選択することができる。ライブラリが成熟するにつれて、一般的なパターンが明らかになってきた。

Fluxアーキテクチャの使用

Fluxアーキテクチャは、AngularJSの双方向データフローとは対照的なReactの単方向データフローの概念をサポートするために、一般的なMVCアーキテクチャの代替となるものである。FluxはActionが中央Dispatcherを介してStoreに送信され、Storeに対する変更がViewに伝播することが特徴である。Reactと共に使用した場合には、この伝播はコンポーネントのプロパティを通じて行われる。
Fluxはオブザーバ・パターンの変種であると考えることができる。
Fluxアーキテクチャの下でのReactコンポーネントは、渡されたpropsを直接変更するのではなく、Storeを変更するためにDispatcherによって送信されるActionを作成するコールバック関数に渡されるべきである。Actionは何が起こったのかを説明する義務のあるオブジェクトである。例えば、あるユーザーが別のユーザーをフォローすると記述されたActionには、自身のユーザーIDと相手のユーザーIDとUSER_FOLLOWED_ANOTHER_USERが含まれている。StoreはDispatcherから受け取ったActionに応じて自身を変更する可能性がある。
このパターンは、「プロパティが下に流れ、アクションが上に流れる」と表現されることがある。多くのFluxの実装がこのアーキテクチャの誕生以来作られてきたが、恐らく最もよく知られている実装は単一のStoreを特徴とするReduxであり、しばしば信頼できる唯一の情報源と呼ばれている。

React Native

React NativeはFacebookによって2015年2月に発表され、ネイティブのAndroid・iOS・UWPにReactを適用した。

歴史

2012年、Facebookの会長兼CEOであるマーク・ザッカーバーグは、「企業としての最大の失敗は、ネイティブの反対としてHTML5に大きく賭けたことだった。」とコメントしている。彼はFacebookがまもなくより良いモバイル体験を提供することを約束した。
Facebookの社内では、Jordan WalkeがバックグラウンドのJavaScriptのスレッドからiOSのUI要素生成する方法を発見した。彼らはこの技術を使ってネイティブアプリを構築することができるように、このプロトタイプを完成させるため社内ハッカソンを結成することにした。
数ヶ月の開発の後、FacebookはReact.js Conf 2015で最初のバージョンをリリースした。Christopher Chedeauは技術的な話の中で、FacebookがReact Nativeをグループアプリと彼らの広告管理アプリで既に使用していると説明した。

動作原理

React Nativeの動作原理は基本的にはReactと同一だが、ネイティブAPIを利用して描画する点がReactと異なる。React Nativeはバックグラウンドプロセス (開発者の書いたコードを解釈するためのJavaScript処理系) としてエンドデバイス上で直接実行され、シリアライズ可能で非同期かつバッチ処理されたBridgeを介してネイティブプラットフォームと通信する。
React NativeはHTML5に全く頼らず、全てJavaScriptで書かれており、ネイティブのSDKに頼っている。

Hello World

React NativeによるHello world:
 1 import React, { Component } from 'react'; 2 import { AppRegistry, Text } from 'react-native'; 3  4 export default class HelloWorldApp extends Component { 5   render() { 6     return ( 7       <Text>Hello world!</Text> 8     ); 9   }10 }11 12 // Skip this line if using Create React Native App13 AppRegistry.registerComponent('HelloWorld', () => HelloWorldApp);14 15 // The ReactJS code can also be imported into another component with the following code:16 17 import HelloWorldApp from './HelloWorldApp';

将来の開発

プロジェクトの進捗状況は、コア開発チームのディスカッションフォーラムで見ることができる。しかし、Reactに対する大きな変更についてはreact-futureリポジトリのIssueとプルリクエストを通すことになっている。これによって、Reactコミュニティは将来性のある新しい機能・実験的なAPI・JavaScriptの構文の改善についてのフィードバックを提供することができる。

サブプロジェクト

サブプロジェクトの状態についてはプロジェクトのwikiで利用可能だった。

Facebook CLA

FacebookはReactの貢献者に対して、Facebookの貢献者ライセンス同意書 (CLA) に署名することを要求している。

批判

Reactに対する批判として仮想DOMの概念を使用しているため、多くのRAMが必要になるというものである。これは、「UIの表現がメモリ上に保持され、ReactDOMなどのライブラリによって実際のDOMと同期される」という所である。同様に、React バージョン16以降に含まれている仮想DOMの抽象化は、ウェブブラウザに組み込まれているコンポーネントモデルでは上手く動作せず、従って、ウェブブラウザの標準に依存したそれらのコンポーネントを実装する代替ライブラリでは上手く機能しない。

ライセンス論争

2013年5月に最初に一般公開されたときには標準のApache 2.0を使用していた。2014年10月に公開されたReact バージョン0.12.0からは、Facebookの関連する特許の使用を認めるPATENTSテキストファイルが追加された、特許条項の付きの修正BSDライセンスにライセンスを変更した。
"The license granted hereunder will terminate, automatically and without notice, for anyone that makes any claim (including by filing any lawsuit, assertion or other action) alleging (a) direct, indirect, or contributory infringement or inducement to infringe any patent: (i) by Facebook or any of its subsidiaries or affiliates, whether or not such claim is related to the Software, (ii) by any party if such claim arises in whole or in part from any software, product or service of Facebook or any of its subsidiaries or affiliates, whether or not such claim is related to the Software, or (iii) by any party relating to the Software; or (b) that any right in any patent claim of Facebook is invalid or unenforceable."
この特許条項はFacebookとその関連企業に対して特許権侵害訴訟した場合に、利用する権利が取り消されるというもので、Reactユーザーコミュニティ内で幾つかの論争と議論を引き起こした。
コミュニティからのフィードバックに基づき、2015年4月にFacebookは特許許諾を曖昧な部分を減らし、より寛容なものになるように変更した。
"The license granted hereunder will terminate, automatically and without notice, if you (or any of your subsidiaries, corporate affiliates or agents) initiate directly or indirectly, or take a direct financial interest in, any Patent Assertion: (i) against Facebook or any of its subsidiaries or corporate affiliates, (ii) against any party if such Patent Assertion arises in whole or in part from any software, technology, product or service of Facebook or any of its subsidiaries or corporate affiliates, or (iii) against any party relating to the Software. [...] A "Patent Assertion" is any lawsuit or other action alleging direct, indirect, or contributory infringement or inducement to infringe any patent, including a cross-claim or counterclaim."
2017年8月、Apacheソフトウェア財団はこの特許条項がApacheの製品と相容れないものであったことからライセンスの変更を求めたが、Facebookはこれを却下した。翌月、WordPressはGutenbergとCalypsoでReactの利用を中止することを決定した。
2017年9月23日、Facebookは翌週に、Flow・Jest・React・Immutable.jsの4つを標準のMITライセンスで再ライセンスすることを発表した。同社は、Reactが「ウェブ用のオープンソースソフトウェアにおける様々なエコシステムの基盤」であり、「技術的なもの以外の問題によって発展を遅らせることは望まない」と述べている。
同月26日に、React バージョン16.0.0が標準のMITライセンスでリリースされた。この変更はReact バージョン15.6.2でバージョン15.x系にもバックポートされた。