WEBVTT

1
00:00:00.000 --> 00:00:00.998
こんにちは。

2
00:00:00.998 --> 00:00:03.159
リアクト入門の第二回です。

3
00:00:03.159 --> 00:00:07.731
今回は、ユースステート、ユースエフェクト、ユースレフ、ユースコンテキストという、

4
00:00:07.731 --> 00:00:12.304
四つの基本フックスを学びます。

5
00:00:12.304 --> 00:00:19.620
フックスは、関数コンポーネントに、状態の保持や外部との同期などの機能を加える仕組みです。

6
00:00:19.620 --> 00:00:26.603
大切なのは、名前を暗記することではなく、何を実現したいかで選べるようになることです。

7
00:00:26.603 --> 00:00:30.759
画面に反映したい値なのか、ブラウザーとの同期なのか、入力欄への参照なのか、

8
00:00:30.759 --> 00:00:34.916
離れた部品への共有なのか。

9
00:00:34.916 --> 00:00:41.068
この見分け方を、小さなタイプスクリプトの例で一つずつ確認していきましょう。

10
00:00:41.068 --> 00:00:43.707
最初に、四つの役割を整理します。

11
00:00:43.707 --> 00:00:50.469
ユースステートは、入力値や選択状態など、変わったら画面に反映したい値を保持します。

12
00:00:50.469 --> 00:00:57.231
ユースエフェクトは、ブラウザーのイベントなど、リアクトの外側の仕組みと同期します。

13
00:00:57.231 --> 00:01:04.487
ユースレフは、入力欄などのディーオーエムへの参照や、表示の更新を伴わない値を保持します。

14
00:01:04.487 --> 00:01:11.249
ユースコンテキストは、親が提供する値を、その配下のコンポーネントから読み取ります。

15
00:01:11.249 --> 00:01:15.538
多くの場合、最初に必要になるのはユースステートです。

16
00:01:15.538 --> 00:01:19.331
ほかのフックスは、目的が決まってから選びます。

17
00:01:19.331 --> 00:01:23.866
また、フックスは関数コンポーネントかカスタムフックのトップレベルで呼び、

18
00:01:23.866 --> 00:01:28.402
条件分岐や繰り返しの中には置きません。

19
00:01:28.402 --> 00:01:32.360
呼び出しの順序を毎回同じに保つことがルールです。

20
00:01:32.360 --> 00:01:34.200
まずユースステートです。

21
00:01:34.200 --> 00:01:40.795
ステートエグザンプルでは、名前の文字列とカウントの数値を、別々のステートで保持します。

22
00:01:40.795 --> 00:01:45.703
入力欄の値に名前を表示し、変更されたらセットネームで更新します。

23
00:01:45.703 --> 00:01:50.457
挨拶は、名前の前後の空白を取り除き、空ならゲストと表示します。

24
00:01:50.457 --> 00:01:55.211
カウントは、ボタンを押すたびに増え、リセットでゼロに戻ります。

25
00:01:55.211 --> 00:01:59.659
ステートは、コンポーネントが次の描画でも覚えておく値です。

26
00:01:59.659 --> 00:02:06.100
通常の変数を書き換えるだけでは画面の更新を伝えられないため、更新用の関数を使います。

27
00:02:06.100 --> 00:02:13.308
挨拶文のように、名前から計算できる値は、別のステートにせず、描画の中で求めるのがポイントです。

28
00:02:13.308 --> 00:02:15.902
更新の書き方には注意点があります。

29
00:02:15.902 --> 00:02:23.685
セットカウントを呼んでも、その処理の中で今見えているカウントが、その場で書き換わるわけではありません。

30
00:02:23.685 --> 00:02:28.111
そのため、セットカウントにカウントたす一を三回渡しても、いずれも同じ描画の値を基にするので、

31
00:02:28.111 --> 00:02:32.537
通常は一しか増えません。

32
00:02:32.537 --> 00:02:36.352
一方、この例のように更新関数を三つ渡すと、各関数が順に更新途中の値を受け取るので、

33
00:02:36.352 --> 00:02:40.167
結果は三増えます。

34
00:02:40.167 --> 00:02:46.729
実機でも、関数を渡す方法ではゼロから三になり、直接の値では一になることを確認しました。

