クライアントレンダリング API への変更 まず React 18 をインストールすると、以下のような警告がコンソールに表示されます： ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17. Learn more: https://reactjs.org/link/switch-to-createroot React では複数のルートを管理する際の使い勝手を改善する、新しいルート API を導入しています。新しいルート API によって新しい並行レンダラも有効になるため、並行処理機能にオプトインできるようになります。 // Befo

この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントで最新の React の使い方が学べます。 <Profiler> Profiler を使って、React アプリケーションのレンダーの頻度やレンダーの「コスト」を計測することができます。 本機能の目的は、アプリケーション中の、低速でメモ化などの最適化が有効な可能性のある部位を特定する手助けをすることです。 補足: プロファイリングには追加のオーバーヘッドが生じますので、本番ビルドでは無効化されます。 本番環境でプロファイリングを利用するために、React はプロファイリングを有効化した特別な本番用ビルドを提供しています。 このビルドの使用方法については fb.me/react-profiling をご覧ください。 使用法 Prof

フック (hook) は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。 フックは JavaScript の関数ですが、それらを使う際には以下の 2 つのルールに従う必要があります。我々は自動的にこのルールを強制するための linter プラグイン を提供しています。 フックを呼び出すのはトップレベルのみ フックをループや条件分岐、あるいはネストされた関数内で呼び出してはいけません。代わりに、あなたの React の関数のトップレベルでのみ、あらゆる早期 return 文よりも前の場所で呼び出してください。これを守ることで、コンポーネントがレンダーされる際に毎回同じ順番で呼び出されるということが保証されます。これが、複数回 useState や useEffect が呼び出された場合でも React がフックの

この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントで最新の React の使い方がライブサンプル付きで学べます。 StrictMode StrictMode はアプリケーションの潜在的な問題点を洗い出すためのツールです。Fragment と同様に、StrictMode は目に見える UI を描画しません。StrictMode の子孫要素に対しては、付加的な検査および警告が動くようになります。 補足： strict モードでの検査は開発モードでのみ動きます。本番ビルドには影響を与えません。 strict モードはアプリケーションの任意の箇所で有効にできます。下はその一例です。 import React from 'react'; function ExampleApplicatio

この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 React は強力なコンポジションモデルを備えており、コンポーネント間のコードの再利用には継承よりもコンポジションをお勧めしています。 この章では、React を始めて間もない開発者が継承に手を出した時に陥りがちないくつかの問題と、コンポジションによりその問題がどのように解決できるのかについて考えてみます。 子要素の出力 (Containment) コンポーネントの中には事前には子要素を知らないものもあります。これは Sidebar や Dialog のような汎用的な “入れ物” をあらわすコンポーネントではよく使われています。 このようなコンポーネントでは特別な children という props を使い、以下のようにして受け取った子要素を出力するこ

この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 新しいバージョンの React の流儀では、最新の React の使い方がライブサンプル付きで学べます。 巨大で軽快な Web アプリを開発する場合に、React は最高の手段であると、私たちは考えています。Facebook や Instagram といった私たちのサービスにおいても、とてもよくスケールしています。 React のすばらしい特長がいくつもありますが、あなたがどんなアプリを作ろうかと考えたことが、そのままアプリの作り方になる、というのはそのひとつです。本ドキュメントでは、検索可能な商品データ表を React で作っていく様子をお見せしましょう。 モックから始めよう すでに、JSON API が実装済みで、デザイナーからもデザインモックがもら

この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 新ドキュメントのカスタム HTML 要素を参照してください。 React と Web Components は異なる課題を解決する為に構築されました。Web Components はコンポーネントをパッケージ化して、高い再利用性を与えます。一方で React は DOM とデータを同期させる為の宣言型のライブラリを提供しています。この 2 つの目標は互いを補完しあっています。あなたは開発者として、Web Components 内で React を使用することも、React 内で Web Components を使用することも、あるいはその両方を行うこともできます。 React を使用するほとんどの人は Web Components を使用しませんが、We

このドキュメントを作成したのは、React が何をして何をしないのか、そして開発理念がどのようなものなのかをより理解できるようにするためです。私たちはコミュニティへの貢献を見ることにわくわくしています。しかしこれらの原則の 1 つ以上に違反する道を選ぶことはありません。 注意: このドキュメントは React を強く理解していることを前提としています。React のコンポーネントやアプリケーションではなく、React 自体の設計原則について説明しています。 React の紹介については、代わりに React の流儀を調べてください。 コンポジション React の主な機能はコンポーネントのコンポジションです。異なる人々によって書かれたコンポーネントは一緒にうまく動くべきです。コードベース全体に波及する変更を引き起こすことなく、コンポーネントに機能を追加できるということが重要です。 たとえば

このセクションでは React コードベースの構成や規則そして実装についての概要を説明します。 あなたが React にコントリビュートしたい場合に、このガイドがあなたがより快適に変更を行えるように手助けとなる事を願っています。 これらの規約のいずれかをあなたの React アプリケーションで推奨しているというわけでは必ずしもありません。規約の多くは歴史的な理由で存在しており、時間とともに変化する可能性があります。 最上位フォルダ React リポジトリをクローンした後、プロジェクトのルートディレクトリに複数のフォルダがあることに気がつくでしょう： packages には React リポジトリの全てのパッケージのメタデータ（package.json など）や、ソースコード（src サブディレクトリ）が含まれています。あなたの変更がコードに関するものなら、各パッケージの src サブディレ

