WEBVTT

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

2
00:00:00.919 --> 00:00:03.675
今回は、ユースルーターの使い方です。

3
00:00:03.675 --> 00:00:09.493
ボタンが押されたときなど、プログラム側から画面遷移を指示する方法を学びます。

4
00:00:09.493 --> 00:00:16.230
これまで学んだユースパラムス、ユースサーチパラムス、ユースパスネームがユーアールエルを読むためのフックだったのに対して、

5
00:00:16.230 --> 00:00:22.967
ユースルーターはユーアールエルを動かすためのフックです。

6
00:00:22.967 --> 00:00:27.407
履歴を追加するプッシュ、現在の履歴を置き換えるリプレース、前に戻るバック、

7
00:00:27.407 --> 00:00:31.847
そしてサーバー表示を取り直すリフレッシュ。

8
00:00:31.847 --> 00:00:35.062
この四つの役割の違いが今回のポイントです。

9
00:00:35.062 --> 00:00:38.125
リンクとの使い分けも合わせて押さえます。

10
00:00:38.125 --> 00:00:46.852
この回では、記事にある四つのボタンの例を読み解きながら、それぞれの操作が履歴にどう残るかを具体的に比べていきます。

11
00:00:46.852 --> 00:00:47.805
まず前提です。

12
00:00:47.805 --> 00:00:54.206
この記事の例は、ネクストジェイエス十五以降の非同期リクエストエーピーアイに合わせた書き方です。

13
00:00:54.206 --> 00:01:00.063
ネクストジェイエス十六では、キャッシュコンポーネンツを有効にしない構成を前提とします。

14
00:01:00.063 --> 00:01:06.600
タイプスクリプトは五・二以降で、利用するネクストジェイエスが対応するノードジェイエスを使います。

15
00:01:06.600 --> 00:01:13.001
配置先は、アプリ直下にレイアウト・ティーエスエックスを備えたアップルーターのプロジェクトです。

16
00:01:13.001 --> 00:01:20.355
ページズルーターとは配置先も実行場所も異なるため、プロジェクトのルーターとバージョンを先に確認してください。

17
00:01:20.355 --> 00:01:23.624
ユースルーターはクライアント側で動くフックです。

18
00:01:23.624 --> 00:01:25.766
戻り値の考え方を整理します。

19
00:01:25.766 --> 00:01:30.356
ネクスト・スラッシュ・ナビゲーションのユースルーターを引数なしで呼ぶと、

20
00:01:30.356 --> 00:01:34.946
画面遷移を操作するためのオブジェクトが返ります。

21
00:01:34.946 --> 00:01:36.935
中心になる操作は四つです。

22
00:01:36.935 --> 00:01:39.995
プッシュは履歴を一つ追加して移動します。

23
00:01:39.995 --> 00:01:46.880
リプレースは現在の履歴を置き換えて移動するため、戻る操作で置き換え前の画面には戻りません。

24
00:01:46.880 --> 00:01:50.247
バックはブラウザーの履歴を一つ前に戻します。

25
00:01:50.247 --> 00:01:55.296
リフレッシュは移動せず、現在のルートのサーバー表示を取り直します。

26
00:01:55.296 --> 00:02:02.028
移動するのか、履歴をどう扱うのか、表示だけを更新するのか、という観点で選ぶと迷いません。

27
00:02:02.028 --> 00:02:10.596
なお、これらの操作はいずれもブラウザー側で動くため、呼び出す側はクライアントコンポーネントである必要があります。

28
00:02:10.596 --> 00:02:12.385
記事のコードの前半です。

29
00:02:12.385 --> 00:02:18.945
ファイルは、アプリ、ナビゲーションデモというフォルダーのページ・ティーエスエックスです。

30
00:02:18.945 --> 00:02:28.935
先頭にユースクライアントと書いてクライアントコンポーネントにし、ネクスト・スラッシュ・ナビゲーションからユースルーターを読み込みます。

31
00:02:28.935 --> 00:02:36.539
ユースルーターを呼んで得たルーターオブジェクトを定数に入れ、ボタンのクリックでメソッドを呼び出します。

