WEBVTT

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

2
00:00:00.884 --> 00:00:04.860
今回は、ネクストジェイエスのユーズエフェクト実践です。

3
00:00:04.860 --> 00:00:11.486
タイマーとブラウザーイベントを例に、依存配列、後始末、エスエスアールでの注意点を学びます。

4
00:00:11.486 --> 00:00:19.586
ユーズエフェクトは、リアクトの画面と、ブラウザーの機能やタイマー、外部サービスなどを同期するためのフックです。

5
00:00:19.586 --> 00:00:25.329
描画が確定した後に処理を始め、値の変更や画面の破棄に合わせて後片付けをします。

6
00:00:25.329 --> 00:00:32.839
この動画では、タイプスクリプトとページズルーターを前提に、開始と停止が対になる設計を中心に説明します。

7
00:00:32.839 --> 00:00:37.109
前提のバージョンは記事と同じ、リアクト十八とネクストジェイエス十三の例ですが、

8
00:00:37.109 --> 00:00:41.380
考え方は現在のバージョンでも共通です。

9
00:00:41.380 --> 00:00:44.085
まず、ユーズエフェクトの役割です。

10
00:00:44.085 --> 00:00:48.062
これは、描画後に何でも実行する場所ではありません。

11
00:00:48.062 --> 00:00:51.722
画面と外部の仕組みを同期させるための場所です。

12
00:00:51.722 --> 00:00:55.779
たとえば、タイマーを動かす、画面サイズの変化を購読する、外部サービスとつなぐ、

13
00:00:55.779 --> 00:00:59.836
といった処理が対象です。

14
00:00:59.836 --> 00:01:04.610
反対に、表示用の値を計算するだけなら、描画中に計算できます。

15
00:01:04.610 --> 00:01:10.656
また、エフェクトはサーバーでのエイチティーエムエル生成時には実行されません。

16
00:01:10.656 --> 00:01:18.293
ブラウザーで画面が確定してから初めて動く、という前提が、後のエスエスアールの注意につながります。

17
00:01:18.293 --> 00:01:23.702
同期が必要かどうかが、エフェクトを使うかどうかの判断基準になります。

18
00:01:23.702 --> 00:01:27.680
まず目的を言葉にしてから書き始めることが大切です。

19
00:01:27.680 --> 00:01:29.047
タイマーの例です。

20
00:01:29.047 --> 00:01:37.248
ファイルは、エスアールシー配下のコンポーネンツフォルダーにある、イラプストセカンズ・ティーエスエックスです。

21
00:01:37.248 --> 00:01:42.108
ランニングが真なら、一秒ごとに秒数を増やすタイマーを開始します。

22
00:01:42.108 --> 00:01:45.905
エフェクトが関数を返している点に注目してください。

23
00:01:45.905 --> 00:01:50.310
この返した関数が後始末で、タイマーを止める役割を持ちます。

24
00:01:50.310 --> 00:01:57.448
ランニングが偽へ変わるときや、部品が破棄されるときに、前のエフェクトの後始末が先に呼ばれます。

25
00:01:57.448 --> 00:02:03.827
なおこの例はタイマーの呼び出し回数を数えるため、裏側のタブでは遅れることがあります。

26
00:02:03.827 --> 00:02:12.180
開始した処理には必ず対応する後始末を用意する、という対の考え方が、この後のすべての例に共通する原則になります。

27
00:02:12.180 --> 00:02:17.467
ページ側では、ランニングという真偽値の状態を持ち、ボタンで切り替えます。

28
00:02:17.467 --> 00:02:22.019
開発サーバーでスラッシュタイマーを開くと、最初はタイマーが進み、停止を押すと数値が増えなくなり、

29
00:02:22.019 --> 00:02:26.572
再開すると続きから増えます。

30
00:02:26.572 --> 00:02:32.739
別ページへ移動して戻ったときも、以前のタイマーが残って二重に進まないことが大切です。

31
00:02:32.739 --> 00:02:37.439
これが確認できれば、開始と後始末が正しく対になっている証拠です。