なぜアクセシビリティが必要なのか？ Web アクセシビリティ（a11y とも呼ばれます）とは、誰にでも使えるようウェブサイトを設計・構築することです。ユーザ補助技術がウェブページを解釈できるようにするためには、サイトでアクセシビリティをサポートする必要があります。 React はアクセシビリティを備えたウェブサイトの構築を全面的にサポートしており、大抵は標準の HTML の技術が用いられます。 標準およびガイドライン WCAG Web Content Accessibility Guidelines はアクセシビリティを備えたウェブサイトを構築するためのガイドラインを提供しています。 以下の WCAG のチェックリストはその概要を示します。 WCAG checklist from Wuhcag WCAG checklist from WebAIM Checklist from The A1

この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントで最新の React の使い方がライブサンプル付きで学べます。 <input> <select> <textarea> ほとんどの場合では、フォームの実装には制御されたコンポーネント (controlled component) を使用することをお勧めしています。制御されたコンポーネントでは、フォームのデータは React コンポーネントが扱います。非制御コンポーネント (uncontrolled component) はその代替となるものであり、フォームデータを DOM 自身が扱います。 非制御コンポーネントを記述するには、各 state の更新に対してイベントハンドラを書く代わりに、ref を使用して DOM からフォームの値

仮想 DOM とは？ 仮想 DOM (virtual DOM; VDOM) は、インメモリに保持された想像上のまたは「仮想の」UI 表現が、ReactDOM のようなライブラリによって「実際の」DOM と同期されるというプログラミング上の概念です。このプロセスは差分検出処理 (reconciliation)と呼ばれます。 このアプローチにより React の宣言型 API が可能になっています。あなたは UI をどのような状態にしたいのか React に伝え、React は必ず DOM をその状態と一致させます。これにより、React なしではアプリケーションを構築するために避けて通れない属性の操作やイベントハンドリング、および手動での DOM 更新が抽象化されます。 “仮想 DOM” は特定の技術というよりむしろ 1 つのパターンなので、時たま違う意味で使われることがあります。React

この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントで最新の React の使い方がライブサンプル付きで学べます。 state の保持とリセット React は、各更新で実際に何が変更されるべきかを人間が心配する必要がないように、宣言型の API を提供しています。これによりアプリケーションの作成が大幅に容易になるわけですが、React の中でこの処理がどのように実装されているのかはよく分からないかもしれません。この章では React の “差分” アルゴリズムについて、コンポーネントの更新を予測可能なものとしながら、ハイパフォーマンスなアプリケーションの要求を満たす速度を得られるように、私たちが行った選択について説明します。 何が問題なのか React を使う際、render()

Note: The following section applies only to the development mode of React. Error handling in production mode is done with regular try/catch statements. In development mode, React uses a global error event handler to preserve the “pause on exceptions” behavior of browser DevTools. It also logs errors to the developer console. If an error is thrown from a different origin the browser will mask its d

この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントで最新の React の使い方が学べます。 React.Component このページには React コンポーネントクラス定義の詳細な API リファレンスがあります。また、あなたが コンポーネントや props などの基本的な React の概念、および state やライフサイクルに精通していることを前提としています。そうでない場合は、まずそれらを読んでください。 概要 React では、コンポーネントをクラスまたは関数として定義できます。クラスとして定義されたコンポーネントは現在このページで詳細に説明されているより多くの機能を提供します。React コンポーネントクラスを定義するには、React.Component を継承

この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントで最新の React の使い方が学べます。 React.Component: エラーバウンダリでレンダー中のエラーをキャッチする かつて、コンポーネント内で発生した JavaScript エラーは React の内部状態を破壊し、以降のレンダーで不可解な エラーを 引き起こしていました。このようなエラーはアプリケーションコード中のどこか前の段階で発生したエラーによって引き起こされますが、React はエラーをコンポーネント内で適切に処理する方法を提供していなかったため回復できませんでした。 error boundary とは UI の一部に JavaScript エラーがあってもアプリ全体が壊れてはいけません。React ユーザが

この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントで最新の React の使い方がライブサンプル付きで学べます。 リストのレンダー まず、JavaScript でリストを変換する方法についておさらいしましょう。 以下のコードでは、map() 関数を用い、numbers という配列を受け取って中身の値を 2 倍しています。map() 関数が返す新しい配列を変数 doubled に格納し、ログに出力します： const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => number * 2);console.log(doubled); このコードはコンソールに [2, 4, 6, 8, 10] と出力

この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 JSX とは、つまるところ React.createElement(component, props, ...children) の糖衣構文にすぎません。例として、次の JSX コードを見てみましょう。

この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントで最新の React の使い方がライブサンプル付きで学べます。 <div> などの一般的なコンポーネント このリファレンスガイドでは、React のイベントシステムの一部を構成する SyntheticEvent（合成イベント）ラッパについて説明します。詳細については、イベント処理ガイドを参照してください。 概要 イベントハンドラには、SyntheticEvent のインスタンスが渡されます。これはブラウザのネイティブイベントに対するクロスブラウザ版のラッパです。stopPropagation() と preventDefault() を含む、ブラウザのネイティブイベントと同じインターフェイスを持ちつつ、ブラウザ間で同じ挙動をするよ

この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 React を追加するためのおすすめの方法については、既存プロジェクトに React を追加するを参照してください。 まずは必要なぶんだけ使ってみましょう。 React は当初から、段階的に導入することができるようにデザインされています。つまり最小限の部分で React を利用することも、あるいは大規模に React を利用することも可能です。既存のページにちょっとしたインタラクティブ性をもたせたいだけでも構いません。React コンポーネントを使えばお手の物です。 多くのウェブサイトはシングルページアプリケーションではありませんし、そうする必要もありません。まずはたった数行のコードから、あなたのウェブサイトに React を取り入れてみましょう。ビルド