Reactとは？わかりやすく解説

React
作者	Jordan Walke
開発元	Metaとコミュニティ
初版	2013年3月29日 (11年前)
最新版	19.0.0 - 2024年12月5日 (35日前)
リポジトリ	github.com/facebook/react;
プログラミング; 言語	JavaScript
対応OS	クロスプラットフォーム
種別	JavaScriptライブラリ
ライセンス	MITライセンス
公式サイト	react.dev
	テンプレートを表示

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

概要

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が提供する代表的な機能を以下に挙げる。

宣言的UI（テンプレーティング）: JSX
データバインディング
コンポーネント化: 関数コンポーネント
高効率レンダリング: 仮想DOM

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

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>{String(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]、従って、ウェブブラウザの標準に依存したそれらのコンポーネントを実装する代替ライブラリでは上手く機能しない。

脚注

注釈

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

出典

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

外部リンク

[9] このコンポーネントは、しばしばDOMノードと関連付けることによって、ユーザインタフェースで作成されている。

[11] コンポーネントは純粋なJavaScriptで書かれている場合もある。

[1] Tom Occhino and Jordan Walke: JS Apps at Facebook - YouTube

[wikidata-c30e93f786fb33e1ab05526ee252ec9ef937f700-v3-2] "React v19"; 閲覧日: 2024年12月5日; 出版日: 2024年12月5日.

[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日閲覧。

[10] “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

[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] 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日閲覧。

[20] Pete Hunt - YouTube

[21] “Facebook announces React Fiber, a rewrite of its React framework”. TechCrunch (2017年4月18日). 2019年1月13日閲覧。

[22] “React Fiber Architecture”. GitHub. 2019年1月13日閲覧。

[23] “0.12.0 (October 28, 2014)”. GitHub. 2019年1月13日閲覧。

[mynavi_2017_08_22-24] “Facebook、React.jsのライセンスを維持 - Apacheとの衝突を回避せず”. マイナビニュース (2017年8月22日). 2019年1月13日閲覧。

[25] Berkana (2015年5月25日). “A compelling reason not to use ReactJS”. 2019年1月13日閲覧。

[26] “Updating Our Open Source Patent Grant”. Facebook (2015年4月10日). 2019年1月13日閲覧。

[27] “Facebookの特許条項のリスクを嫌い、WordPressがReactライブラリの利用を止めることを発表”. TechCrunch Japan (2017年9月19日). 2019年1月13日閲覧。

[28] “Relicensing React, Jest, Flow, and Immutable.js”. Facebook (2017年9月22日). 2019年1月13日閲覧。

[29] “Facebook、ReactのライセンスをMITに変更の意向”. マイナビニュース (2017年9月29日). 2019年1月13日閲覧。

[30] “MIT licensed”. Facebook (2017年9月26日). 2019年1月13日閲覧。

[31] “React v15.6.2”. Facebook (2017年9月25日). 2019年1月13日閲覧。

[32] “Meeting Notes”. 2019年1月13日閲覧。

[33] “react Wiki”. GitHub. 2019年1月13日閲覧。

[34] “Contributor License Agreement (CLA)”. Facebook. 2019年1月13日閲覧。

[35] “In Depth Overview”. Facebook. 2019年1月13日閲覧。

[36] Nicholas Johnson. “Flux”. 2019年1月13日閲覧。

[37] “The History of React and Flux with Dan Abramov”. Three Devs and a Maybe (2015年11月6日). 2019年1月13日閲覧。

[38] “State Management Tools – Results”. The State of JavaScript 2017. 2019年1月13日閲覧。

[Facebook_Code_2015_03_26-39] “React Native: Bringing modern web techniques to mobile”. Facebook (2015年3月26日). 2019年1月13日閲覧。

[40] “React Native for Android: How we built the first cross-platform React Native app”. Facebook (2015年9月14日). 2019年1月13日閲覧。

[41] “React Native on the Universal Windows Platform”. Microsoft (2016年4月13日). 2019年1月13日閲覧。

[42] “ザッカーバーグ氏の「HTML5に賭けたのは失敗」発言には続きがある。長期的にはHTML5への期待も語る”. Publickey (2012年9月14日). 2019年1月13日閲覧。

[43] “A short Story about React Native”. JobNinja Blog (2018年1月15日). 2019年1月13日閲覧。

[44] React.js Conf 2015 Keynote 2 - A Deep Dive into React Native - YouTube

[45] Tadeu Zagallo (2015年10月15日). “Bridging in React Native”. 2019年1月13日閲覧。

[46] “React Native vs Flutter: Which Cross-Platform Framework is Better?”. Parsed. 2019年1月13日閲覧。

[47] “Virtual DOM and Internals”. Facebook. 2019年1月13日閲覧。

[48] Rob Dodson. “Custom Elements Everywhere”. 2019年1月13日閲覧。

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[注釈 1]

[9]

[注釈 2]

[10]

[11]

[12]

[13]

[14]

[15]

[16]

[17]

[18]

[19]

[20]

[21]

[22]

[23]

[24]

[25]

[26]

[27]

[28]

[29]

[30]

[31]

[32]

[33]

[34]

[35]

[36]

[37]

[38]

[39]

[40]

[41]

[42]

[43]

[44]

[45]

[46]

表話編歴 Meta Platforms, Inc.
Family of Apps（アプリ部門）/ Reality Labs（VR・AR部門）/ Meta AI（英語版）（AI部門）
サービス	Facebook Instagram Messenger WhatsApp Threads
オープンソース	Apache Cassandra Apache Hive Apache Thrift Buck FQL（英語版） Hack HHVM HipHop for PHP（英語版） Infer（英語版） MyRocks（英語版） Open Compute Project（英語版） Phabricator React React Native RocksDB Scribe（英語版） Telecom Infra Project（英語版） Tornado
VRヘッドセット	Meta Quest/Oculus Oculus Rift Oculus Go Oculus Quest Meta Quest 2 Meta Quest Pro Meta Quest 3 Meta Quest 3S
その他の製品	LLaMA Meta Horizon OS（英語版） Meta Portal（英語版） Ray-Ban Meta（英語版） Workplace（英語版）
人物	マーク・ザッカーバーグエドゥアルド・サベリンクリス・ヒューズショーン・パーカーシェリル・サンドバーグ味澤将宏
関連項目	いいね!ボタン Facebookへの批判 Facebook監督委員会 Diem ソーシャル・ネットワーク Facebookで大逆転ビッグ・テック
Category:Facebook

表話編歴 JavaScript
概念	文法（英語版） JavaScriptライブラリ控えめなJavaScript
エンジン	Carakan/Futhark/Linear B Chakra JavaScriptCore JScript KJS Narcissus Nashorn Rhino SpiderMonkey V8
コンパイラ	AtScript Babel ClojureScript CoffeeScript Emscripten Google Closure Compiler Google Web Toolkit Haxe JSX Kotlin Nim PureScript TypeScript
デバッガ	Firebug Google Chrome Developer Tools Internet Explorer Developer Tools Opera Dragonfly Visual Studio Visual Studio Express Visual Studio Code Web Inspector
エディタ	Atom Brackets Visual Studio Visual Studio Express Light Table Visual Studio Code WebStorm
サーバーサイド	Active Server Pages Bun CommonJS Deno Node.js Vert.x（英語版） Wakanda（英語版）
フレームワーク・ライブラリ	Angular/AngularJS Backbone.js Dojo Express.js Ext JS Google Web Toolkit jQuery Mobile KaTeX MathJax MochiKit MooTools Prototype React Vue.js YUI ライブラリ SolidJS Svelte Hono ElysiaJS Qwik
ユニットテスト	Jasmine（英語版） Jest Mocha（英語版） QUnit ユニットテスト・フレームワーク一覧
Docジェネレータ	JSDoc
コード解析	ESLint JSHint JSLint
パッケージ管理	npm NuGet
アプリケーションバンドラー	Webpack Vite esbuild
関連技術	Ajax CSS DHTML DOM HTML JSON JSONP WebAssembly asm.js（英語版）
人物	ジョン・レシグダグラス・クロックフォード（英語版）ブレンダン・アイクライアン・ダール
カテゴリコモンズウィキブックス Portal:コンピュータ

表話編歴 Webアプリケーションフレームワーク
ASP.NET	ASP.NET MVC ASP.NET Web Forms Umbraco
Groovy	Grails
Java	Apache Struts GWT ICEfaces JavaServer Faces Play Spring Tapestry WebWork Wicket ZK
JavaScript	Angular/AngularJS Backbone.js Dojo Toolkit Express.js Ext JS jQuery Knockout.js MooTools Node.js Prototype React Rico Sencha Touch Vue.js Hono ElysiaJS Qwik
Perl	Catalyst Mojolicious
PHP	CakePHP CodeIgniter Drupal eZ Publish FuelPHP Grav Laravel PRADO Symfony TYPO3 Yii Zend Silex
Python	CherryPy Django Flask Plone Pylons Tornado TurboGears web2py Zope
Ruby	Ruby on Rails Sinatra Padrino
Scala	Lift Play
カテゴリ

Re:AcT

公式サイト	Re_AcT
YouTube
チャンネル	【Re:AcT/リアクト】公式チャンネル
活動期間	2018年 -
登録者数	3.17万人
総再生回数	6,494,734 回
チャンネル登録者数・総再生回数は 000000002025-04-01-00002025年4月1日時点。
テンプレートを表示

名前	活動開始日	誕生日	YouTube	登録者数（万人）	所属ユニット	備考
獅子神レオナ	2018年9月14日	8月16日	獅子神レオナ/レオナちゃんねる	33.3	Re_KMKL ちーむきゅーてぃくる	KAGAYAKISTARS第2期生出身
花鋏キョウ	2018年9月14日	7月24日	花鋏キョウ*Kyo Hanabasami	33	Re_KMKL	KAGAYAKISTARS第2期生出身
水瓶ミア	2018年9月14日	2月24日	水瓶ミア/ミアちゃんねる	3.08	Re_KMKL ちーむきゅーてぃくる	KAGAYAKISTARS第2期生出身
夢川かなう	2018年9月14日	4月14日	夢川かなう/Kanau ch 夢川かなう	3.53 4970	Re_KMKL	KAGAYAKISTARS第2期生出身今まで以上に歌に力を入れて活動するため、 2024年4月14日に新しいYouTubeチャンネルを開設^[24]
天川はの	2019年9月17日	5月1日	天川はの/AmakawaHano	11.6	すたーべあ!^{[注釈 1]}
丸餅つきみ^[25]	2020年4月30日	10月1日	Marumochi Tsukimi / 丸餅つきみ	1.44
月紫アリア^[26]	2021年4月23日	10月16日	月紫アリア / Tsukushi Aria	6.97	ねころまんさー
猫乃ユキノ^[27]	2021年5月27日^{[注釈 2]}	11月10日	猫乃ユキノ／NekonoYukino	5.76	ねころまんさー	元個人勢
九楽ライ	2021年11月3日	5月30日	Kulaku Lie ch.九楽ライ	4.82	はな組
皇ロゼ	2021年11月3日	1月23日	皇ロゼ／SumeragiRose ch	1.74	はな組
魔光リサ	2022年4月2日	11月1日	魔光リサ - Lisa Makoh -	3.27	つばさぐらでーしょん
稀羽すう	2022年4月2日	5月22日	稀羽すう - Suu Usuwa -	9.12	つばさぐらでーしょん
音伽ねむ	2022年8月12日	2月4日	音伽ねむ - Nemu Otogi -	1.24		ミクチャで実施された公開オーディションより選出
ククルア・クレイユ	2022年8月12日	3月25日	ククルア・クレイユ - Coucourua Creil -	1.52		ミクチャで実施された公開オーディションより選出
狐宵いなり^[28]	2023年3月10日	8月30日	狐宵いなり - Inari Koyoi -	0.164	Re:AcT Gaming	メインプラットフォームはTwitch（狐宵いなり）
小夜シグレ	2023年3月10日	11月24日	小夜シグレ - Shigure Sayo -	0.0570	Re:AcT Gaming	メインプラットフォームはTwitch（小夜シグレ）
天華あむ	2023年3月10日	7月16日	天華あむ - Amu Tenka -	0.2020	Re:AcT Gaming	メインプラットフォームはTwitch（天華あむ）
白妙とき	2024年4月26日	1月9日	白妙とき -Shirotae Toki-	0.0430	Re:AcT Gaming	メインプラットフォームはTwitch（白妙とき）
白音ゆき	2025年3月8日	12月2日	白音ゆき -Shirane Yuki-	2.59		2020年3月1日から2021年12月31日までRe:AcTで活動していたが卒業し、2025年3月8日に再デビュー
杏夜くもり	2025年3月20日	11月4日	杏夜くもり -Anya Kumori-	2.01		個人勢からの編入。2022年5/8にデビュー。
レイラ・サマ	2025年3月20日	9月2日	レイラ・サマ -Layla Sama-	0.1070

アーティスト	配信日	配信曲
綺羅星ウタ	2018年9月3日^[86]	本日は星天なり（作詞・作曲 - TOKOTOKO）
星屑れん	2018年9月3日^[86]	本日は星天なり（作詞・作曲 - TOKOTOKO）
花鋏キョウ	2019年4月3日^[84]	蒼に躊躇う（作詞・作曲 - ポリスピカデリー）
Re:A ProjecT Season 1	2019年5月20日^[85]	全6曲 Since-Re:ly 〜シンシアリー〜（作詞 - 開道結子 / 作曲 - 難波研）徒然Pieces（作詞・作曲 - Lemm）急上昇ガールズ（作詞・作曲 - 烏屋茶房）夢見ルピナス（作詞・作曲 - 山本真央樹）ケセラセラ（作詞・作曲 - Neko Hacker）風になれ恋心（作詞・作曲 - 北川翔也）

発売日	タイトル	アーティスト
2020年12月2日	ナンセンス・ワード	獅子神レオナ
2021年1月29日	Dice of Fate	宇佐美ユノ

発売日	タイトル	アーティスト
2020年12月2日	Starry	花鋏キョウ
2020年12月25日	Dent de lion	花鋏キョウ × 獅子神レオナ
2020年12月25日	Honeycomb	天川はの
2021年1月29日	Egoistic Love	黒音よみ

発売日	タイトル	アーティスト
2020年12月2日	フェーデ	白音ゆき
2021年1月29日	リトラタンの森	姫熊りぼん

発売日	タイトル
2019年4月3日	蒼に躊躇う
2020年5月2日	Daisy
2020年6月30日	Moment
2020年7月25日	約束の花

発売日	タイトル
2019年9月25日	Brightenin’ Hope
2020年5月2日	5月のせいにして。
2020年11月7日	レイニーデイリーファンキー

発売日	タイトル	収録曲
2019年4月3日	ハサミウタ	全10曲シャルル（Arrange ver.） DAYBREAK FRONTLINE ロキ（with 獅子神レオナ）ヒューマノイド君に届けピースサイン君の知らない物語藍二乗 orion カタオモイ
2019年5月2日	Myosøtis/hasamiUta**	全10曲 disc1:original tracks「Myosøtis」 paradøx Behavior vivid 蒼に躊躇う-Yunosuke Mix- disc2:cover tracks 「hasamiUta**」名前のない怪物 Rumor flos 春雷 Ghost of a smile コイワズライ

発売日	タイトル	収録曲
2019年9月25日	LEONA’s YELL	全6曲シュガーソングとビターステップ今夜このまま内秘心書ともにユニバース Rising Hope
2019年4月1日	Leona’s YELL 2	全6曲らふぃおら（Life is all right!） mix juiceのいうとおりぼくも傘がない僕のこと Only Human みんな空の下
2019年4月1日	頑張れ頑張れ超頑張れ	全5曲頑張れ頑張れ超頑張れキズナイズムソラノハナ Sing A Ring はっぴーでいず! -Ballade Arrange-

発売日	商品名	曲	楽曲	備考
2021年12月8日	e-ma e-maプロジェクト『e-ma e-ma』+ 花鋏キョウ Ver.^[87]	月ノ美兎、ミライアカリ、電脳少女シロ、ときのそら、もこ田めめめ、星街すいせい、湊あくあ、花鋏キョウ、音霊魂子	「e-ma e-ma（全員合唱ver）」	UHA味覚糖「e-maのど飴」CMソング
2021年12月8日	e-ma e-maプロジェクト『e-ma e-ma』+ 花鋏キョウ Ver.^[87]	花鋏キョウ	「花鋏キョウソロVer.」	UHA味覚糖「e-maのど飴」CMソング
2022年6月29日	last cross - from CrosSing	獅子神レオナ	「last cross」	カバーソングプロジェクト『CrosSing - Music&Voice-』配信楽曲^[88]

Reactとは？ わかりやすく解説

React

概要

特徴

主な特徴

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

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

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

仮想DOM

ライフサイクルメソッド

JSX

HTML外のアーキテクチャ

歴史

誕生

React Native

React Fiber

ライセンス論争

将来の開発

サブプロジェクト

Facebook CLA

基本的な使い方

一般的なイディオム

Fluxアーキテクチャの使用

React Native

歴史

動作原理

Hello world

批判

脚注

注釈

出典

関連項目

外部リンク

Re:AcT

概要

略歴

所属タレント

現在の所属タレント

過去の所属者

卒業

移籍

契約解除

コラボレーション

出演

インターネット番組

イベント

ライブ

ディスコグラフィ

デジタル配信

音楽レーベル

ReAliz

kaleidscope

sinkirow

その他

参加作品

脚注

注釈

出典

外部リンク

急上昇のことば

「React」の関連用語

Reactとは？わかりやすく解説