React (JavaScript ライブラリ)

反応する

原作者	ジョーダン・ウォーク
開発者	メタとコミュニティ
初回リリース	2013年5月29日; 11年前[1] ( 2013-05-29 )
安定リリース
18.3.1 [2]  / 2024年4月26日; 5か月前 （2024年4月26日）
プレビューリリース
19.0-ベータ版 / 2024年4月25日; 5か月前[3] ( 2024-04-25 )
リポジトリ	github.com/facebook/react
書かれた	JavaScript
プラットフォーム	ウェブプラットフォーム
タイプ	JavaScript ライブラリ
ライセンス	MITライセンス
Webサイト	反応開発

React （ React.jsまたはReactJSとも呼ばれる）は、 Facebook Inc.によるコンポーネントに基づいたユーザーインターフェースを構築するための、無料のオープンソースの フロントエンド JavaScriptライブラリ^{[4] [5]}です。Meta （旧Facebook）と個人の開発者や企業のコミュニティによって管理されています。[ 6 ^{] [7] [8]}

Reactは、 Next.jsなどのフレームワークを使用して、シングルページ、モバイル、またはサーバーレンダリングアプリケーションの開発に使用できます。ReactはユーザーインターフェイスとDOMへのコンポーネントのレンダリングのみに関係するため、Reactアプリケーションはルーティングやその他のクライアント側機能のためにライブラリに依存することがよくあります。 ^{[9] [10]} Reactの主な利点は、変更されたページの部分のみを再レンダリングし、変更されていないDOM要素の不要な再レンダリングを回避することです。2013年5月29日に初めてリリースされました。

Reactは宣言型プログラミング パラダイムに準拠しています。^{[11] : 76}開発者はアプリケーションの各状態に対してビューを設計し、Reactはデータが変更されるとコンポーネントを更新してレンダリングします。これは命令型プログラミングとは対照的です。^[12]

Reactコードはコンポーネントと呼ばれるエンティティで構成されています。^{[11] : 10–12}これらのコンポーネントはモジュール化されており、再利用できます。^{[11] : 70} Reactアプリケーションは通常、多くのレイヤーのコンポーネントで構成されています。コンポーネントは、React DOMライブラリを使用してDOMのルート要素にレンダリングされます。コンポーネントをレンダリングする際、値はprops（「プロパティ」の略）を介してコンポーネント間で渡されます。コンポーネントの内部の値は状態と呼ばれます。^[13]

Reactでコンポーネントを宣言する主な方法は、関数コンポーネントとクラスコンポーネントの2つです。^{[11] : 118  [14] : 10}

関数コンポーネントは、単一の「props」引数を受け入れて JSX を返す関数 (JavaScript 関数構文または矢印関数式を使用) で宣言されます。React v16.8 以降では、関数コンポーネントはuseStateフックで状態を使用できます。

2019年2月16日、React 16.8が一般公開され、React Hooksが導入されました。^[15]フックは、開発者が関数コンポーネントからReactの状態とライフサイクル機能に「フック」できるようにする関数です。^[16]注目すべきは、フックはクラス内では機能しないということです。フックにより、開発者はクラスなしでReactのより多くの機能を利用できるようになります。^[17]

ReactはuseState、^{[18] [14] : 37} useContext、^{[11] : 11  [19] [14] : 12} useReducer、^{[11] : 92  [19] [14] : 65–66} useMemo ^{[11] : 154  [19] [14] : 162}、などの組み込みフックをいくつか提供していますuseEffect。^{[20] [14] : 93–95}その他はフックAPIリファレンスに記載されています。^{[21] [11] : 62} 最も一般的に使用されるとは、useStateそれぞれ状態^{[11] : 37}と副作用^{[11] : 61}を制御するために使用されます。 useEffect

^{フックには2つのルール[22]}があり、フックが依存する特徴的なコードパターンを説明しています。

