Wikipedia

React

ユーザインターフェースを作成するためのJavaScriptライブラリ
曖昧さ回避 Windowsとの互換性を持つ自由なOSを開発するプロジェクトの「ReactOS」とは異なります。

React (リアクト)またはReact.js、ReactJS とは、ウェブブラウザで複雑なUIを容易に生成するためのフリーかつオープンソースなフロントエンドJavaScriptライブラリである[3]。Meta（旧Facebook）が2011年から社内用に開発していたライブラリを2013年に一般に公開したもので、Meta社と個人や企業からなるコミュニティによって開発されている。

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

概要

編集

Reactの主な特徴は、クライアントサイドであること、コンポーネントベースであること、仮想DOMを扱うことである。

Reactはクライアントサイドである。従来、データファイルや通信内容をもとに複雑なUIをもったWebページ用HTMLを生成するためには、PHPやJava、RubyなどWEBサーバー上で動くサーバーサイド言語が用いられていた。それに対して、Reactはブラウザ上で動くJavaScriptを使い、ページ表示後にHTMLタグ要素を既存のHTMLに挿入するJSXとよばれる手法によりクライアントサイドで動作するという特徴がある（ただし後に登場したRSC(React Server Components)機能でサーバーサイドレンダリングも可能）。

Reactはコンポーネントベースである。先行するクライアントサイドのUI開発に使われていたjQuery等と比べ、コンポーネントを単位にした要素ごとの開発が可能であり、大規模な開発に適している。

Reactは仮想DOMを採用し、軽量に更新可能である。仮想DOMとは、HTML言語の階層木構造(DOM)を直接操作するのではなく、仮想的なDOMを操作し最小限の変更点のみ実際のDOMに反映する機能で、Vue.jsなども採用している。

Reactは単独でも動作するが、予約サイトなど双方向の通信機能によって表示を変える動的ページの構築では、サーバーサイドの処理をNode.js(JavaScriptのサーバーサイド向け拡張)と組み合わせたりNext.js(Node.jsのライブラリ)と組み合わせて使われることが一般的である。また、Reactの実際の開発では、直接JavaScriptを書くのではなく、TypeScript(JavaScriptを型付きにした拡張言語)でReactを書きJavaScriptにトランスパイルすることがある。

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

特徴

編集

主な特徴

編集

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

他フレームワークとの比較

編集

Reactと立ち位置が近く、競合するフレームワークとして、Vue.js、jQuery、AngularJSなどがある。 Vue.jsはクライアントサイドのJavaScriptによるUI向けライブラリという点では共通しているが、JSXではなくPHP風の置換記法によってHTMLを書き換えたり、双方向バインディングに対応している点が異なり、中小規模のプロジェクトで使われやすい[5]。 jQueryはReactより古く2006年に誕生したライブラリであり、DOM操作によってHTMLを動的に生成するクライアントサイドのJavaScriptライブラリである点はReactと共通しているが、UIの操作について、モデル・ビュー・コントロールを分離するMVCアーキテクチャの設計思想以前に作られ、データの一貫した管理が難しい[6]。2000年代後半から2010年代前半にかけて広く用いられた。 AngularJSは2009年に誕生し、MVCアーキテクチャを採用したクライアントサイドJavaScriptライブラリであり、Googleとコミュニティーが開発していたが、2022年にサポートを終了した。

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

編集

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

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

編集

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

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

仮想DOM

編集

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

ライフサイクルメソッド

編集

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

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

JSX

編集

JSXは、JavaScriptの構文に対する拡張である[9]。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>のように単一のコンテナ要素にラップするか、配列として返す必要がある[10]。

属性

JSXはHTMLによって提供されるものを反映するように設計された要素属性の範囲を提供する。カスタム属性もコンポーネントに渡すことができる[11]。全ての属性はコンポーネントによって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などのツールを利用して事前に変換する必要がある[12]。この処理は通常はアプリケーションが配置されるよりも前の、ソフトウェアを構築している段階で実行される。

HTML外のアーキテクチャ

編集

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

歴史

編集

誕生

編集

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

React Native

編集

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

React Fiber

編集

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

ライセンス論争

編集

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

この特許条項はFacebookとその関連企業に対して特許権侵害訴訟した場合に、利用する権利が取り消されるというもので、Reactユーザーコミュニティ内で幾つかの論争と議論を引き起こした[22][23]。

コミュニティからのフィードバックに基づき、2015年4月にFacebookは特許許諾を曖昧な部分を減らし、より寛容なものになるように変更した[24]。 2017年8月、Apacheソフトウェア財団はこの特許条項がApacheの製品と相容れないものであったことからライセンスの変更を求めたが、Facebookはこれを却下した[22]。翌月、WordPressはGutenbergとCalypsoでReactの利用を中止することを決定した[25]。

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

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

将来の開発

編集

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

サブプロジェクト

編集

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

Facebook CLA

編集

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

基本的な使い方

編集

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

Fluxアーキテクチャの使用

編集

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

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

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

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

React Native

編集
詳細は「React Native」を参照

React Nativeは、本来WebアプリのUI開発のためのフレームワークであるReactを、PCやスマホ向けのネイティブアプリの開発にも使えるようにしたもので、Facebookによって2015年2月に発表された[37]。Android、iOS、Windows（UWP）に対応している[38][39]。

歴史

編集

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

Facebookの社内では、Jordan WalkeがJavaScript製のwebアプリからiOSのUIを生成するシステムのプロトタイプを作り上げており、本格的にReact製Webアプリからネイティブモバイルアプリを構築するために社内ハッカソンが結成された[41]。

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

