VIDEO LESSON

Reactの基本Hooks入門：useState・useEffect・useRef・useContextの使い方の解説動画

再生時間 7:52動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00リアクト入門の第二回です。
0:03今回は、ユースステート、ユースエフェクト、ユースレフ、ユースコンテキストという、
0:07四つの基本フックスを学びます。
0:12フックスは、関数コンポーネントに、状態の保持や外部との同期などの機能を加える仕組みです。
0:19大切なのは、名前を暗記することではなく、何を実現したいかで選べるようになることです。
0:26画面に反映したい値なのか、ブラウザーとの同期なのか、入力欄への参照なのか、
0:30離れた部品への共有なのか。
0:34この見分け方を、小さなタイプスクリプトの例で一つずつ確認していきましょう。
0:41最初に、四つの役割を整理します。
0:43ユースステートは、入力値や選択状態など、変わったら画面に反映したい値を保持します。
0:50ユースエフェクトは、ブラウザーのイベントなど、リアクトの外側の仕組みと同期します。
0:57ユースレフは、入力欄などのディーオーエムへの参照や、表示の更新を伴わない値を保持します。
1:04ユースコンテキストは、親が提供する値を、その配下のコンポーネントから読み取ります。
1:11多くの場合、最初に必要になるのはユースステートです。
1:15ほかのフックスは、目的が決まってから選びます。
1:19また、フックスは関数コンポーネントかカスタムフックのトップレベルで呼び、
1:23条件分岐や繰り返しの中には置きません。
1:28呼び出しの順序を毎回同じに保つことがルールです。
1:32まずユースステートです。
1:34ステートエグザンプルでは、名前の文字列とカウントの数値を、別々のステートで保持します。
1:40入力欄の値に名前を表示し、変更されたらセットネームで更新します。
1:45挨拶は、名前の前後の空白を取り除き、空ならゲストと表示します。
1:50カウントは、ボタンを押すたびに増え、リセットでゼロに戻ります。
1:55ステートは、コンポーネントが次の描画でも覚えておく値です。
1:59通常の変数を書き換えるだけでは画面の更新を伝えられないため、更新用の関数を使います。
2:06挨拶文のように、名前から計算できる値は、別のステートにせず、描画の中で求めるのがポイントです。
2:13更新の書き方には注意点があります。
2:15セットカウントを呼んでも、その処理の中で今見えているカウントが、その場で書き換わるわけではありません。
2:23そのため、セットカウントにカウントたす一を三回渡しても、いずれも同じ描画の値を基にするので、
2:28通常は一しか増えません。
2:32一方、この例のように更新関数を三つ渡すと、各関数が順に更新途中の値を受け取るので、
2:36結果は三増えます。
2:40実機でも、関数を渡す方法ではゼロから三になり、直接の値では一になることを確認しました。
2:46更新関数の中では通信や保存はせず、受け取った値から次の値を計算だけにしましょう。
2:52オブジェクトや配列のステートも、直接書き換えず、新しい値を作って渡します。
2:58次はユースエフェクトです。
3:00コネクションエグザンプルでは、ブラウザーのオンライン状態を最初に読み取り、
3:04その後はオンラインとオフラインのイベントに応じて更新します。
3:08初期値をヌルにしておくと、確認中と表示でき、描画の中でナビゲーターを直接参照せずに済みます。
3:14表示は、ヌルなら確認中、真ならオンライン、偽ならオフラインです。
3:19ただし、これはブラウザーが判断する接続状態にすぎません。
3:22オンラインと表示されても、認証切れやサーバー停止でエーピーアイ通信が失敗することはあります。
3:28この値だけで操作を禁止せず、実際の通信の失敗は個別に扱ってください。
3:33エフェクトは、このように外部の仕組みと同期するときに使います。
3:37エフェクトで登録したものは、後始末までがセットです。
3:41エフェクトが返す関数はクリーンアップと呼ばれ、コンポーネントが取り外されるときなどに実行されます。
3:48イベントの登録を解除するときは、登録したときと同じ関数を使い、登録だけが残らないようにします。
3:55この例で依存配列が空なのは、エフェクトが変化するプロップスやステートを読んでいないためです。
4:02依存する値を使う場合は、必要な値を配列に含めます。
4:06実行回数を減らしたいという理由で、依存値を省略してはいけません。
4:11また、ストリクトモードを使う開発環境では、セットアップとクリーンアップが追加で実行されることがあります。
4:18何度実行されても登録が重複しない、対称な形にしておきましょう。
4:23三つ目はユースレフです。
4:25フォーカスエグザンプルでは、ボタンを押すとメモの入力欄へフォーカスを移します。
4:30ユースレフで、インプット要素への参照を用意し、入力欄のレフ属性に渡します。
4:35すると、リアクトが配置したディーオーエムが、カレントに入ります。
4:39ボタンが押されたら、カレントのフォーカスメソッドを呼びます。
4:43まだ配置されていない場合はヌルになるので、オプショナルチェーンで確認してから呼び出すのが安全です。
4:50実機の型チェックでも、この書き方でエラーはありませんでした。
4:54フォーカス用ボタンを押した直後に文字を打つと、メモ欄へ入力されるのが確認の目安です。
4:59ユースレフとユースステートの違いを押さえましょう。
5:03レフに保持した値を変更しても、それだけでは再描画されません。
5:07そのため、クリック回数のように画面に表示したい値にはユースステートを使い、
5:13ディーオーエムへの参照のように、表示を直接決めない情報にはユースレフを使います。
5:18一覧ページの入門例で、連番のアイティーをユースレフで保持していたのも、再描画に使わない値だったからです。
5:26なお、通常はレフの読み書きをイベントやエフェクトの中で行い、描画中の処理には持ち込まないようにします。
5:33この基準があると、どちらのフックスを選ぶか迷いにくくなります。
5:38四つ目はユースコンテキストです。
5:40テーマエグザンプルでは、親がライトかダークかのテーマをステートで保持し、
5:44コンテキストを通して子へ提供します。
5:47子はユースコンテキストで、自分より上にある最も近い対応プロバイダーの値を読み取ります。
5:53ボタンを押してテーマを切り替えると、背景色と一緒に、子コンポーネントのテーマ名も変わります。
5:59ここで大切なのは、値を保持しているのはあくまでユースステートであり、コンテキストは値をツリーへ渡す経路だということです。
6:08対応するプロバイダーが上にない場合は、クリエイトコンテキストで指定した初期値が使われます。
6:14少数の親子ならプロップスで十分ですが、何段もの中間コンポーネントが受け渡すだけになったら、
6:18コンテキストを検討しましょう。
6:22最後に、四つの例をアプリにまとめて確認します。
6:25アプリ・ティーエスエックスで四つのコンポーネントを並べ、メイン・ティーエスエックスからの呼び出しはテンプレートのまま使います。
6:34確認する操作は五つです。
6:36名前を入力すると挨拶が変わり、空白だけならゲストになること。
6:40カウントがゼロのとき三増やすを押すと三になり、リセットでゼロに戻ること。
6:45接続状態はブラウザーの通知に応じて変わること。
6:49フォーカス用ボタンの直後に文字を打つとメモ欄へ入ること。
6:53テーマを切り替えると背景色と子のテーマ名が変わること。
6:57あわせてビルドを実行し、型エラーやインポート漏れがないことも確かめます。
7:02今回の例は、タイプスクリプトの型チェックでエラーがないことを確認済みです。
7:07まとめです。
7:08画面に反映する値はユースステート、外部との同期はユースエフェクト、ディーオーエムへの参照はユースレフ、
7:13配下への共有はユースコンテキスト。
7:19目的でフックスを選ぶことが、今回のゴールです。
7:22ユースメモやユースコールバックも最初から必要ですか、という疑問には、この小さな例では必要ない、
7:27と答えられます。
7:31まず正しく動く実装を作り、処理時間などが問題になったときに計測して判断します。
7:37練習として、カウンターの増減幅を変える、テーマを三種類にする、といった小さな変更から試してください。
7:45次回はユースリデューサーで、状態の更新を整理する方法を学びます。
7:50お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

ReactのuseState・useEffect・useRef・useContextをTypeScriptの動く例で解説。状態更新、イベントの後始末、入力欄へのフォーカス、テーマ共有と使い分けを学びます。

解説記事・サンプルコードを読む：Reactの基本Hooks入門：useState・useEffect・useRef・useContextの使い方 →