1. 「フックは最上位レベルでのみ呼び出します」— フックがレンダリングごとに同じ順序で呼び出されるように、ループ、条件、またはネストされたステートメント内からフックを呼び出さないでください。
2. 「React 関数からのみフックを呼び出す」 — ステートフル ロジックがコンポーネントに残るように、プレーンな JavaScript 関数からフックを呼び出さないでください。

これらのルールは実行時に強制することはできませんが、リンターなどのコード分析ツールを設定して開発中に多くの間違いを検出することができます。これらのルールはフックの使用とカスタムフックの実装の両方に適用され、^[23]他のフックを呼び出す可能性があります。

Reactサーバーコンポーネント（RSC）^[24]は、サーバー上でのみ実行される関数コンポーネントです。この概念は、「サーバーコンポーネントによるデータフェッチ」^[25]の講演で初めて紹介されました。サーバーサイドレンダリングに似た概念ですが、RSCはハイドレーションが発生しないため、対応するJavaScriptをクライアントに送信しません。その結果、フックにアクセスできません。ただし、非同期関数であるため、非同期操作を直接実行できます。

非同期関数MyComponent () {   
  constメッセージ= fetchMessageFromDb ()を待機します。    

  戻る（ 
    < div >メッセージ: { message }</ div > 
  );
}

現在、サーバー コンポーネントはNext.jsで最も簡単に使用できます。

クラス コンポーネントは、 ES6クラスを使用して宣言されます。関数コンポーネントと同じように動作しますが、状態とライフサイクル イベントを管理するためにフックを使用する代わりに、React.Component 基本クラスのライフサイクル メソッドを使用します。

ParentComponentクラスはReact . Componentを拡張します。    
  状態= {色: '緑' };     
  与える（）{ 
    戻る（ 
      < ChildComponent の色= { this . state . color } />  
    );
  }
}

2019 年 2 月に React 16.8 で React Hooks が導入されたことで、開発者は関数コンポーネント内の状態とライフサイクルの動作を管理できるようになり、クラス コンポーネントへの依存が軽減されました。

この傾向は、関数型プログラミングとモジュール設計に向かう業界全体の動きと一致しています。Reactが進化し続けるにつれて、開発者は新しいアプリケーションを構築したり、既存のアプリケーションをリファクタリングしたりする際に、関数型コンポーネントとReact Hooksの利点を考慮することが不可欠になります。^[26]

React自体にはルーティングのサポートが組み込まれていません。Reactは主にユーザーインターフェースを構築するためのライブラリであり、すぐに使える本格的なルーティングソリューションは含まれていません。サードパーティのライブラリを使用して、Reactアプリケーションでルーティングを処理できます。^[27]これにより、開発者はルートを定義し、ナビゲーションを管理し、Reactに適した方法でURLの変更を処理できます。

もう一つの注目すべき機能は、仮想ドキュメントオブジェクトモデル（仮想DOM）の使用です。Reactはメモリ内にデータ構造のキャッシュを作成し、結果の差異を計算し、ブラウザに表示されるDOMを効率的に更新します。^{[28]このプロセスは}調整と呼ばれます。これにより、プログラマーは変更ごとにページ全体がレンダリングされるかのようにコードを記述できますが、Reactは実際に変更されたコンポーネントのみをレンダリングします。この選択的なレンダリングにより、パフォーマンスが大幅に向上します。^[29]

ReactDOM.render^[30]が同じコンポーネントとターゲットに対して再度呼び出されると、Reactは仮想DOMに新しいUI状態を表し、リビングDOMのどの部分（もしあれば）を変更する必要があるかを判断します。^[31]

クラスベースのコンポーネントのライフサイクル メソッドは、コンポーネントの有効期間中に設定されたポイントでコードを実行できるようにする フック形式を使用します。