動作原理

編集

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

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);

批判

編集

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


脚注

編集

注釈

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

出典

編集
  1. ^ Tom Occhino and Jordan Walke: JS Apps at Facebook - YouTube
  2. ^ https://registry.npmjs.com/react.
  3. ^ React. ユーザインターフェース構築のための JavaScript ライブラリ React
  4. ^ Jon Samp (2018年1月13日). “React Router to Redux First Router”. 2019年1月13日閲覧。
  5. ^ “【初心者向け】Vue.jsとは？特徴やメリット、注意点をわかりやすく解説 - カゴヤのサーバー研究室”. 2024年5月1日閲覧。
  6. ^ “フロントエンドソフトウェアの歴史｜マイクロフロントエンド入門”. 2024年5月1日閲覧。
  7. ^ “Props are Read-Only”. Facebook. 2019年1月13日閲覧。
  8. ^ “Refs and the DOM”. Facebook. 2019年1月13日閲覧。
  9. ^ “Draft: JSX Specification”. Facebook. 2019年1月13日閲覧。
  10. ^ “New render return types: fragments and strings”. Facebook (2017年9月26日). 2019年1月13日閲覧。
  11. ^ “Support for custom DOM attributes”. Facebook (2017年9月26日). 2019年1月13日閲覧。
  12. ^ Fischer, Ludovico (2017). React for Real: Front-End Code, Untangled. ISBN 978-1680502633. https://books.google.co.jp/books?id=Tg9QDwAAQBAJ 
  13. ^ レンダラーに依存しないことは React の重要な設計上の制約です。React Docs - 設計原則 - DOM を超えて
  14. ^ Pete Hunt (2013年6月5日). “Why did we build React?”. 2019年1月13日閲覧。
  15. ^ Sam Selvanathan (2015年4月27日). “Isomorphic React Apps with React-Engine”. 2019年1月13日閲覧。
  16. ^ “Netflix Likes React”. Netflix Technology Blog (2015年1月28日). 2019年1月13日閲覧。
  17. ^ 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日閲覧。
  18. ^ Pete Hunt - YouTube
  19. ^ “Facebook announces React Fiber, a rewrite of its React framework”. TechCrunch (2017年4月18日). 2019年1月13日閲覧。
  20. ^ “React Fiber Architecture”. GitHub. 2019年1月13日閲覧。
  21. ^ “0.12.0 (October 28, 2014)”. GitHub. 2019年1月13日閲覧。
  22. ^ a b “Facebook、React.jsのライセンスを維持 - Apacheとの衝突を回避せず”. マイナビニュース (2017年8月22日). 2019年1月13日閲覧。
  23. ^ Berkana (2015年5月25日). “A compelling reason not to use ReactJS”. 2019年1月13日閲覧。
  24. ^ “Updating Our Open Source Patent Grant”. Facebook (2015年4月10日). 2019年1月13日閲覧。
  25. ^ “Facebookの特許条項のリスクを嫌い、WordPressがReactライブラリの利用を止めることを発表”. TechCrunch Japan (2017年9月19日). 2019年1月13日閲覧。
  26. ^ “Relicensing React, Jest, Flow, and Immutable.js”. Facebook (2017年9月22日). 2019年1月13日閲覧。
  27. ^ “Facebook、ReactのライセンスをMITに変更の意向”. マイナビニュース (2017年9月29日). 2019年1月13日閲覧。
  28. ^ “MIT licensed”. Facebook (2017年9月26日). 2019年1月13日閲覧。
  29. ^ “React v15.6.2”. Facebook (2017年9月25日). 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. ^ “In Depth Overview”. Facebook. 2019年1月13日閲覧。
  34. ^ Nicholas Johnson. “Flux”. 2019年1月13日閲覧。
  35. ^ “The History of React and Flux with Dan Abramov”. Three Devs and a Maybe (2015年11月6日). 2019年1月13日閲覧。
  36. ^ “State Management Tools – Results”. The State of JavaScript 2017. 2019年1月13日閲覧。
  37. ^ a b “React Native: Bringing modern web techniques to mobile”. Facebook (2015年3月26日). 2019年1月13日閲覧。
  38. ^ “React Native for Android: How we built the first cross-platform React Native app”. Facebook (2015年9月14日). 2019年1月13日閲覧。
  39. ^ “React Native on the Universal Windows Platform”. Microsoft (2016年4月13日). 2019年1月13日閲覧。
  40. ^ “ザッカーバーグ氏の「HTML5に賭けたのは失敗」発言には続きがある。長期的にはHTML5への期待も語る”. Publickey (2012年9月14日). 2019年1月13日閲覧。
  41. ^ “A short Story about React Native”. JobNinja Blog (2018年1月15日). 2019年1月13日閲覧。
  42. ^ React.js Conf 2015 Keynote 2 - A Deep Dive into React Native - YouTube
  43. ^ Tadeu Zagallo (2015年10月15日). “Bridging in React Native”. 2019年1月13日閲覧。
  44. ^ “React Native vs Flutter: Which Cross-Platform Framework is Better?”. Parsed. 2019年1月13日閲覧。
  45. ^ “Virtual DOM and Internals”. Facebook. 2019年1月13日閲覧。
  46. ^ Rob Dodson. “Custom Elements Everywhere”. 2019年1月13日閲覧。

関連項目

編集
 
ポータル FLOSS

外部リンク

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