リアクト

実用日本語表現辞典

react

別表記：リアクト

「react」とは、反応すること・互いに作用しあうこと・反発することを意味する英語表現である。

「react」とは・「react」の意味

「react」は、刺激や状況などに反応する、反応を示す、という意味の動詞である。また、作用や力に対して反作用する、互いに影響し合う、といった意味でも用いられる。そのほか、反対する、反抗する、といった意味で使われることもある。

「react」の名詞形は「reaction」である。反応、反作用、反動、反発、相互作用を意味する。形容詞形は「reactive」になる。よく反応する、反作用を示す、反発する、といった意味で用いられる。

「react」の発音・読み方

「react」の発音記号は「riǽkt」である。カタカナ読みだと「リアクト」になる。

「react」の語源・由来

「react」の語源は、ラテン語で再び、を意味する「re」と、動かす、を意味する「agere」だと考えられている。

「react」の活用変化一覧

「react」の活用変化一覧は以下の通りである。

・現在形「react（主語がhe/she/itの場合はreacts）」
・現在分詞「reacting」
・現在完了形「have reacted（主語がhe/she/itの場合はhas reacted）」
・過去形「reacted」
・過去完了形「had reacted」
・未来形「will react」

「react」の類語

「react」の類語としては、返答する、応じる、という意味の「respond」や、反応する、という意味の「feedback」、返答を意味する「answer」がある。そのほか、反論を意味する「counter」や、返信を意味する「reply」なども「react」の類語だといえる。

「react」の対義語

「react」の対義語は、無視を意味する「ignore」や「overlook」、「neglect」が挙げられる。また、文脈によっては、回避する、という意味の「avoid」や、控える、という意味の「abstain」、抑制を意味する「suppress」なども「react」の対義語になりうる。

「react」を含む英熟語・英語表現

「react」を含む英熟語・英語表現には、次のようなものがある。

「react to」とは

「react to」は、「to」の後に続くものやことに反応する、対応する、という意味である。

「react against」とは

「react against」は、「against」の後に続くものやことに反発することを意味する。

「react with」とは

「react with」は、「with」の後に続くものやことと反応する、共鳴する、といった意味で用いられる。

「react」に関連する用語の解説

「React（ライブラリ）」とは

「React（ライブラリ）」は、Facebookによって開発されたJavaScriptライブラリのひとつである。ユーザーインターフェイスを構築するために用いられる。Webアプリケーションやモバイルアプリケーション、VRアプリケーションといった様々なプラットフォームで使用されている。

「React（ライブラリ）」で作られたサイトとは

「React（ライブラリ）」で作られたサイトとは、Facebookが開発したJavaScriptライブラリである「React（ライブラリ）」を用いて作成されたサイトを指す。「React（ライブラリ）」を使用すると、コンポーネントと呼ばれる小さなパーツに分割されたUIを構築できる。このことにより、アプリケーションの機能やデザインの一部を簡単に変更することが可能となる。

「React-Game」とは

「React-Game」は、Facebookが開発したJavaScriptライブラリである「React（ライブラリ）」を用いて作成されたゲームのことである。「React-Game」にはブラウザ上でプレイできる単純なものから3Dゲームのような複雑なものまで、さまざまな種類が存在する。

「reactivate」とは

「Reactivate」は、再起動する、再活性化する、といった意味の言葉である。

「reaction time」とは

「reaction time」は、反応時間や反応速度を意味する。

「chemical reaction」とは

「chemical reaction」は、化学反応や化学変化のことである。

「overreaction」とは

「overreaction」は、過剰反応や過剰反応することを指す。

「reactive behavior」とは

「reactive behavior」は、反応的な行動や反応性のある行動のことである。

「react」の使い方・例文

「react」を用いた例文には、次のようなものがある。

「The company reacted quickly to the sudden market changes.」この文章を日本語に訳すと「急激な市場の変化に、その企業は素早く対応した」になる。

「Some people react strongly to pollen and suffer from hay fever.」この文章は日本語では「花粉に強く反応してしまい、花粉症に苦しむ人もいる」である。

「She was surprised by his outburst and didn't know how to react.」は、日本語に訳すと「彼の突然の激昂に彼女は驚き、どう対処すべきかわからなかった」になる。

（2023年3月9日更新）

リアクト

英語：react

一般的な英語としては「反応する」「反応を示す」あるいは「やり直す」「再演する」という意味で用いられる表現。

（2021年2月10日更新）

ウィキペディア

React

出典: フリー百科事典『ウィキペディア（Wikipedia）』 (2025/01/09 15:30 UTC 版)

React

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

React (リアクト)またはReact.js、ReactJS とは、ウェブブラウザで複雑なUIを容易に生成するためのフリーかつオープンソースなフロントエンドJavaScriptライブラリである。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との対話のための追加のライブラリが必要となる。

特徴

主な特徴

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

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

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

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

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

プロパティ (通常は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ライブラリによって実際に変更されたサブコンポーネントのみを描画することができる。

ライフサイクルメソッド

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

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

JSX

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

JSXのコードの例:

const App = () => {
  return (
    <div>
      <p>Header</p>
      <p>Content</p>
      <p>Footer</p>
    </div>
  );
};

入れ子の要素

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

属性

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

HTML外のアーキテクチャ

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

歴史

誕生

ReactはFacebookのソフトウェアエンジニアであるJordan Walkeによって開発された。PHP向けのHTMLコンポーネントフレームワークであるXHPの影響を受けている。2011年にFacebookのニュースフィード上で最初に使用され、2012年にはInstagramでも使用されるようになった。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を発表した。React FiberはReactフレームワークの将来の改良と機能開発の基盤となるものである。

ライセンス論争

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

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

コミュニティからのフィードバックに基づき、2015年4月にFacebookは特許許諾を曖昧な部分を減らし、より寛容なものになるように変更した。 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系にもバックポートされた。

将来の開発

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

サブプロジェクト

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

Facebook CLA

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

基本的な使い方

以下は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に伝播することが特徴である。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は、本来WebアプリのUI開発のためのフレームワークであるReactを、PCやスマホ向けのネイティブアプリの開発にも使えるようにしたもので、Facebookによって2015年2月に発表された。Android、iOS、Windows（UWP）に対応している。

歴史

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

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

数ヶ月の開発の後、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:

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と同期される」ことによるものである。同様に、React バージョン16以降に含まれている仮想DOMの抽象化は、ウェブブラウザに組み込まれているコンポーネントモデルでは上手く動作せず、従って、ウェブブラウザの標準に依存したそれらのコンポーネントを実装する代替ライブラリでは上手く機能しない。

関連項目

• AngularJS
• Angular
• Gatsby
• Next.js
• Svelte
• Vue.js

外部リンク

• 公式ウェブサイト
• react - GitHub

ウィキペディア小見出し辞書

リアクト

出典: フリー百科事典『ウィキペディア（Wikipedia）』 (2016/01/18 16:28 UTC 版)

「ファイナルファンタジーXIの戦闘システム」の記事における「リアクト」の解説

盾による防御の発動率がアップし、防御によって減った分のダメージの一部を攻撃してきた相手に与える（このカウンター効果は光属性の為、攻撃してきた相手の光属性耐性によってダメージ量が変化する）状態変化。