• ShouldComponentUpdateレンダリングが不要な場合に false を返すことで、開発者はコンポーネントの不要な再レンダリングを防ぐことができます。
• componentDidMountコンポーネントが「マウント」されると（コンポーネントはユーザー インターフェイスで作成され、多くの場合、DOMノードに関連付けることで）、呼び出されます。これは通常、 APIを介してリモート ソースからデータの読み込みをトリガーするために使用されます。
• componentDidUpdate更新が発生した直後に呼び出されます。^[32]
• componentWillUnmountコンポーネントが破棄されるか「アンマウント」される直前に呼び出されます。これは通常、コンポーネントのアンマウントでは簡単には削除されない、コンポーネントへのリソースを要求する依存関係をクリアするために使用されます (たとえば、setInterval()コンポーネントに関連するインスタンスを削除する、またはコンポーネントの存在のために「ドキュメント」に設定された「 eventListener 」を削除するなど)。
• renderは最も重要なライフサイクル メソッドであり、どのコンポーネントでも唯一必要なメソッドです。通常、コンポーネントの状態が更新されるたびに呼び出され、ユーザー インターフェイスに反映されます。

JSX、または JavaScript XML は、JavaScript 言語構文の拡張です。^[33]見た目は HTML に似ていますが、^{[11] : 11  JSX}は多くの開発者に馴染みのある構文を使用してコンポーネントのレンダリングを構造化する方法を提供します。React コンポーネントは通常 JSX を使用して記述されますが、必ずしもそうである必要はありません (コンポーネントは純粋な JavaScript で記述することもできます)。JSX は、Facebook がPHP用に作成したXHPと呼ばれる別の拡張構文に似ています。

JSX コードの例:

クラスApp はReact . Componentを拡張します{ render () { return ( < div > < p >ヘッダー</ p > < p >コンテンツ</ p > < p >フッター</ p > </ div > ); } }    
   
     
      
        
        
        
      
    
  

Reactの基本的なアーキテクチャは、ブラウザでのHTMLのレンダリングを超えて適用されます。たとえば、Facebookには<canvas>タグにレンダリングされる動的なチャートがあり、^[34] NetflixとPayPalはユニバーサルロードを使用して、サーバーとクライアントの両方で同一のHTMLをレンダリングします。^{[35] [36]}

サーバー側レンダリング(SSR) とは、クライアント側の JavaScript アプリケーションをブラウザーではなくサーバー上でレンダリングするプロセスを指します。これにより、特に低速の接続やデバイスを使用しているユーザーにとって、アプリケーションのパフォーマンスが向上します。

SSR では、クライアントに送信される最初の HTML に、アプリケーションの完全にレンダリングされた UI が含まれます。これにより、UI をレンダリングする前に JavaScript がダウンロードされて実行されるのを待つ必要がなくなり、クライアントのブラウザーで UI をすぐに表示できるようになります。

React は SSR をサポートしており、開発者はサーバー上で React コンポーネントをレンダリングし、結果の HTML をクライアントに送信できます。これは、アプリケーションのパフォーマンスを向上させるだけでなく、検索エンジンの最適化にも役立ちます。

Reactは完全なアプリケーションライブラリを提供しようとはしていません。ユーザーインターフェイスの構築に特化して設計されているため^[4]、一部の開発者がアプリケーションの構築に必要と考えるツールの多くは含まれていません。これにより、ネットワークアクセスやローカルデータストレージなどのタスクを実行するために、開発者が好むライブラリを選択できます。ライブラリが成熟するにつれて、一般的な使用パターンが生まれました。

React の単方向データフローの概念（ AngularJSの双方向フローと対照的かもしれない）をサポートするために、一般的なモデル・ビュー・コントローラアーキテクチャの代替として Flux アーキテクチャが開発されました。Flux の特徴は、中央ディスパッチャを介してストアに送信されるアクションと、ストアへの変更がビューに反映されることです。^{[37] React で使用する場合、この反映はコンポーネント プロパティを通じて行われます。Flux は、その構想以来、} Reduxや MobXなどのライブラリに取って代わられてきました。 ^[38]

