Wikipedia

React

曖昧さ回避 Windowsとの互換性を持つ自由なOSを開発するプロジェクトの「ReactOS」とは異なります。

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

React
作者 Jordan Walke
開発元 Metaとコミュニティ
初版 2013年3月29日 (11年前) (2013-03-29)[1]
最新版 18.2.0[2] ウィキデータを編集 - 2022年6月14日 (22か月前)
リポジトリ
ウィキデータを編集
プログラミング
言語		 JavaScript
対応OS クロスプラットフォーム
種別 JavaScriptライブラリ
ライセンス MITライセンス
公式サイト react.dev ウィキデータを編集
テンプレートを表示

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

歴史 編集

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

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

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

基本的な使い方 編集

以下はJSXとJavaScriptを利用したReactの基本的な使い方である。 

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

import React from "react";
import ReactDOM from "react-dom/client";

const Greeter = (props) => {
  return (
    <h1>{props.greeting}</h1>
  );
};

const App = () => {
  return <Greeter greeting="Hello, world!" />;
};

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

機能 編集

Reactが提供する代表的な機能を以下に挙げる。

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

プロパティ (通常は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のコードの例: 

const App = () => {
  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」の文字列が描画される。 

const App = ({ i }) => {
  return <div>{i === 1}</div>;
};

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

const App = () => {
  const sections = [1, 2, 3];
  return (
    <div>
      {sections.map((n) => (
        <div>Section {n}</div>
      ))}
    </div>
  );
};

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

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

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

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

Reactは「レンダラーに依存しないこと」を設計原則としている[15]。ゆえにReactはウェブブラウザでHTMLを描画すること（DOMによるレンダリング）以外にも適用される。例えば、Facebookはcanvasタグに描画する動的チャートを持ち[16]、NetflixとPayPalではサーバとクライアントの両方で読み込むことができる同一のHTMLを描画するために利用されている[17][18]。またReact NativeによりネイティブアプリのUIレイヤーとしても機能する。

一般的なイディオム 編集

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

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

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

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

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

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

React Native 編集

詳細は「React Native」を参照

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

歴史 編集

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

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

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

動作原理 編集

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

React NativeはHTML5に全く頼らず、全てJavaScriptで書かれており、ネイティブのSDKに頼っている。

Hello world 編集

React NativeによるHello world: 

import React from "react";
import { AppRegistry, Text } from "react-native";

export const HelloWorldApp = () => <Text>Hello world!</Text>;

AppRegistry.registerComponent("HelloWorld", () => HelloWorldApp);

将来の開発 編集

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

サブプロジェクト 編集

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

Facebook CLA 編集

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

批判 編集

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

ライセンス論争 編集

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

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

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

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

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

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

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

脚注 編集

注釈 編集

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

出典 編集

  1. ^ Tom Occhino and Jordan Walke: JS Apps at Facebook - YouTube
  2. ^ "18.2.0 (June 14, 2022)"; 閲覧日: 2022年6月23日.
  3. ^ React. ユーザインターフェース構築のための JavaScript ライブラリ React
  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. ^ レンダラーに依存しないことは React の重要な設計上の制約です。React Docs - 設計原則 - DOM を超えて
  16. ^ Pete Hunt (2013年6月5日). “Why did we build React?”. 2019年1月13日閲覧。
  17. ^ Sam Selvanathan (2015年4月27日). “Isomorphic React Apps with React-Engine”. 2019年1月13日閲覧。
  18. ^ “Netflix Likes React”. Netflix Technology Blog (2015年1月28日). 2019年1月13日閲覧。
  19. ^ “In Depth Overview”. Facebook. 2019年1月13日閲覧。
  20. ^ Nicholas Johnson. “Flux”. 2019年1月13日閲覧。
  21. ^ “The History of React and Flux with Dan Abramov”. Three Devs and a Maybe (2015年11月6日). 2019年1月13日閲覧。
  22. ^ “State Management Tools – Results”. The State of JavaScript 2017. 2019年1月13日閲覧。
  23. ^ a b “React Native: Bringing modern web techniques to mobile”. Facebook (2015年3月26日). 2019年1月13日閲覧。
  24. ^ “React Native for Android: How we built the first cross-platform React Native app”. Facebook (2015年9月14日). 2019年1月13日閲覧。
  25. ^ “React Native on the Universal Windows Platform”. Microsoft (2016年4月13日). 2019年1月13日閲覧。
  26. ^ “ザッカーバーグ氏の「HTML5に賭けたのは失敗」発言には続きがある。長期的にはHTML5への期待も語る”. Publickey (2012年9月14日). 2019年1月13日閲覧。
  27. ^ “A short Story about React Native”. JobNinja Blog (2018年1月15日). 2019年1月13日閲覧。
  28. ^ React.js Conf 2015 Keynote 2 - A Deep Dive into React Native - YouTube
  29. ^ Tadeu Zagallo (2015年10月15日). “Bridging in React Native”. 2019年1月13日閲覧。
  30. ^ “React Native vs Flutter: Which Cross-Platform Framework is Better?”. Parsed. 2019年1月13日閲覧。
  31. ^ “Meeting Notes”. 2019年1月13日閲覧。
  32. ^ “react Wiki”. GitHub. 2019年1月13日閲覧。
  33. ^ “Contributor License Agreement (CLA)”. Facebook. 2019年1月13日閲覧。
  34. ^ “Virtual DOM and Internals”. Facebook. 2019年1月13日閲覧。
  35. ^ Rob Dodson. “Custom Elements Everywhere”. 2019年1月13日閲覧。
  36. ^ “0.12.0 (October 28, 2014)”. GitHub. 2019年1月13日閲覧。
  37. ^ a b “Facebook、React.jsのライセンスを維持 - Apacheとの衝突を回避せず”. マイナビニュース (2017年8月22日). 2019年1月13日閲覧。
  38. ^ Berkana (2015年5月25日). “A compelling reason not to use ReactJS”. 2019年1月13日閲覧。
  39. ^ “Updating Our Open Source Patent Grant”. Facebook (2015年4月10日). 2019年1月13日閲覧。
  40. ^ “Additional Grant of Patent Rights Version 2”. GitHub. 2019年1月13日閲覧。
  41. ^ “Facebookの特許条項のリスクを嫌い、WordPressがReactライブラリの利用を止めることを発表”. TechCrunch Japan (2017年9月19日). 2019年1月13日閲覧。
  42. ^ “Relicensing React, Jest, Flow, and Immutable.js”. Facebook (2017年9月22日). 2019年1月13日閲覧。
  43. ^ “Facebook、ReactのライセンスをMITに変更の意向”. マイナビニュース (2017年9月29日). 2019年1月13日閲覧。
  44. ^ “MIT licensed”. Facebook (2017年9月26日). 2019年1月13日閲覧。
  45. ^ “React v15.6.2”. Facebook (2017年9月25日). 2019年1月13日閲覧。

関連項目 編集

 
ポータル FLOSS

外部リンク 編集

「https://ja.wikipedia.org/w/index.php?title=React&oldid=99553675」から取得