32
00:02:36.539 --> 00:02:42.205
最初のボタンはプッシュで、行き先にクエリ付きのユーアールエルを渡しています。

33
00:02:42.205 --> 00:02:48.616
読み込み先がネクスト・スラッシュ・ルーターではなく、ナビゲーションである点が重要です。

34
00:02:48.616 --> 00:02:51.480
コードの後半、残り三つのボタンです。

35
00:02:51.480 --> 00:02:55.775
二つ目はリプレースで、クエリのないユーアールエルへ現在の履歴を置き換えて移動し、

36
00:02:55.775 --> 00:03:00.071
表示条件を解除する想定です。

37
00:03:00.071 --> 00:03:04.207
三つ目はバックで、引数なしで履歴を一つ前に戻します。

38
00:03:04.207 --> 00:03:10.411
四つ目はリフレッシュで、移動はせず、現在のルートのサーバー表示を取り直します。

39
00:03:10.411 --> 00:03:18.048
プッシュしたあとにバックを押せば元の画面へ戻れますが、リプレースしたあとでは戻り先が変わります。

40
00:03:18.048 --> 00:03:23.139
この履歴の違いこそが、プッシュとリプレースを使い分ける理由です。

41
00:03:23.139 --> 00:03:27.116
四つのボタンが、そのまま操作の比較になっています。

42
00:03:27.116 --> 00:03:28.791
実行結果と使い分けです。

43
00:03:28.791 --> 00:03:32.700
詳細ボタンを押すと、ユーアールエルのクエリが変わります。

44
00:03:32.700 --> 00:03:38.283
ただしこの例はユーアールエル操作だけを示しているため、本文の内容は同じままです。

45
00:03:38.283 --> 00:03:42.471
ユーアールエルと画面を連動させたい場合は、これまでに学んだユースサーチパラムスなどで値を読み、

46
00:03:42.471 --> 00:03:46.659
表示を切り替えてください。

47
00:03:46.659 --> 00:03:49.730
もう一つ大切なのが、リンクとの役割分担です。

48
00:03:49.730 --> 00:03:56.570
通常の画面遷移はリンクコンポーネントを使い、フォーム送信後の移動やボタン操作のように、

49
00:03:56.570 --> 00:04:03.410
処理と結び付いた移動のときにルーターを使うと、新しいタブで開くなど、リンクとしての操作性を保ちやすくなります。

50
00:04:03.410 --> 00:04:11.088
逆に、行き先が固定された案内リンクまでルーターで実装してしまうと、ブラウザー標準のリンク操作が失われがちです。

51
00:04:11.088 --> 00:04:15.600
プッシュとリプレースの違いを、履歴の並びで確かめます。

52
00:04:15.600 --> 00:04:19.861
画面エーにいるときにプッシュで画面ビーへ移ると、履歴はエー、ビーの順に積まれ、

53
00:04:19.861 --> 00:04:24.123
バックでエーへ戻れます。

54
00:04:24.123 --> 00:04:29.554
ここでビーからリプレースで画面シーへ移ると、履歴の中のビーがシーに置き換わるため、

55
00:04:29.554 --> 00:04:34.985
バックの行き先はエーになり、ビーには戻りません。

56
00:04:34.985 --> 00:04:40.583
一時的な条件付きの画面や、戻す意味のない中間画面ではリプレースを、たどってきた経路を残したい通常の移動ではプッシュを、

57
00:04:40.583 --> 00:04:46.182
と使い分けます。

58
00:04:46.182 --> 00:04:51.028
この違いは、手元で実際に操作して確かめるのが一番確実です。

59
00:04:51.028 --> 00:04:53.038
ページズルーターとの違いです。

60
00:04:53.038 --> 00:04:56.523
ページズルーターで使っていたネクスト・スラッシュ・ルーターのユースルーターとは、

61
00:04:56.523 --> 00:05:00.007
名前は同じでも別物です。

62
00:05:00.007 --> 00:05:04.832
アップルーターではネクスト・スラッシュ・ナビゲーションから読み込みます。