32
00:02:37.439 --> 00:02:44.928
逆に、停止しても増え続ける場合は、後始末が呼ばれていないか、タイマーが複数残っている可能性を疑います。

33
00:02:44.928 --> 00:02:49.040
確認は一度だけでなく、停止と再開を何度か繰り返し、移動と復帰も含めて行うと、

34
00:02:49.040 --> 00:02:53.152
後始末の漏れに気付きやすくなります。

35
00:02:53.152 --> 00:02:55.138
依存配列の読み方です。

36
00:02:55.138 --> 00:03:01.094
角括弧のランニングは、再実行してよい回数を示すものではありません。

37
00:03:01.094 --> 00:03:05.968
エフェクトが参照する、変化に反応する値を示す宣言です。

38
00:03:05.968 --> 00:03:11.022
依存配列を省略すると、描画が確定するたびに実行されます。

39
00:03:11.022 --> 00:03:17.340
空の配列は、そのエフェクトが反応する値に依存していないことを示します。

40
00:03:17.340 --> 00:03:27.268
タイマーの例では、現在の値を受け取る関数形式で秒数を更新するため、セカンズ自体を依存配列へ追加せずに済みます。

41
00:03:27.268 --> 00:03:35.030
警告を消すためだけに必要な値を外すと、古い値を参照する原因になるので注意してください。

42
00:03:35.030 --> 00:03:40.445
依存配列は、エフェクトが外のどの変化に反応すべきかを、コード上で明示する場所だと理解すると、

43
00:03:40.445 --> 00:03:45.860
書き方で迷いにくくなります。

44
00:03:45.860 --> 00:03:48.909
開発時のストリクトモードにも注意します。

45
00:03:48.909 --> 00:03:56.226
ストリクトモードでは、問題を見つけるために、開始、後始末、再開始が追加で行われることがあります。

46
00:03:56.226 --> 00:04:02.629
そのため、空の依存配列を、必ず一度しか実行しない保証と考えるのは正確ではありません。

47
00:04:02.629 --> 00:04:10.098
大切なのは、タイマーやイベント購読が、何度開始と停止を繰り返しても整合するように設計することです。

48
00:04:10.098 --> 00:04:17.111
後始末を正しく書いておけば、追加実行でもタイマーは一つだけ残り、二重に進むことはありません。

49
00:04:17.111 --> 00:04:23.056
開発時だけの不具合に見えても、後始末の不足を示すサインとして受け止めましょう。

50
00:04:23.056 --> 00:04:31.440
後始末が正しければ、追加実行は不具合ではなく、設計の弱点を見つけるための検査として働いてくれることになります。

51
00:04:31.440 --> 00:04:34.049
次にブラウザーイベントの例です。

52
00:04:34.049 --> 00:04:38.614
ファイルはウィンドウウィドゥス・ティーエスエックスです。

53
00:04:38.614 --> 00:04:42.527
幅の状態は、数値またはヌルで、初期値はヌルです。

54
00:04:42.527 --> 00:04:49.700
エフェクトでは、まず現在の幅を測って状態へ入れ、リサイズイベントへ同じ関数を登録します。

55
00:04:49.700 --> 00:04:54.428
後始末では、登録したのと同じ関数を渡して購読を解除します。

56
00:04:54.428 --> 00:05:01.765
登録と解除で別の関数を渡すと解除できないため、関数を変数に入れて共有する書き方が重要です。

57
00:05:01.765 --> 00:05:06.085
スライドでは表示崩れを避けるため、元のテンプレート文字列を文字列の連結で表示していますが、

58
00:05:06.085 --> 00:05:10.406
意味は同じです。

59
00:05:10.406 --> 00:05:15.297
購読の解除を忘れると、画面を離れても処理が残り続け、戻るたびに登録が増えていくため、

60
00:05:15.297 --> 00:05:20.188
動作が次第に重くなる原因になります。

61
00:05:20.188 --> 00:05:22.207
エスエスアールでの注意点です。

62
00:05:22.207 --> 00:05:27.456
サーバーにはウィンドウが存在しないため、描画中に画面幅を読むことはできません。

