React

出典: フリー百科事典『ウィキペディア(Wikipedia)』
ナビゲーションに移動 検索に移動
React
React-icon.svg
作者 Jordan Walke
開発元 Facebookとコミュニティ
初版 2013年3月29日(6年前) (2013-03-29[1]
最新版 16.7.0 / 2018年12月19日(3か月前) (2018-12-19[2]
リポジトリ github.com/facebook/react
プログラミング言語 JavaScript
対応OS クロスプラットフォーム
種別 JavaScriptライブラリ
ライセンス MITライセンス
公式サイト React
テンプレートを表示

React(リアクト)は、Facebookとコミュニティによって開発されているユーザインタフェースを構築するためのJavaScriptライブラリである[3]React.jsまたはReactJSの名称でも知られている。

Reactはシングルページアプリケーションモバイルアプリケーションの開発におけるベースとして使用することができる。複雑なReactアプリケーションでは通常、状態管理英語版ルーティングAPIとの対話のための追加のライブラリが必要となる[4]

歴史[編集]

ReactはFacebookのソフトウェアエンジニアであるJordan Walkeによって開発された。PHP向けのHTMLコンポーネントフレームワークであるXHP英語版の影響を受けている[5]2011年にFacebookのニュースフィード上で最初に使用され、2012年にはInstagramでも使用されるようになった[6]2013年5月のJSConf USでオープンソース化された。

React NativeはAndroidiOSUWPでのReactを利用したネイティブ開発を可能にするもので、2015年2月のReact.js Confで発表され、3月にオープンソース化された。

2017年4月17日、Facebookはユーザインタフェースを構築するためのReactフレームワークライブラリの新しいコアアルゴリズムであるReact Fiber英語版を発表した[7]。React FiberはReactフレームワークの将来の改良と機能開発の基盤となるものである[8]

基本的な使い方[編集]

以下は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オブジェクトとして小道具を受け取る[9]

ステートフルコンポーネント[編集]

stateはコンポーネントの全体に渡って値を保持し、小道具を通じて子コンポーネントに渡すことができる。

class ParentComponent extends React.Component {
  state = { color: 'green' };
  render() {
    return (
      <ChildComponent color={this.state.color} />
    );
  }
}

仮想DOM[編集]

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

ライフサイクルメソッド[編集]

ライフサイクルメソッドはコンポーネントの生存期間中に設定した地点で、コードを実行できるようにするためのフックである。

  • shouldComponentUpdate - 描画が不要な場合にfalseを返すことによって、コンポーネントの不要な再描画を防ぐことができる。
  • componentDidMount - コンポーネントがマウントされるときに1回だけ呼び出される[注釈 1]。これは一般に、APIを介してリモートソースからデータを読み込む際のトリガとして使用されている。
  • render - 最も重要なライフサイクルメソッドであり、どのコンポーネントでも必要な唯一のものである。このメソッドは、通常はユーザインタフェースの変更を反映して、コンポーネントの状態が更新されるたびに呼び出される。

JSX[編集]

JSXは、JavaScriptの構文に対する拡張である[11]。HTMLと外観が似ているが、JSXは多くの開発者がよく知っている構文を使用して、構造化されたコンポーネントを描画する方法を提供する。Reactコンポーネントは、必須ではないが、通常はJSXを使用して書かれている[注釈 2]。JSXはFacebookがPHP向けに作成した拡張構文であるXHPに似ている。

JSXのコードの例:

class App extends React.Component {
  render() {
    return (
      <div>
        <p>Header</p>
        <p>Content</p>
        <p>Footer</p>
      </div>
    );
  }
}
入れ子の要素

同じレベルの複数の要素は、上記の<div>のように単一のコンテナ要素にラップするか、配列として返す必要がある[12]

属性

JSXはHTMLによって提供されるものを反映するように設計された要素属性の範囲を提供する。カスタム属性もコンポーネントに渡すことができる[13]。全ての属性はコンポーネントによってpropsとして受け取られる。

JavaScriptの式

JavaScriptのではない)は、{}を使うことによってJSXのコード内に記述することができる。

  <h1>{10+1}</h1>

上記のコードは下記のように描画される。

  <h1>11</h1>
条件文

if文はJSX内で使用することはできないが、条件式は使用することができる。以下の例の{ i === 1 ? 'true' : 'false' }では、iと1が等しいので、文字列'true'が描画される。

class App extends React.Component {
  render() {
    const i = 1;
    return (
      <div>
        <h1>{ i === 1 ? 'true' : 'false' }</h1>
      </div>
    );
  }
}

関数とJSXは条件式内で使用することができる。

class App extends React.Component {
  render() {
    const sections = [1, 2, 3];
    return (
      <div>
        { 
          sections.length > 0
            ? sections.map(n => <div>Section {n}</div>)
            : null
        }
      </div>
    );
  }
}

上記は下記のように描画される。

<div>
  <div>Section 1</div>
  <div>Section 2</div>
  <div>Section 3</div>
</div>

JSXで書かれたコードはウェブブラウザで実行可能にするために、Babel英語版などのツールを利用して事前に変換する必要がある[14]。この処理は通常はアプリケーションが配置されるよりも前の、ソフトウェアを構築している段階で実行される。

HTML外のアーキテクチャ[編集]

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

一般的なイディオム[編集]

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

Fluxアーキテクチャの使用[編集]

Fluxアーキテクチャは、AngularJSの双方向データフローとは対照的なReactの単方向データフローの概念をサポートするために、一般的なMVCアーキテクチャの代替となるものである。FluxはActionが中央Dispatcherを介してStoreに送信され、Storeに対する変更がViewに伝播することが特徴である[18]。Reactと共に使用した場合には、この伝播はコンポーネントのプロパティを通じて行われる。

Fluxはオブザーバ・パターンの変種であると考えることができる[19]

Fluxアーキテクチャの下でのReactコンポーネントは、渡されたpropsを直接変更するのではなく、Storeを変更するためにDispatcherによって送信されるActionを作成するコールバック関数に渡されるべきである。Actionは何が起こったのかを説明する義務のあるオブジェクトである。例えば、あるユーザーが別のユーザーをフォローすると記述されたActionには、自身のユーザーIDと相手のユーザーIDとUSER_FOLLOWED_ANOTHER_USERが含まれている[20]StoreDispatcherから受け取ったActionに応じて自身を変更する可能性がある。

このパターンは、「プロパティが下に流れ、アクションが上に流れる」と表現されることがある。多くのFluxの実装がこのアーキテクチャの誕生以来作られてきたが、恐らく最もよく知られている実装は単一のStoreを特徴とするRedux英語版であり、しばしば信頼できる唯一の情報源英語版と呼ばれている[21]

React Native[編集]

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

歴史[編集]

2012年、Facebookの会長兼CEOであるマーク・ザッカーバーグは、「企業としての最大の失敗は、ネイティブの反対としてHTML5に大きく賭けたことだった。」とコメントしている[25]。彼はFacebookがまもなくより良いモバイル体験を提供することを約束した。

Facebookの社内では、Jordan WalkeがバックグラウンドのJavaScriptのスレッドからiOSのUI要素生成する方法を発見した。彼らはこの技術を使ってネイティブアプリを構築することができるように、このプロトタイプを完成させるため社内ハッカソンを結成することにした[26]

数ヶ月の開発の後、FacebookはReact.js Conf 2015で最初のバージョンをリリースした。Christopher Chedeauは技術的な話の中で[27]、FacebookがReact Nativeをグループアプリと彼らの広告管理アプリで既に使用していると説明した[22]

動作原理[編集]

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

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 App
13 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';

将来の開発[編集]

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

サブプロジェクト[編集]

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

Facebook CLA[編集]

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

批判[編集]

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

ライセンス論争[編集]

2013年5月に最初に一般公開されたときには標準のApache 2.0を使用していた。2014年10月に公開されたReact バージョン0.12.0からは、Facebookの関連する特許の使用を認めるPATENTSテキストファイルが追加された、特許条項の付きの修正BSDライセンスにライセンスを変更した[35]

"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ユーザーコミュニティ内で幾つかの論争と議論を引き起こした[36][37]

コミュニティからのフィードバックに基づき、2015年4月にFacebookは特許許諾を曖昧な部分を減らし、より寛容なものになるように変更した[38]

"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[39]."

2017年8月Apacheソフトウェア財団はこの特許条項がApacheの製品と相容れないものであったことからライセンスの変更を求めたが、Facebookはこれを却下した[36]。翌月、WordPressGutenbergCalypsoでReactの利用を中止することを決定した[40]

2017年9月23日、Facebookは翌週に、FlowJestReactImmutable.jsの4つを標準のMITライセンスで再ライセンスすることを発表した[41]。同社は、Reactが「ウェブ用のオープンソースソフトウェアにおける様々なエコシステムの基盤」であり、「技術的なもの以外の問題によって発展を遅らせることは望まない」と述べている[42]

同月26日に、React バージョン16.0.0が標準のMITライセンスでリリースされた[43]。この変更はReact バージョン15.6.2でバージョン15.x系にもバックポートされた[44]

脚注[編集]

注釈[編集]

  1. ^ このコンポーネントは、しばしばDOMノードと関連付けることによって、ユーザインタフェースで作成されている。
  2. ^ コンポーネントは純粋なJavaScriptで書かれている場合もある。

出典[編集]

  1. ^ Tom Occhino and Jordan Walke: JS Apps at Facebook - YouTube
  2. ^ Releases”. GitHub. 2019年1月13日閲覧。
  3. ^ Paul Krill (2014年5月15日). “React: Making faster, smoother UIs for data-driven Web apps”. 2019年1月13日閲覧。
  4. ^ Jon Samp (2018年1月13日). “React Router to Redux First Router”. 2019年1月13日閲覧。
  5. ^ Bill Fisher (2015年2月12日). “How was the idea to develop React conceived and how many people worked on developing it and implementing it at Facebook?”. 2019年1月13日閲覧。
  6. ^ Pete Hunt - YouTube
  7. ^ Facebook announces React Fiber, a rewrite of its React framework”. TechCrunch (2017年4月18日). 2019年1月13日閲覧。
  8. ^ React Fiber Architecture”. GitHub. 2019年1月13日閲覧。
  9. ^ Props are Read-Only”. Facebook. 2019年1月13日閲覧。
  10. ^ Refs and the DOM”. Facebook. 2019年1月13日閲覧。
  11. ^ Draft: JSX Specification”. Facebook. 2019年1月13日閲覧。
  12. ^ New render return types: fragments and strings”. Facebook (2017年9月26日). 2019年1月13日閲覧。
  13. ^ Support for custom DOM attributes”. Facebook (2017年9月26日). 2019年1月13日閲覧。
  14. ^ Fischer, Ludovico (2017). React for Real: Front-End Code, Untangled. ISBN 978-1680502633. https://books.google.com/books?id=Tg9QDwAAQBAJ. 
  15. ^ Pete Hunt (2013年6月5日). “Why did we build React?”. 2019年1月13日閲覧。
  16. ^ Sam Selvanathan (2015年4月27日). “Isomorphic React Apps with React-Engine”. 2019年1月13日閲覧。
  17. ^ Netflix Likes React”. Netflix Technology Blog (2015年1月28日). 2019年1月13日閲覧。
  18. ^ In Depth Overview”. Facebook. 2019年1月13日閲覧。
  19. ^ Nicholas Johnson. “Flux”. 2019年1月13日閲覧。
  20. ^ The History of React and Flux with Dan Abramov”. Three Devs and a Maybe (2015年11月6日). 2019年1月13日閲覧。
  21. ^ State Management Tools – Results”. The State of JavaScript 2017. 2019年1月13日閲覧。
  22. ^ a b React Native: Bringing modern web techniques to mobile”. Facebook (2015年3月26日). 2019年1月13日閲覧。
  23. ^ React Native for Android: How we built the first cross-platform React Native app”. Facebook (2015年9月14日). 2019年1月13日閲覧。
  24. ^ React Native on the Universal Windows Platform”. Microsoft (2016年4月13日). 2019年1月13日閲覧。
  25. ^ ザッカーバーグ氏の「HTML5に賭けたのは失敗」発言には続きがある。長期的にはHTML5への期待も語る”. Publickey (2012年9月14日). 2019年1月13日閲覧。
  26. ^ A short Story about React Native”. JobNinja Blog (2018年1月15日). 2019年1月13日閲覧。
  27. ^ React.js Conf 2015 Keynote 2 - A Deep Dive into React Native - YouTube
  28. ^ Tadeu Zagallo (2015年10月15日). “Bridging in React Native”. 2019年1月13日閲覧。
  29. ^ React Native vs Flutter: Which Cross-Platform Framework is Better?”. Parsed. 2019年1月13日閲覧。
  30. ^ Meeting Notes”. 2019年1月13日閲覧。
  31. ^ react Wiki”. GitHub. 2019年1月13日閲覧。
  32. ^ Contributor License Agreement (CLA)”. Facebook. 2019年1月13日閲覧。
  33. ^ Virtual DOM and Internals”. Facebook. 2019年1月13日閲覧。
  34. ^ Rob Dodson. “Custom Elements Everywhere”. 2019年1月13日閲覧。
  35. ^ 0.12.0 (October 28, 2014)”. GitHub. 2019年1月13日閲覧。
  36. ^ a b Facebook、React.jsのライセンスを維持 - Apacheとの衝突を回避せず”. マイナビニュース (2017年8月22日). 2019年1月13日閲覧。
  37. ^ Berkana (2015年5月25日). “A compelling reason not to use ReactJS”. 2019年1月13日閲覧。
  38. ^ Updating Our Open Source Patent Grant”. Facebook (2015年4月10日). 2019年1月13日閲覧。
  39. ^ Additional Grant of Patent Rights Version 2”. GitHub. 2019年1月13日閲覧。
  40. ^ Facebookの特許条項のリスクを嫌い、WordPressがReactライブラリの利用を止めることを発表”. TechCrunch Japan (2017年9月19日). 2019年1月13日閲覧。
  41. ^ Relicensing React, Jest, Flow, and Immutable.js”. Facebook (2017年9月22日). 2019年1月13日閲覧。
  42. ^ Facebook、ReactのライセンスをMITに変更の意向”. マイナビニュース (2017年9月29日). 2019年1月13日閲覧。
  43. ^ MIT licensed”. Facebook (2017年9月26日). 2019年1月13日閲覧。
  44. ^ React v15.6.2”. Facebook (2017年9月25日). 2019年1月13日閲覧。

関連項目[編集]

外部リンク[編集]