フラックスは観察者パターンの変形と考えることができる。^[39]

FluxアーキテクチャのReactコンポーネントは、渡されたプロパティを直接変更するのではなく、ディスパッチャによってストアを変更するために送信されるアクションを作成するコールバック関数を渡す必要があります。アクションは、何が起こったかを説明するオブジェクトです。たとえば、あるユーザーが別のユーザーを「フォロー」することを説明するアクションには、ユーザーID、ターゲットユーザーID、およびタイプが含まれます。^[40]モデルと考えることができるストアは、ディスパッチャから受信したアクションに応じて自分自身を変更できます。 USER_FOLLOWED_ANOTHER_USER

このパターンは、「プロパティは下に流れ、アクションは上に流れる」と表現されることがあります。Fluxの実装は誕生以来数多く作成されてきましたが、最もよく知られているのは、単一のストア（単一の真実の源とも呼ばれる）を特徴とするReduxでしょう。^[41]

2019年2月、 16.8リリースでReactフックuseReducerとして導入されました。Reduxと一貫性のあるAPIを提供し、開発者がコンポーネントの状態にローカルなReduxのようなストアを作成できるようにします。^[42]

プロジェクトのステータスは、コアチームのディスカッションフォーラムで追跡できます。^[43]ただし、Reactへの大きな変更は、Future of Reactリポジトリの問題とプルリクエストを経由します。^{[44] [45]}これにより、Reactコミュニティは、新しい潜在的な機能、実験的なAPI、JavaScript構文の改善に関するフィードバックを提供できます。

ReactはMetaのソフトウェアエンジニアであるJordan Walkeによって開発されました。彼は当初「F-Bolt」 ^[46]と呼ばれるプロトタイプを開発し、後に「FaxJS」に名前を変更しました。この初期バージョンはJordan WalkeのGitHubリポジトリに文書化されています。^[1]このプロジェクトに影響を与えたものには、PHPのHTMLコンポーネントライブラリであるXHPが含まれています。

Reactは2011年に初めてFacebookのニュースフィードに導入され、その後2012年にInstagramに統合されました^[要出典]。2013年5月、JSConf USでプロジェクトは正式にオープンソース化され、採用と成長の大きな転換点となりました。^[2]

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

2017年4月18日、FacebookはReactの古いレンダリングアルゴリズムであるStackに代わる、レンダリング用の新しい内部アルゴリズムセットであるReact Fiberを発表しました。^[47] React Fiberは、Reactライブラリの将来の改善と機能開発の基盤となるはずでした。^{[48] [更新が必要]} Reactを使用したプログラミングの実際の構文は変更されていません。構文の実行方法のみが変更されました。^[49] Reactの古いレンダリングシステムであるStackは、動的な変更に対するシステムの焦点が理解されていなかった時代に開発されました。たとえば、Stackは複雑なアニメーションの描画に時間がかかり、すべてを1つのチャンクで実現しようとしました。Fiberはアニメーションを複数のフレームに分散できるセグメントに分割します。同様に、ページの構造は、個別に維持および更新できるセグメントに分割できます。JavaScript関数と仮想DOMオブジェクトは「ファイバー」と呼ばれ、それぞれを個別に操作および更新できるため、画面上のレンダリングがよりスムーズになります。^[50]

2017年9月26日にReact 16.0が一般公開されました。^[51]

2020年8月10日、ReactチームはReact v17.0の最初のリリース候補を発表しました。これは、React開発者向けAPIに大きな変更がない最初のメジャーリリースとして注目されました。^[52]

2022年3月29日にはReact 18がリリースされ、新しい並行レンダラー、自動バッチ処理、Suspenseによるサーバー側レンダリングのサポートが導入されました。^[53]