63
00:05:04.832 --> 00:05:11.800
さらに、ページズルーター側にあったクエリやパスネームといった値が、同じ形で取得できるわけではありません。

64
00:05:11.800 --> 00:05:16.424
アップルーターでは、動的ルートの値はユースパラムス、パスはユースパスネーム、

65
00:05:16.424 --> 00:05:21.048
検索条件はユースサーチパラムスと、役割ごとのフックで読みます。

66
00:05:21.048 --> 00:05:24.800
ユースルーターは操作専用と割り切ると、設計がぶれません。

67
00:05:24.800 --> 00:05:27.693
リフレッシュの注意と、移動先の検証です。

68
00:05:27.693 --> 00:05:37.529
リフレッシュは現在のルートのサーバー表示を取り直す操作ですが、サーバー側に保存されたデータキャッシュをすべて破棄する命令ではありません。

69
00:05:37.529 --> 00:05:42.592
古い表示が残る問題を、リフレッシュだけで解決しようとしないでください。

70
00:05:42.592 --> 00:05:44.183
もう一つは安全面です。

71
00:05:44.183 --> 00:05:50.693
未検証の外部入力をそのままプッシュへ渡すと、意図しない危険なユーアールエルへ遷移し得ます。

72
00:05:50.693 --> 00:05:55.900
移動先は、許可したパスの一覧と照合するなど、検証してから渡してください。

73
00:05:55.900 --> 00:05:59.661
利用者の入力をそのまま行き先にしないことが原則です。

74
00:05:59.661 --> 00:06:04.000
たとえば、行き先の候補をあらかじめ一覧に用意しておき、入力がその中に含まれる場合だけプッシュする、

75
00:06:04.000 --> 00:06:08.340
といった形が基本です。

76
00:06:08.340 --> 00:06:10.390
静的出力と確認課題です。

77
00:06:10.390 --> 00:06:15.004
ブラウザーでの処理自体は、静的サイトでも利用できます。

78
00:06:15.004 --> 00:06:26.110
ただし、遷移先のページは事前に生成されている必要があり、クライアントでの操作がサーバー機能や認可の代わりになるわけではありません。

79
00:06:26.110 --> 00:06:31.065
確認課題として、プッシュしたあとに戻る操作を試し、リプレースしたときとの履歴の違いを、

80
00:06:31.065 --> 00:06:36.020
自分の言葉で説明してください。

81
00:06:36.020 --> 00:06:42.683
別サイトから直接開いた場合、バックは自サイト内へ戻る保証がない点も確認します。

82
00:06:42.683 --> 00:06:51.568
開発サーバーだけでなく、本番用ビルドと公開先でも、直接開く場合とリンクから移る場合を分けて試しましょう。

83
00:06:51.568 --> 00:06:52.420
まとめです。

84
00:06:52.420 --> 00:06:57.816
ユースルーターは、アップルーターで画面遷移を操作するためのフックで、クライアントコンポーネントの中で、

85
00:06:57.816 --> 00:07:03.212
ネクスト・スラッシュ・ナビゲーションから使います。

86
00:07:03.212 --> 00:07:07.401
プッシュは履歴を追加し、リプレースは現在の履歴を置き換え、バックは前に戻り、

87
00:07:07.401 --> 00:07:11.590
リフレッシュはサーバー表示を取り直します。

88
00:07:11.590 --> 00:07:15.495
通常の遷移はリンク、処理と結び付いた移動はルーター、という分担を基本にし、

89
00:07:15.495 --> 00:07:19.400
移動先は検証してから渡してください。

90
00:07:19.400 --> 00:07:21.672
これでユースルーターは完了です。

91
00:07:21.672 --> 00:07:22.950
お疲れさまでした。

92
00:07:22.950 --> 00:07:25.790
次回はジェネレートメタデータを学びます。

93
00:07:25.790 --> 00:07:32.180
四つの操作の違いは、実際にボタンを押して履歴の動きを確かめてみると、短時間で身に付きます。