React 入門: 動かして学ぶチュートリアル
React 19 の無料チュートリアルです。コンポーネント、JSX、props、state、フック、パフォーマンスまでを扱います。どの例もページ上で動くので、コードを書き換えるとコンポーネントとコンソールがその場で変わります。
React のガイド付き学習を始めるはじめに
- ReactとはReactは、コンポーネントからユーザーインターフェースを作るためのJavaScriptライブラリです。現在のデータに対して画面がどう見えるべきかを書くと、データが変わったときにReactがページを同期させます。
- React 環境構築Viteでプロジェクトを作ってReactをインストールします。Node.jsを確認し、作成コマンドを1つ実行し、依存関係をインストールして開発サーバーを起動します。生成されるファイル、本番用ビルド、Create React Appが非推奨になった理由も扱います。
- JSXとはJSXは、Reactコンポーネントの中にHTMLに似たマークアップを書けるようにするJavaScriptの構文拡張です。ルートは1つ、タグは必ず閉じる、className、キャメルケースの属性、波かっこ、インラインスタイル、コメント、そしてコンパイル後の姿を学びます。
- React コンポーネントReactコンポーネントは、JSXを返すJavaScriptの関数です。関数コンポーネントの書き方と名前の付け方、ツリーへの組み合わせ方、ファイルへの分け方、純粋に保つ方法、そしてコンポーネントと要素の違いを学びます。
- React propspropsはReactコンポーネントの入力で、親が子にJSXの属性として渡す値です。propsの渡し方と分割代入、デフォルト値、関数の渡し方、スプレッド構文、そしてpropsが読み取り専用である理由を学びます。
- React childrenchildrenは、コンポーネントの開始タグと終了タグの間に書いたものを保持するpropです。それを使ったラッパーやレイアウトコンポーネントの作り方、名前付きpropsで複数の枠を渡す方法、関数としてのchildren、そしてChildren APIが適さない場面を学びます。
- React FragmentReact Fragmentは、ページにノードを追加せずに複数の要素を1つの戻り値にまとめます。短い構文 <>...</>、<Fragment key> が必要な場面、そしてテーブルやリストの中でフラグメントが重要な理由を学びます。
- 条件付きレンダリングReactの条件付きレンダリングは普通のJavaScriptです。if文、三項演算子、&&で、コンポーネントがどのJSXを返すかを決めます。それぞれのパターン、&&が出力してしまう余計な0、nullを返す方法、そしてコンポーネントを隠すことと描画しないことの違いを学びます。
- React keyReactでリストを描画するには、配列に対してmap()を呼び、各項目のJSXを返して、すべての項目にkey propを付けます。filterしてからmapする方法、keyの値をどこから取るか、そしてリストが変わると配列のindexのkeyが項目を取り違える理由を学びます。
- React イベントReactのイベントは、onClickやonChangeのように関数を受け取るpropsで、ユーザーが操作するとReactがイベントオブジェクトを渡してその関数を呼びます。ハンドラを呼ばずに渡す方法、引数の渡し方、e.target.valueとe.keyの読み方、フォームの再読み込みの防止、バブリングの止め方を学びます。
- React CSSReactコンポーネントのスタイルは、classNameと普通のCSS、JavaScriptで計算する値のためのstyle prop、スコープ付きのクラス名を作るCSS Modules、またはTailwindのユーティリティクラスで付けます。それぞれの方法、条件付きのクラス、そして使い分けを学びます。
state とフォーム
- useStateuseStateはコンポーネントに、再レンダリングをまたいで残る値と、値が変わったときに画面を描き直すセッター関数を与えます。構文、更新関数、オブジェクトや配列のstate、そしてセットした直後に値が古く見える理由を学びます。
- 配列とオブジェクトの更新Reactのstateにある配列やオブジェクトを変えるには、新しいものを作ってセッターに渡します。項目の追加、削除、置き換え、挿入、並べ替え、ネストしたオブジェクトの更新、そしてstateを直接変更すると画面が変わらない理由を学びます。
- React フォーム制御された入力でReactのフォームを作ります。テキスト欄、textarea、select、チェックボックス、ラジオボタン、多くの項目を1つのstateオブジェクトで扱う方法、onSubmitでの送信、バリデーションエラーの表示、React 19のフォームアクションを学びます。
- 制御・非制御コンポーネント制御された入力は値をReactのstateから受け取り、onChangeを通じてだけ変わります。非制御の入力は自分の値をDOMに持ち、refやFormDataで読み取ります。違い、よくある警告、それぞれの使いどころを学びます。
- stateのリフトアップstateのリフトアップとは、2つのコンポーネントからstateを取り出し、最も近い共通の親に移すことです。親は値とセッターをpropsとして下へ渡します。リフトアップすべきタイミング、3ステップの手順、そしてstateをローカルに残すべき場面を学びます。
- useReduceruseReducerはstateを保存し、すべての更新を1つのreducer関数にまとめます。アクションをdispatchすると、reducerが次のstateを返します。構文、純粋なreducerの書き方、Todoリストの例、遅延初期化、そしてuseStateより選ぶべき場面を学びます。
エフェクトと ref
- useEffectuseEffectはReactが画面を更新した後にコードを実行するので、コンポーネントはReactの外にあるもの（タイマー、購読、イベントリスナー）と同期できます。依存配列の3つの形、クリーンアップ、無限ループ、そしてそもそもエフェクトが不要な場面を学びます。
- React データ取得Reactでデータを取得するには、useEffectでリクエストを始め、読み込み中、エラー、データをstateに持ち、入力が変わった後に届いたレスポンスは無視します。エフェクト内のasync/await、AbortController、競合状態、そしてライブラリを使うべき場面を扱います。
- useRefuseRefはコンポーネントに `{ current }` という箱を与えます。中身はレンダリングをまたいで保たれ、変えてもレンダリングは起きません。DOMノードに触れる（フォーカス、スクロール、サイズ計測）ため、またはタイマーのIDや画面に表示しない値を保存するために使います。
- forwardRefforwardRefを使うと、コンポーネントは親からrefを受け取り、中のDOMノードに付けられます。React 19では関数コンポーネントが `ref` を普通のpropとして受け取るので、新しいコードではforwardRefはもう不要です。両方の書き方を動かして確かめ、useImperativeHandleとTypeScriptの型も紹介します。
- useLayoutEffectuseLayoutEffectはuseEffectと同じように動きますが、ReactがDOMを更新した直後、ブラウザが描画する前に実行されます。目に見えるちらつきなしに要素を測ってレイアウトを調整するために使い、それ以外にはuseEffectを使います。
フックとコンテキスト
- React Hooksフックは名前がuseで始まる関数で、コンポーネントがstate、コンテキスト、ref、エフェクトなどのReactの機能を使えるようにします。用途別にまとめたすべての組み込みフック、すべてのフックが守る2つのルール、そして自作フックの書き方を紹介します。
- useContextuseContextは親コンポーネントが提供する値を読むので、深くネストしたコンポーネントは、途中のすべてのコンポーネントがpropとして渡さなくてもその値を受け取れます。createContext、プロバイダー、子からのコンテキストの更新、そしてコンテキストが再レンダリングにどう影響するかを学びます。
- propsのバケツリレーpropsのバケツリレー（prop drilling）とは、下にあるコンポーネントのためだけに、それを使わないコンポーネントを通してpropを渡すことです。動く例で確かめ、アプリが大きくなると困る理由と、試すべき順番の解決策（コンポジション、コンテキスト、状態管理ライブラリ）を紹介します。
- カスタムフックカスタムフックは名前がuseで始まり、ほかのフックを呼ぶ関数で、複数のコンポーネントが同じstateを持つロジックを再利用できるようにします。useToggle、useLocalStorage、useDebounce、useWindowWidthを作りながら、呼び出しごとに独自のstateを持つ理由を学びます。
- フックのルールフックには2つのルールがあります。コンポーネントのトップレベルで呼び、条件分岐、ループ、ネストした関数の中では決して呼ばないこと。そして関数コンポーネントかカスタムフックからだけ呼ぶことです。Reactがすべてのレンダリングで同じ呼び出し順を必要とする理由と、それが変わったときに出るエラーの直し方を学びます。
- useIduseIdはコンポーネントのインスタンスごとに一意で安定したIDを返すので、コンポーネントが何度も現れても、ラベル、入力欄、aria-describedbyのヒントがお互いを指せます。Math.randomやカウンターがサーバーレンダリングで壊れる理由と、useIdがリストのkey用ではない理由を学びます。
- useSyncExternalStoreuseSyncExternalStoreは、小さなストアのモジュールやnavigator.onLineのようなブラウザのAPIなど、Reactの外にあるデータをコンポーネントに購読させ、そのデータが変わるたびに再レンダリングします。subscribeとgetSnapshot、スナップショットをキャッシュしなければならない理由、getServerSnapshotを学びます。
レンダリングとパフォーマンス
- React レンダリングReactのコンポーネントは、stateが変わったとき、親がレンダリングされたとき、読んでいるコンテキストが変わったときに再レンダリングされます。レンダリングとコミットの違い、仮想DOMの本当の意味、そして不要なレンダリングを止める方法を学びます。
- useMemouseMemoは計算結果をレンダリング間でキャッシュし、依存値が変わったときだけ計算し直します。構文、memoの子のためにオブジェクトを安定させる方法、そしてuseMemoを使う価値がない場面を学びます。
- useCallbackuseCallbackは、依存値が変わるまでレンダリング間で同じ関数を返します。役立つのは、その関数をmemoの子に渡すときか、エフェクトの依存値として使うときだけです。構文、useMemoとの違い、避けるべき間違いを学びます。
- React.memomemoはコンポーネントを包み、propsが前回と浅い比較で等しければReactがその再レンダリングを飛ばすようにします。役立つ場面、propsの新しいオブジェクトや関数がそれを打ち消す理由、そしてmemoが止めないものを学びます。
- useTransitionuseTransitionはstateの更新を緊急でないものとして扱うので、Reactは遅い部分を裏でレンダリングしながらページの応答性を保てます。isPending、startTransition、React 19の非同期トランジション、そしてデバウンスとは違う理由を学びます。
- useDeferredValueuseDeferredValueは、重いレンダリングの間は遅れてもよい値のコピーを返すので、遅いリストが追いつく間も入力欄の応答性が保たれます。仕組み、React 19の初期値、useTransitionやデバウンスとの比較を学びます。
- React SuspenseSuspenseは中のコンポーネントの準備ができていない間フォールバックを表示し、React.lazyはコンポーネントのコードを最初に描画されたときにだけ読み込みます。コード分割、ネストした境界、React 19のuse()とSuspense、エラーの扱いを学びます。
React 19 と応用
- React 19React 19ではアクション、useActionState、useOptimistic、use、propとしてのref、ドキュメントのメタデータが追加され、19.2ではActivityとuseEffectEventが追加されました。各機能を動かして確かめ、削除されたもの、アップグレードの方法を紹介します。
- useActionStateuseActionStateは非同期のアクションを包み、最後に返された値を保ち、まだ実行中かどうかを教えてくれます。シグネチャ、フォームアクション、バリデーションエラーの返し方、フォームの外での呼び方を学びます。
- useOptimisticuseOptimisticは、非同期のアクションの実行中に予想される結果を表示し、終わると本当のstateに戻るので、失敗したリクエストは自動的に取り消されます。構文、reducerの形、そしてアクションの中で実行しなければならない理由を学びます。
- useuseは、レンダリング中にPromiseやコンテキストの値を読みます。Promiseなら、データが届くまでサスペンドし、最も近いSuspenseのフォールバックを表示します。ほかのフックと違い、if文やループの中でも実行できます。
- エラーバウンダリエラーバウンダリは、中のコンポーネントのレンダリング中に投げられたエラーを捕まえ、真っ白な画面の代わりにフォールバックを表示するコンポーネントです。何を捕まえるか、クラスでの書き方、リセットの方法、react-error-boundaryライブラリを学びます。
- React ポータルcreatePortalは、Reactのツリーでは同じ場所にとどまったまま、コンポーネントの一部をdocument.bodyのような別のDOMノードに描画します。overflow: hiddenやz-indexの重なり順から抜け出す必要があるモーダル、ツールチップ、メニューに使います。
- Strict ModeStrictModeは開発中だけ働くラッパーで、コンポーネントを2回レンダリングし、マウント時にエフェクトのセットアップ、クリーンアップ、セットアップを実行し、非推奨のAPIについて警告します。純粋でないレンダリングやクリーンアップの欠けたエフェクトを早めに見つけられます。本番では何もしません。
- ライフサイクルReactのすべてのコンポーネントは、マウントされ（現れ）、更新され（再レンダリングされ）、アンマウントされます（取り除かれます）。各フェーズがuseEffectにどう対応するか、クラスのライフサイクルメソッドとそのフックでの同等品、そしてレンダーフェーズとコミットフェーズを学びます。
- クラスコンポーネントクラスコンポーネントは、React.Componentを継承し、renderメソッドからJSXを返すJavaScriptのクラスです。this.props、this.stateとsetState、イベントハンドラのbind、ライフサイクルメソッド、PureComponent、そしてクラスを関数コンポーネントに変換する方法を学びます。
比較と面接対策
- React 面接質問初級から上級までのReactの面接質問約30問に、面接官が納得する短い回答を付けました。読むより見たほうがわかりやすい質問には、動くコードも付いています。
- React vs AngularReactはほかの道具と組み合わせて使うUIライブラリで、Angularはルーティング、フォーム、HTTP、依存性の注入を組み込んだ完全なフレームワークです。両方で書いた同じコンポーネントを並べて比べます。
- React vs VueReactとVueは、どちらもコンポーネントからユーザーインターフェースを作るJavaScriptの道具です。違いはマークアップ（JSXとテンプレート）、変更への反応の仕方（イミュータブルなstateと再レンダリング、変更可能なリアクティブなref）、そしてエコシステムのどこまでが公式かです。
- React TypeScriptReactアプリをTypeScriptで型付けする方法です。propsとchildren、ユニオン型やnullを使うuseState、DOM要素のためのuseRef、イベントハンドラ、コンテキスト、ジェネリックなコンポーネント、ネイティブ要素のpropsを扱います。
