Loading article…
React（React.jsまたはReactJSとも呼ばれる）は、コンポーネントに基づいてユーザーインターフェイスをより「シームレス」に構築することを目指す、無料のオープンソースのフロントエンドJavaScriptライブラリです[ 6 ] [ 7 ] 。 [ 6 ]これはMeta（旧Facebook）と、個人開発者や企業のコミュニティによって維持されています[ 8 ] [ 9 ] [ 10 ]。 2025年のStack Overflow開発者調査によると、Reactは最も一般的に使用されているWebテクノロジーの1つです[ 11 ] 。
React は、 Next.jsやReact Routerなどのフレームワークを使用して、シングルページ、モバイル、またはサーバーレンダリングのアプリケーションを開発するために使用できます。React はユーザー インターフェイスとDOMへのコンポーネントのレンダリングのみに関心があるため、React アプリケーションはルーティングやその他のクライアントサイド機能のためにライブラリに依存することがよくあります。 [ 12 ] [ 13 ] React の重要な利点は、変更されたページの一部のみを再レンダリングし、変更されていない DOM 要素の不要な再レンダリングを回避することです。React は、すべての Web サイトの 6% で使用されていると推定されています。[ 14 ]
React は宣言型プログラミングパラダイムに準拠しています。[ 15 ] [ 16 ] : 76開発者はアプリケーションの各状態に対応するビューを設計し、React はデータが変更されるとコンポーネントを更新してレンダリングします。これは命令型プログラミングとは対照的です。[ 17 ]
React コードは、コンポーネントと呼ばれるエンティティで構成されています。[ 16 ] : 10–12これらのコンポーネントはモジュール化されており、再利用できます。[ 16 ] : 70 React アプリケーションは通常、多くのコンポーネントのレイヤーで構成されています。コンポーネントは、React DOM ライブラリを使用してDOMのルート要素にレンダリングされます。コンポーネントをレンダリングすると、値はprops (「プロパティ」の略)を介してコンポーネント間で渡されます。コンポーネント内部の値は、その状態と呼ばれます。[ 18 ]
React でコンポーネントを宣言する主な方法は、関数コンポーネントとクラスコンポーネントの 2 つです。[ 16 ] : 118 [ 19 ] : 10 React v16.8 以降では、関数コンポーネントの使用が推奨されています。
React Conf 2018で発表され、React v16.8以降で利用可能な関数コンポーネントは、単一の「props」引数を受け取り、JSX（JavaScript XML）を返す関数で宣言されます。関数コンポーネントは、useStateHookを使用して内部状態を使用できます。 [ 20 ]
2019年2月16日、React 16.8が一般公開され、React Hooksが導入されました。[ 20 ] Hooksは、開発者が関数コンポーネントからReactの状態とライフサイクル機能に「フック」できるようにする関数です。[ 21 ]特に、Hooksはクラス内では機能しません。Hooksを使用すると、開発者はクラスを使用せずにReactのより多くの機能を利用できます。[ 22 ]
React にはuseState、 、[ 23 ] [ 19 ] : 37useContext、[ 16 ] : 11 、[ 23 ] [ 19 ] : 12 、 [ 16 ] : 92useReducer、[ 23 ] [ 19 ] : 65–66 、 [ 16 ] : 154 、[ 23 ] [ 19 ] : 162 、など、いくつかの組み込みフックが用意されています。[ 24 ] [ 19 ] : 93–95その他については、 Hooks API リファレンスに記載されています。[ 25 ] [ 16 ] : 62と は、最も一般的に使用されるフックで、それぞれ状態[ 16 ] : 37と副作用[ 16 ] : 61 を制御するために使用されます。useMemouseEffectuseStateuseEffect
フックには、フックが依拠する特徴的なコードパターンを説明する2つのルール[ 26 ]があります。
これらのルールは実行時に強制することはできませんが、リンターなどのコード分析ツールは、開発中に多くの間違いを検出するように構成できます。これらのルールは、フックの使用と、他のフックを呼び出す可能性のあるカスタムフックの実装の両方に適用されます。[ 27 ]
React Server Components ( RSC ) [ 28 ]は、サーバー上でのみ実行される関数コンポーネントです。この概念は、「Data Fetching with Server Components」という講演で初めて紹介されました。[ 29 ] 現在、サーバーコンポーネントはNext.jsで最も簡単に使用できます。Next.js を使用すると、サーバーとクライアント (ブラウザ) の両方のコンポーネントを作成できます。サーバーでレンダリングされたコンポーネントがブラウザに受信されると、ブラウザの React が引き継ぎ、仮想 DOM を作成し、イベント ハンドラをアタッチします。これはハイドレーションと呼ばれます。[ 30 ]
サーバーサイドレンダリングと似た概念ではありますが、RSCはハイドレーションが行われないため、対応するJavaScriptをクライアントに送信しません。そのため、フックにアクセスできません。ただし、非同期関数である場合があり、非同期操作を直接実行できます。
async function MyComponent () {const message = await fetchMessageFromDb ();戻る（<div>メッセージ: { message } </div>);}クラスコンポーネントはES6クラスを使用して宣言されます。関数コンポーネントと同じように動作しますが、状態やライフサイクルイベントの管理にHooksを使用する代わりに、React.Component基底クラスのライフサイクルメソッドを使用します。
class ParentComponent extends React.Component {状態= { color : 'green' };与える（）{戻る（< ChildComponent color = { this.state.color } / >);}}React自体にはルーティングのサポートは組み込まれていません。Reactは主にユーザーインターフェースを構築するためのライブラリであり、完全なルーティングソリューションは標準では含まれていません。React Routerなどのサードパーティライブラリを使用して、Reactアプリケーションでルーティングを処理することができます。[ 31 ]これにより、開発者はルートを定義し、ナビゲーションを管理し、URLの変更をReactに適した方法で処理できます。
もう 1 つの注目すべき機能は、仮想ドキュメント オブジェクト モデル( DOM)の使用です。React は、ブラウザの DOM に似たメモリ内のデータ構造を作成します。コンポーネントがレンダリングされるたびに、結果が仮想 DOM と比較されます。そして、計算された差分のみを使用して、ブラウザに表示される DOM を効率的に更新します。[ 32 ]このプロセスは調整と呼ばれます。これにより、プログラマは変更のたびにページ全体がレンダリングされるかのようにコードを記述できますが、React は実際に変更されたコンポーネントのみをレンダリングします。この選択的レンダリングにより、パフォーマンスが大幅に向上します。[ 33 ] [ 34 ]
ReactDOM.render[ 35 ]が同じコンポーネントとターゲットに対して再度呼び出されると、React は仮想 DOM に新しい UI 状態を表し、ライブ DOM のどの部分 (もしあれば) を変更する必要があるかを決定します。[ 36 ]
クラスベースコンポーネントのライフサイクルメソッドは、コンポーネントのライフサイクル中の特定の時点でコードを実行できるようにするフックの一種を使用します。
ShouldComponentUpdateレンダリングが不要な場合に false を返すことで、開発者はコンポーネントの不要な再レンダリングを防ぐことができます。componentDidMountコンポーネントが「マウント」されると（コンポーネントがユーザーインターフェイスで作成され、多くの場合DOMノードに関連付けられると）、この関数が呼び出されます。これは、 APIを介してリモートソースからのデータ読み込みをトリガーするためによく使用されます。componentDidUpdate更新が発生した直後に呼び出されます。[ 37 ]componentWillUnmountコンポーネントが破棄または「アンマウント」される直前に呼び出されます。これは、コンポーネントのアンマウントによって単純に削除されない、コンポーネントへのリソースを大量に消費する依存関係をクリアするためによく使用されます（たとえば、setInterval()コンポーネントに関連するインスタンスや、コンポーネントの存在によって「ドキュメント」に設定された「 eventListener 」などを削除します）。renderは最も重要なライフサイクルメソッドであり、どのコンポーネントにおいても必須のメソッドです。通常、コンポーネントの状態が更新されるたびに呼び出され、その状態はユーザーインターフェースに反映されます。JSX、つまりJavaScript XMLは、JavaScript言語構文の拡張です。[ 38 ] HTMLに似た外観ですが、[ 16 ] : 11 JSXは多くの開発者にとって馴染みのある構文を使用してコンポーネントのレンダリングを構造化する方法を提供します。 [ 16 ] : 15 Reactコンポーネントは通常JSXを使用して記述されますが、必ずしもそうである必要はありません（コンポーネントは純粋なJavaScriptで記述することもできます）。コンパイル時に、JSXはJavaScriptコードに変換されます。JSXは、FacebookがPHP用に作成したXHPと呼ばれる別の拡張構文に似ています。
JSXコードの例：
function Example () { // 新しい状態変数を宣言します。これを「count」と呼びます。const [ count , setCount ] = useState ( 0 );return ( < div > < p > { count }回クリックしました< / p > < button onClick = {() => setCount ( count + 1 )}>クリックしてください</ button > </ div > ); }React の基本的なアーキテクチャは、ブラウザでの HTML のレンダリング以外にも適用されます。たとえば、Facebook は<canvas>タグにレンダリングされる動的なチャートを使用しており、[ 39 ] Netflix とPayPal はユニバーサル ローディングを使用してサーバーとクライアントの両方で同じ HTML をレンダリングしています。[ 40 ] [ 41 ] React は、 React Native を使用して Android および iOS 用のネイティブ アプリを開発するためにも使用できます。
サーバーサイドレンダリング（SSR）とは、クライアント側のJavaScriptアプリケーションをブラウザではなくサーバー上でレンダリングするプロセスを指します。[ 42 ]これにより、特に接続速度が遅いユーザーやデバイスを使用しているユーザーにとって、アプリケーションのパフォーマンスが向上します。[ 43 ]
SSRでは、クライアントに送信される最初のHTMLには、アプリケーションの完全にレンダリングされたUIが含まれます。[ 44 ]これにより、クライアントのブラウザはUIをレンダリングする前にJavaScriptのダウンロードと実行を待つ必要がなく、すぐにUIを表示できます。[ 44 ]
ReactはSSRをサポートしており、開発者はサーバー上でReactコンポーネントをレンダリングし、結果として得られたHTMLをクライアントに送信できます。[ 45 ]これは、アプリケーションのパフォーマンス向上や検索エンジン最適化に役立ちます。[ 46 ]
React は完全なアプリケーションライブラリを提供しようとはしていません。ユーザーインターフェースの構築に特化して設計されているため[ 6 ]、開発者がアプリケーションの構築に必要と考えるツールの多くは含まれていません。これにより、ネットワークアクセスやローカルデータストレージの実行などのタスクを実行するために、開発者が好むライブラリを選択できます。ライブラリが成熟するにつれて、一般的な使用パターンが出現しました。
React の単方向データフローの概念 ( AngularJSの双方向フローとは対照的) をサポートするために、 Fluxアーキテクチャは、一般的なモデル・ビュー・コントローラーアーキテクチャの代替として開発されました。Flux では、アクションは中央ディスパッチャーを介してストアに送信され、ストアへの変更はビューに伝播されます。[ 47 ] React で使用する場合、この伝播はコンポーネントのプロパティを通じて行われます。Flux は、その構想以来、 Reduxや MobXなどのライブラリに取って代わられています。[ 48 ]
フラックスはオブザーバーパターンの一種と考えることができる。[ 49 ]
Flux アーキテクチャの React コンポーネントは、渡された props を直接変更してはならず、ディスパッチャによってストアを変更するアクションを作成するコールバック関数を受け取る必要があります。アクションは、何が起こったかを記述するオブジェクトです。たとえば、あるユーザーが別のユーザーを「フォロー」していることを記述するアクションには、ユーザー ID、ターゲットユーザー ID、およびタイプが含まれる場合があります。[ 50 ]モデルと考えることができるストアは、ディスパッチャから受信したアクションに応じて自身を変更できます。USER_FOLLOWED_ANOTHER_USER
このパターンは、「プロパティは下へ流れ、アクションは上へ流れる」と表現されることもあります。Flux の実装は、その誕生以来数多く作成されてきましたが、おそらく最も有名なのはReduxでしょう。Redux は、単一のストア、しばしば「唯一の真実の源」と呼ばれるものを特徴としています。[ 51 ]
2019年2月、ReactフックuseReducerとして16.8リリースで導入されました。Reduxと一貫性のあるAPIを提供し、開発者がコンポーネントの状態にローカルなReduxのようなストアを作成できるようにします。[ 52 ]
Reactは、Facebook, Inc.（現Meta ）のソフトウェアエンジニアであるJordan Walkeによって作成されました。彼は当初「F-Bolt」 [ 53 ]と呼ばれるプロトタイプを開発し、後に「FaxJS」と改名しました。この初期バージョンは、Jordan WalkeのGitHubリポジトリに文書化されています。このプロジェクトに影響を与えたものには、PHP用のHTMLコンポーネントライブラリであるXHPが含まれる。
Reactは2011年にFacebookのニュースフィードに初めて導入され、その後2012年にInstagramに統合されました。 [ 54 ] 2013年5月、JSConf USでプロジェクトが正式にオープンソース化され、採用と成長における重要な転換点となりました。
React Nativeは、 Reactを使用してAndroid、iOS、UWPのネイティブ開発を可能にするもので、2015年2月にFacebookのReact Confで発表され、2015年3月にオープンソース化された。
2017年4月18日、Facebookは、Reactの従来のレンダリングアルゴリズムであるStackに代わる、レンダリングのための新しい内部アルゴリズムセットであるReact Fiberを発表しました。[ 55 ] React Fiberは、Reactライブラリの今後のあらゆる改善と機能開発の基盤となる予定でした。[ 56 ]React でプログラミングするための実際の構文は変わりません。構文の実行方法だけが変わりました。[ 57 ] React の古いレンダリング システムである Stack は、システムの焦点が動的な変化にあることが理解されていなかった時代に開発されました。たとえば、Stack は複雑なアニメーションを描画するのに時間がかかり、すべてを一度に実行しようとしていました。Fiber はアニメーションを複数のフレームに分散できるセグメントに分割します。同様に、ページの構造も個別に維持および更新できるセグメントに分割できます。JavaScript 関数と仮想DOMオブジェクトは「ファイバー」と呼ばれ、それぞれを個別に操作および更新できるため、画面上のレンダリングがよりスムーズになります。[ 58 ]
2017年9月26日、React 16.0が一般公開されました。[ 59 ] React 16.0では、子ツリー内のどこでもJavaScriptエラーをキャッチし、アプリをクラッシュさせる代わりにフォールバックUIをレンダリングする新しいコンポーネントタイプであるエラー境界が導入されました。[ 60 ]
2020年10月20日、ReactチームはReact v17.0をリリースした。これは、React開発者向けAPIに大きな変更がない最初のメジャーリリースとして注目に値する。[ 61 ]
2022年3月29日、React 18がリリースされ、新しい同時レンダリング、自動バッチ処理、Suspenseによるサーバーサイドレンダリングのサポートが導入されました。[ 62 ] React 18ではInternet Explorer 11のサポートが終了しました。[ 63 ]
2024年12月5日、React 19がリリースされました。このリリースでは、アクションが導入され、保留状態、エラー、楽観的更新を手動で処理する代わりに、非同期関数を使用して状態を更新するプロセスを簡素化しました。React 19には、サーバーコンポーネントのサポートと静的サイト生成の改善も含まれています。[ 64 ]
2025年10月、MetaはReact、React Native、およびJSX（JavaScript XML ）をLinux Foundationの一部である新しいReact Foundationに寄贈すると発表した。[ 65 ] 2026年2月24日、React FoundationはMeta Platforms, Inc.がReactプロジェクトをFoundationに寄贈して正式に発足した。[ 66 ]
2025年11月29日、リモートコード実行を可能にする脆弱性CVE-2025-55182（React2Shellとしても知られる）が報告された。CVSSスコアは最高10.0であった。 [ 67 ] [ 68 ]バージョン19.0.1、19.1.2、および19.2.1で修正が導入された。[ 69 ]
2025 年 12 月 11 日、React チームは React Server Components の追加の脆弱性を公表しました。サービス拒否の問題 (CVE-2025-55184 および CVE-2025-67779、CVSS 7.5) とソースコード漏洩の問題 (CVE-2025-55183、CVSS 5.3) です。[ 70 ] [ 71 ] [ 72 ] [ 73 ] [ 74 ]修正はバージョン 19.0.3、19.1.4、および 19.2.3 にバックポートされました。[ 75 ]
2013 年 5 月に最初に公開された React はApache License 2.0を使用していました。2014 年 10 月、React 0.12.00 では、これを3 条項 BSD ライセンスに置き換え、ソフトウェアに関連する Facebook の特許の使用を許可する別の PATENTS テキスト ファイルを追加しました。[ 77 ]
本契約に基づき付与されるライセンスは、以下のいずれかを主張する者（訴訟、主張、その他の行為の提起を含む）に対して、自動的に通知なく終了します。(a) 特許の直接的、間接的、または寄与的な侵害または侵害の誘引を主張する者：(i) Facebookまたはその子会社もしくは関連会社によるもの（当該主張がソフトウェアに関連しているか否かを問わない）、(ii) 当該主張がFacebookまたはその子会社もしくは関連会社のソフトウェア、製品、もしくはサービスに全部または一部起因する場合（当該主張がソフトウェアに関連しているか否かを問わない）、または(iii) ソフトウェアに関連する当事者によるもの。(b) Facebookの特許請求における権利が無効または執行不能であると主張する者。
この異例の条項は、Reactユーザーコミュニティで論争と議論を引き起こした。なぜなら、Facebookが多くのシナリオでライセンスを取り消す権限を与えていると解釈される可能性があるからである。例えば、Facebookがライセンシーを訴え、ブログなどでその行動を公表することで「その他の行動」を取るよう促した場合などである。多くの人が、Facebookが終了条項を不当に悪用する可能性があること、あるいはReactを製品に統合すると、スタートアップ企業の将来の買収が複雑になる可能性があることを懸念している。[ 78 ]
コミュニティからのフィードバックに基づき、Facebookは2015年4月に特許付与を更新し、曖昧さを減らし、より寛容なものにした。[ 79 ]
本契約に基づき付与されるライセンスは、お客様（またはお客様の子会社、関連会社、代理人）が、以下のいずれかに該当する特許主張を直接的または間接的に開始した場合、または直接的な金銭的利益を得た場合、自動的に通知なく終了します。(i) Facebookまたはその子会社もしくは関連会社に対する特許主張、(ii) Facebookまたはその子会社もしくは関連会社のソフトウェア、技術、製品もしくはサービスに全部または一部起因する特許主張に対する訴訟、(iii) ソフトウェアに関連する当事者に対する訴訟。[...] 「特許主張」とは、クロスクレームまたはカウンタークレームを含め、特許の直接的、間接的、または寄与的侵害もしくは侵害の誘引を主張する訴訟またはその他の措置を指します。[ 80 ]
Apache Software Foundation は、このライセンス契約はライセンス ポリシーと互換性がないと判断しました。なぜなら、「ライセンサーに有利なリスクをソフトウェアの下流の消費者に転嫁し、ライセンシーに不均衡なリスクを転嫁するため、普遍的なドナーであるという Apache の法的ポリシーに違反する」こと、そして「[Apache License 2.0] に含まれるサブセットではなく、[Apache License 2.0] としてサブライセンスすることはできない」からです。[ 81 ] 2017 年 8 月、Facebook は Apache Foundation の下流の懸念を無視し、ライセンスの再検討を拒否しました。[ 82 ] [ 83 ]翌月、WordPress はGutenberg および Calypso プロジェクトを React から切り替えることを決定しました。[ 84 ]
2017年9月23日、Facebookは翌週にFlow、Jest、React、Immutable.jsを標準MITライセンスで再ライセンスすると発表した。同社はReactが「Web向けオープンソースソフトウェアの広範なエコシステムの基盤」であり、「非技術的な理由で前進を妨げたくない」と述べた。[ 85 ]
2017年9月26日、React 16.0.0がMITライセンスでリリースされました。[ 86 ] MITライセンスへの変更は、React 15.6.2で15.xリリースラインにもバックポートされています。[ 87 ]
{{cite book}}:|website=無視されました (ヘルプ)