35
00:02:46.729 --> 00:02:52.833
更新関数の中では通信や保存はせず、受け取った値から次の値を計算だけにしましょう。

36
00:02:52.833 --> 00:02:58.480
オブジェクトや配列のステートも、直接書き換えず、新しい値を作って渡します。

37
00:02:58.480 --> 00:03:00.183
次はユースエフェクトです。

38
00:03:00.183 --> 00:03:04.572
コネクションエグザンプルでは、ブラウザーのオンライン状態を最初に読み取り、

39
00:03:04.572 --> 00:03:08.960
その後はオンラインとオフラインのイベントに応じて更新します。

40
00:03:08.960 --> 00:03:14.986
初期値をヌルにしておくと、確認中と表示でき、描画の中でナビゲーターを直接参照せずに済みます。

41
00:03:14.986 --> 00:03:19.179
表示は、ヌルなら確認中、真ならオンライン、偽ならオフラインです。

42
00:03:19.179 --> 00:03:22.847
ただし、これはブラウザーが判断する接続状態にすぎません。

43
00:03:22.847 --> 00:03:28.873
オンラインと表示されても、認証切れやサーバー停止でエーピーアイ通信が失敗することはあります。

44
00:03:28.873 --> 00:03:33.327
この値だけで操作を禁止せず、実際の通信の失敗は個別に扱ってください。

45
00:03:33.327 --> 00:03:37.388
エフェクトは、このように外部の仕組みと同期するときに使います。

46
00:03:37.388 --> 00:03:41.286
エフェクトで登録したものは、後始末までがセットです。

47
00:03:41.286 --> 00:03:48.633
エフェクトが返す関数はクリーンアップと呼ばれ、コンポーネントが取り外されるときなどに実行されます。

48
00:03:48.633 --> 00:03:55.680
イベントの登録を解除するときは、登録したときと同じ関数を使い、登録だけが残らないようにします。

49
00:03:55.680 --> 00:04:02.577
この例で依存配列が空なのは、エフェクトが変化するプロップスやステートを読んでいないためです。

50
00:04:02.577 --> 00:04:06.325
依存する値を使う場合は、必要な値を配列に含めます。

51
00:04:06.325 --> 00:04:11.123
実行回数を減らしたいという理由で、依存値を省略してはいけません。

52
00:04:11.123 --> 00:04:18.920
また、ストリクトモードを使う開発環境では、セットアップとクリーンアップが追加で実行されることがあります。

53
00:04:18.920 --> 00:04:23.568
何度実行されても登録が重複しない、対称な形にしておきましょう。

54
00:04:23.568 --> 00:04:25.175
三つ目はユースレフです。

55
00:04:25.175 --> 00:04:30.398
フォーカスエグザンプルでは、ボタンを押すとメモの入力欄へフォーカスを移します。

56
00:04:30.398 --> 00:04:35.353
ユースレフで、インプット要素への参照を用意し、入力欄のレフ属性に渡します。

57
00:04:35.353 --> 00:04:39.638
すると、リアクトが配置したディーオーエムが、カレントに入ります。

58
00:04:39.638 --> 00:04:43.656
ボタンが押されたら、カレントのフォーカスメソッドを呼びます。

59
00:04:43.656 --> 00:04:50.218
まだ配置されていない場合はヌルになるので、オプショナルチェーンで確認してから呼び出すのが安全です。

60
00:04:50.218 --> 00:04:54.235
実機の型チェックでも、この書き方でエラーはありませんでした。

61
00:04:54.235 --> 00:04:59.860
フォーカス用ボタンを押した直後に文字を打つと、メモ欄へ入力されるのが確認の目安です。

62
00:04:59.860 --> 00:05:03.474
ユースレフとユースステートの違いを押さえましょう。

63
00:05:03.474 --> 00:05:07.811
レフに保持した値を変更しても、それだけでは再描画されません。

64
00:05:07.811 --> 00:05:13.376
そのため、クリック回数のように画面に表示したい値にはユースステートを使い、

65
00:05:13.376 --> 00:05:18.941
ディーオーエムへの参照のように、表示を直接決めない情報にはユースレフを使います。