2013年5月にReactが初めて公開されたときには、Apache License 2.0が使用されていました。2014年10月、React 0.12.00ではこれを3条項BSDライセンスに置き換え、ソフトウェアに関連するFacebookの特許の使用を許可する別のPATENTSテキストファイルが追加されました。^[54]

本契約に基づいて付与されるライセンスは、(a) 特許の直接的、間接的、または幇助的な侵害または侵害の誘引を主張する請求（訴訟、主張、その他の措置の提起を含む）を行った者に対して、自動的に通知なく終了します。その主張とは、(i) Facebook またはその子会社や関連会社によるもの（当該請求が本ソフトウェアに関連するか否かを問わない）、(ii) 当該請求が Facebook またはその子会社や関連会社のソフトウェア、製品、サービスに起因して全部または一部生じた場合の当事者によるもの（当該請求が本ソフトウェアに関連するか否かを問わない）、(iii) 本ソフトウェアに関連する当事者によるもの、または (b) Facebook の特許請求における権利が無効または執行不可能であるものです。

この型破りな条項は、Reactユーザーコミュニティで論争と議論を引き起こした。なぜなら、この条項は、Facebookがライセンシーを訴え、ブログなどでその行動を公開することで「その他の行動」を取らせるなど、多くのシナリオでFacebookにライセンスを取り消す権限を与えると解釈される可能性があるからだ。多くの人が、Facebookが解約条項を不当に利用する可能性がある、またはReactを製品に統合することでスタートアップ企業の将来の買収が複雑になる可能性があると懸念を表明した。^[55]

Facebookはコミュニティからのフィードバックに基づいて、2015年4月に特許付与をより曖昧さが少なく、より寛容なものに更新しました。^[56]

本契約に基づいて付与されたライセンスは、お客様（またはお客様の子会社、関連会社、代理人）が、（i）Facebookまたはその子会社または関連会社に対して、（ii）Facebookまたはその子会社または関連会社のソフトウェア、技術、製品、またはサービスに起因して特許権を主張する当事者に対して、または（iii）本ソフトウェアに関連する当事者に対して、直接的または間接的に特許権を主張する、または直接的な金銭的利益を得る場合、自動的に予告なく終了します。[...] 「特許権を主張する」とは、交差請求または反訴を含む、特許権の直接的、間接的、または共犯的侵害または侵害の誘因を主張する訴訟またはその他の行為を指します。^[57]

Apacheソフトウェア財団は、このライセンス契約は「ライセンシーではなくライセンサーに不利な形でソフトウェアの下流の消費者にリスクを転嫁し、普遍的な寄付者であるというApacheの法的ポリシーに違反する」ため、そのライセンスポリシーと矛盾するとみなし、「[Apache License 2.0]に含まれるライセンスのサブセットではなく、[Apache License 2.0]としてサブライセンスすることはできない」とした。^[58] 2017年8月、FacebookはApache財団の下流の懸念を却下し、ライセンスの再検討を拒否した。^{[59] [60]}翌月、WordPressはGutenbergとCalypsoプロジェクトをReactから切り替えることを決定した。^[61]

2017年9月23日、Facebookは翌週にFlow、Jest、React、Immutable.jsを標準MITライセンスの下で再ライセンスすると発表した。同社はReactが「ウェブ向けオープンソースソフトウェアの幅広いエコシステムの基盤」であり、「非技術的な理由で前進を遅らせたくない」と述べた。^[62]

2017年9月26日、React 16.0.0がMITライセンスでリリースされました。^[63] MITライセンスの変更は、React 15.6.2とともに15.xリリースラインにもバックポートされています。^[64]

• Angular (ウェブフレームワーク)
• バックボーン
• エンバー
• Gatsby (JavaScript フレームワーク)
• 次
• タイプスクリプト
• スヴェルト
• js の
• JavaScript ベースの Web フレームワークの比較
• Webコンポーネント

• 公式サイト
• ギットハブ