63
00:05:27.456 --> 00:05:34.589
そこで幅の初期値をヌルにし、サーバーとブラウザーの最初の描画を、どちらも確認中という同じ表示にそろえます。

64
00:05:34.589 --> 00:05:39.030
その後、エフェクトでブラウザーの幅を読み取って表示を切り替えます。

65
00:05:39.030 --> 00:05:44.414
最初の表示がサーバーとブラウザーで食い違うと、表示のずれや警告の原因になります。

66
00:05:44.414 --> 00:05:52.893
また、単なる見た目の切り替えなら、ジャバスクリプトで幅を測る前に、シーエスエスのメディアクエリで実現できるかも確認しましょう。

67
00:05:52.893 --> 00:06:00.968
ブラウザーでしか得られない値は、描画中ではなくエフェクトで読み取る、という役割分担がエスエスアール対応の基本になります。

68
00:06:00.968 --> 00:06:02.377
通信の注意点です。

69
00:06:02.377 --> 00:06:08.637
エフェクト自体を非同期関数にすると、後始末の代わりにプロミスを返してしまいます。

70
00:06:08.637 --> 00:06:14.193
通信が必要なら、エフェクトの中で非同期関数を定義して呼び出し、後始末ではフラグを倒すなどして、

71
00:06:14.193 --> 00:06:19.749
終わった画面へ古い結果を反映しないようにします。

72
00:06:19.749 --> 00:06:23.819
中断にはアボートコントローラーを使う方法もあります。

73
00:06:23.819 --> 00:06:31.957
一方、購入や投稿など、利用者の操作に対応する処理は、通常はクリックや送信のイベントハンドラーに置きます。

74
00:06:31.957 --> 00:06:37.591
エフェクトを使う前に、何と同期する必要があるのかを必ず確認してください。

75
00:06:37.591 --> 00:06:41.974
通信結果が届く順序は保証されないため、古い結果で新しい表示を上書きしない工夫も、

76
00:06:41.974 --> 00:06:46.356
実務ではあわせて必要になります。

77
00:06:46.356 --> 00:06:48.127
アプリルーターで使う場合です。

78
00:06:48.127 --> 00:06:55.095
エフェクトを使う部品は、クライアントコンポーネントの境界内へ置き、境界ファイルの先頭でユーズクライアントを指定します。

79
00:06:55.095 --> 00:07:00.882
ただし、クライアントコンポーネントだからといって、エフェクトがサーバー上で動くわけではありません。

80
00:07:00.882 --> 00:07:04.661
エフェクトはあくまでブラウザーで描画が確定した後に実行されます。

81
00:07:04.661 --> 00:07:11.866
ページ全体を境界に入れる必要はなく、タイマーやイベントなど、ブラウザーと同期が必要な部品だけを境界内に寄せるのが基本です。

82
00:07:11.866 --> 00:07:15.290
サーバーで完結する表示は、サーバー側に残しておきましょう。

83
00:07:15.290 --> 00:07:21.904
境界を小さく保つほど、サーバー側で描画できる範囲が広がり、表示の速さや検索への対応でも有利になることがあります。

84
00:07:21.904 --> 00:07:24.821
最後に、エフェクトが必要かを見直します。

85
00:07:24.821 --> 00:07:32.258
プロップスや状態から計算できる表示値を、エフェクトで別の状態へコピーする必要がないか検討してください。

86
00:07:32.258 --> 00:07:37.654
外部との同期と、描画中にできる計算を分けるだけで、余分な更新を減らせます。

87
00:07:37.654 --> 00:07:44.217
確認では、タイマーやイベントについて、部品の取り外しと再表示でも重複しないことを試します。

88
00:07:44.217 --> 00:07:45.092
まとめです。

89
00:07:45.092 --> 00:07:51.946
開始と後始末を対にする、依存配列は参照する値の宣言として書く、最初の描画はサーバーとそろえる。

90
00:07:51.946 --> 00:07:56.029
この三点を押さえれば、ユーズエフェクトを安全に使えます。

91
00:07:56.029 --> 00:08:04.196
迷ったときは、何と同期するのか、後始末は何か、依存する値はどれか、の三つを書き出してから実装すると整理できます。