66
00:05:18.941 --> 00:05:26.458
一覧ページの入門例で、連番のアイティーをユースレフで保持していたのも、再描画に使わない値だったからです。

67
00:05:26.458 --> 00:05:33.831
なお、通常はレフの読み書きをイベントやエフェクトの中で行い、描画中の処理には持ち込まないようにします。

68
00:05:33.831 --> 00:05:38.312
この基準があると、どちらのフックスを選ぶか迷いにくくなります。

69
00:05:38.312 --> 00:05:40.489
四つ目はユースコンテキストです。

70
00:05:40.489 --> 00:05:44.164
テーマエグザンプルでは、親がライトかダークかのテーマをステートで保持し、

71
00:05:44.164 --> 00:05:47.838
コンテキストを通して子へ提供します。

72
00:05:47.838 --> 00:05:53.690
子はユースコンテキストで、自分より上にある最も近い対応プロバイダーの値を読み取ります。

73
00:05:53.690 --> 00:05:59.950
ボタンを押してテーマを切り替えると、背景色と一緒に、子コンポーネントのテーマ名も変わります。

74
00:05:59.950 --> 00:06:08.115
ここで大切なのは、値を保持しているのはあくまでユースステートであり、コンテキストは値をツリーへ渡す経路だということです。

75
00:06:08.115 --> 00:06:14.239
対応するプロバイダーが上にない場合は、クリエイトコンテキストで指定した初期値が使われます。

76
00:06:14.239 --> 00:06:18.321
少数の親子ならプロップスで十分ですが、何段もの中間コンポーネントが受け渡すだけになったら、

77
00:06:18.321 --> 00:06:22.404
コンテキストを検討しましょう。

78
00:06:22.404 --> 00:06:25.706
最後に、四つの例をアプリにまとめて確認します。

79
00:06:25.706 --> 00:06:34.750
アプリ・ティーエスエックスで四つのコンポーネントを並べ、メイン・ティーエスエックスからの呼び出しはテンプレートのまま使います。

80
00:06:34.750 --> 00:06:36.472
確認する操作は五つです。

81
00:06:36.472 --> 00:06:40.779
名前を入力すると挨拶が変わり、空白だけならゲストになること。

82
00:06:40.779 --> 00:06:45.947
カウントがゼロのとき三増やすを押すと三になり、リセットでゼロに戻ること。

83
00:06:45.947 --> 00:06:49.249
接続状態はブラウザーの通知に応じて変わること。

84
00:06:49.249 --> 00:06:53.268
フォーカス用ボタンの直後に文字を打つとメモ欄へ入ること。

85
00:06:53.268 --> 00:06:57.144
テーマを切り替えると背景色と子のテーマ名が変わること。

86
00:06:57.144 --> 00:07:02.312
あわせてビルドを実行し、型エラーやインポート漏れがないことも確かめます。

87
00:07:02.312 --> 00:07:07.624
今回の例は、タイプスクリプトの型チェックでエラーがないことを確認済みです。

88
00:07:07.624 --> 00:07:08.568
まとめです。

89
00:07:08.568 --> 00:07:13.919
画面に反映する値はユースステート、外部との同期はユースエフェクト、ディーオーエムへの参照はユースレフ、

90
00:07:13.919 --> 00:07:19.270
配下への共有はユースコンテキスト。

91
00:07:19.270 --> 00:07:22.889
目的でフックスを選ぶことが、今回のゴールです。

92
00:07:22.889 --> 00:07:27.217
ユースメモやユースコールバックも最初から必要ですか、という疑問には、この小さな例では必要ない、

93
00:07:27.217 --> 00:07:31.545
と答えられます。

94
00:07:31.545 --> 00:07:37.683
まず正しく動く実装を作り、処理時間などが問題になったときに計測して判断します。

95
00:07:37.683 --> 00:07:45.552
練習として、カウンターの増減幅を変える、テーマを三種類にする、といった小さな変更から試してください。

96
00:07:45.552 --> 00:07:50.588
次回はユースリデューサーで、状態の更新を整理する方法を学びます。

97
00:07:50.588 --> 00:07:52.004
お疲れさまでした。