WEBVTT

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

2
00:00:00.998 --> 00:00:03.825
今回は、リダイレクトの使い方です。

3
00:00:03.825 --> 00:00:11.143
古いページを開いたら新しいページへ自動で移動する、未ログインならログイン画面へ案内する。

4
00:00:11.143 --> 00:00:15.966
こうした移動を、サーバー側の判定で指示する方法を学びます。

5
00:00:15.966 --> 00:00:24.449
リダイレクトは、ネクスト・ナビゲーションから読み込む関数で、呼び出すとその場で移動の制御が発生します。

6
00:00:24.449 --> 00:00:32.598
条件によって移動先を変えられる点が特長ですが、入力値をそのまま移動先に使うと危険な場合もあります。

7
00:00:32.598 --> 00:00:35.925
仕組みと注意点を、順に整理していきます。

8
00:00:35.925 --> 00:00:40.748
画面上のリンクを押して移動するのとは違い、サーバーが処理の途中で判断して移動先を決められる点が、

9
00:00:40.748 --> 00:00:45.571
この関数の役割です。

10
00:00:45.571 --> 00:00:46.531
まず前提です。

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

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

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

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

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

16
00:01:19.295 --> 00:01:21.355
引数と戻り値を整理します。

17
00:01:21.355 --> 00:01:25.474
リダイレクトには、移動先のパスを引数として渡します。

18
00:01:25.474 --> 00:01:30.860
ただしこの関数は、通常の値を返して次の処理へ進む関数ではありません。

19
00:01:30.860 --> 00:01:36.563
呼び出した時点で、現在の描画を終了して移動させるための制御が発生します。

20
00:01:36.563 --> 00:01:42.267
そのため、リダイレクトの後に処理が続く前提でコードを書いてはいけません。

21
00:01:42.267 --> 00:01:47.495
また、任意のユーアールエルを渡せることと、渡してよいことは別です。

22
00:01:47.495 --> 00:01:54.149
外部の入力から移動先を組み立てる場合は、許可する移動先を限定することが欠かせません。

23
00:01:54.149 --> 00:02:00.169
合図を出す関数であり、戻り値で結果を受け取る関数ではない、と覚えてください。

24
00:02:00.169 --> 00:02:05.872
タイプスクリプトの型でも、この関数は決して戻らないことが表されています。

25
00:02:05.872 --> 00:02:11.100
呼び出しの後に書いた処理は、実行されないものとして扱ってください。

26
00:02:11.100 --> 00:02:12.480
記事のコードです。

27
00:02:12.480 --> 00:02:18.460
ファイルは、アプリ、レガシーというフォルダーのページ・ティーエスエックスです。

28
00:02:18.460 --> 00:02:24.134
最初にネクスト・スラッシュ・ナビゲーションからリダイレクトを読み込みます。

29
00:02:24.134 --> 00:02:32.261
コンポーネントの中では、引数にスラッシュ、つまりトップページのパスを渡してリダイレクトを呼び出すだけです。

30
00:02:32.261 --> 00:02:36.401
レガシーのページにアクセスすると、トップへ移動します。

31
00:02:36.401 --> 00:02:43.761
この例は固定された内部ユーアールエルへ移動するため、ユーザー入力から転送先を組み立てていません。

32
00:02:43.761 --> 00:02:47.748
安全な基本形として、まずはこの形を押さえてください。

33
00:02:47.748 --> 00:02:50.354
処理の順序も確認しておきましょう。

34
00:02:50.354 --> 00:02:56.488
リダイレクトが呼ばれた時点でこのページの描画は終了し、残りの処理へは進みません。

35
00:02:56.488 --> 00:02:59.248
サーバー側の条件で移動先を決める例です。

36
00:02:59.248 --> 00:03:04.907
移動先の候補は、デスティネーションズという許可リストにあらかじめ固定しておきます。

37
00:03:04.907 --> 00:03:11.946
検索パラメーターのティーオーが文字列ならその値をキーとして使い、そうでなければホームを既定値にします。

38
00:03:11.946 --> 00:03:18.570
許可リストにキーがあればその移動先を、なければトップページを選び、最後にリダイレクトを呼びます。

39
00:03:18.570 --> 00:03:23.263
入力値をそのまま移動先にせず、必ず許可リストを通すのがポイントです。

40
00:03:23.263 --> 00:03:28.231
スライドでは、検索パラメーターをプロップスから受け取る形で示しています。

41
00:03:28.231 --> 00:03:32.510
この形なら、検索パラメーターに外部のユーアールエルがそのまま入ってきても、

42
00:03:32.510 --> 00:03:36.788
許可リストに載っていないため移動先にはなりません。

43
00:03:36.788 --> 00:03:38.757
実行結果と処理の順序です。

44
00:03:38.757 --> 00:03:44.363
画面のコードは、移動先を選ぶ部分だけを純粋なロジックに切り出したものです。

45
00:03:44.363 --> 00:03:49.665
キーがガイドならスラッシュガイド、ホームならトップページが選ばれます。

46
00:03:49.665 --> 00:03:54.589
許可リストにない値、たとえば外部サイトを思わせる文字列や空文字が来ても、

47
00:03:54.589 --> 00:03:59.513
トップページへ落ちるため、意図しない場所へは移動しません。

48
00:03:59.513 --> 00:04:03.906
条件判定を先に終えてからリダイレクトを呼ぶ順序も大切です。

49
00:04:03.906 --> 00:04:09.360
移動先が決まる前に合図を出してしまうと、判定そのものが届かなくなります。

50
00:04:09.360 --> 00:04:11.089
移動の応答についてです。

51
00:04:11.089 --> 00:04:16.563
通常のサーバー応答では三百七番、サーバーアクションでは三百三番が使われます。

52
00:04:16.563 --> 00:04:25.927
さらに、ストリーミング中はメタタグによる移動になる場合があり、常に同じエイチティーティーピー応答になると決めつけないようにします。

53
00:04:25.927 --> 00:04:33.274
恒久的な移転の場合は、パーマネントリダイレクトや、ウェブサーバーの転送規則との違いを整理してください。

54
00:04:33.274 --> 00:04:38.748
一時的な移動と恒久的な移転では、検索エンジンやブラウザーの扱いも変わります。

55
00:04:38.748 --> 00:04:43.646
開発者ツールで、実際の移動先と応答番号を確認する習慣をつけましょう。

56
00:04:43.646 --> 00:04:49.985
移動が一時的なのか恒久的なのかを曖昧にすると、後から転送ルールを見直すときに混乱します。

57
00:04:49.985 --> 00:04:54.307
用途ごとに使い分ける方針を、設計の段階で決めておきましょう。

58
00:04:54.307 --> 00:04:56.152
つまずきやすい点です。

59
00:04:56.152 --> 00:05:05.375
処理の失敗を捕捉するトライの中でリダイレクトを呼ぶと、遷移のための制御までキャッチしてしまう可能性があります。

60
00:05:05.375 --> 00:05:12.418
移動の合図は例外に近い仕組みで届くため、通常のエラーと同じ網にかかってしまうのです。

61
00:05:12.418 --> 00:05:21.138
対策はシンプルで、保存処理などのエラー処理を先に終えてから、トライキャッチの外でリダイレクトを呼びます。

62
00:05:21.138 --> 00:05:28.181
エラー処理のまとまりと、移動の合図を分けて書くことで、意図しない飲み込みを防げます。

63
00:05:28.181 --> 00:05:33.380
呼び出し位置がそのまま処理の境目になる、という意識が大切です。

64
00:05:33.380 --> 00:05:35.193
セキュリティの注意点です。

65
00:05:35.193 --> 00:05:41.610
未ログインならログイン画面へ移動させる設計でも、それだけで守りが完成するわけではありません。

66
00:05:41.610 --> 00:05:46.074
データの取得や更新を行う処理側でも、認証と認可の確認は必要です。

67
00:05:46.074 --> 00:05:50.259
移動はあくまで案内であり、権限の検査そのものではありません。

68
00:05:50.259 --> 00:05:54.165
また、ログイン後に元のページへ戻すリターントゥーのような外部入力を使う場合は、

69
00:05:54.165 --> 00:05:58.071
許可する移動先を限定してください。

70
00:05:58.071 --> 00:06:04.488
自由に移動先を指定できると、利用者を外部の悪意あるサイトへ送る踏み台にされる恐れがあります。

71
00:06:04.488 --> 00:06:06.771
静的出力との関係と確認課題です。

72
00:06:06.771 --> 00:06:11.124
静的ファイルだけの配信では、リクエストごとのサーバー判定やエイチティーティーピー転送を、

73
00:06:11.124 --> 00:06:15.477
この関数に任せることはできません。

74
00:06:15.477 --> 00:06:22.612
静的サイトの旧ユーアールエルの転送は、公開ウェブサーバーやホスティングの転送ルールとして設計します。

75
00:06:22.612 --> 00:06:26.323
確認では、開発者ツールで移動先と応答を見てください。

76
00:06:26.323 --> 00:06:33.030
開発サーバーだけでなく、本番用ビルドと公開先でも確認し、ユーアールエルを直接開く場合と画面内のリンクから遷移する場合、

77
00:06:33.030 --> 00:06:39.738
値がない場合と不正な値の場合を分けて試すと、入力の問題が見つかります。

78
00:06:39.738 --> 00:06:46.588
特に、不正な値を入れたときに意図しない外部サイトへ移動しないかは、公開前に必ず確かめてください。

79
00:06:46.588 --> 00:06:47.420
まとめです。

80
00:06:47.420 --> 00:06:53.797
リダイレクトは、サーバー側の条件に応じて移動先を決め、現在の描画を終えて移動させる合図です。

81
00:06:53.797 --> 00:06:57.956
戻り値を期待せず、条件判定を終えてから呼び出す形が基本です。

82
00:06:57.956 --> 00:07:03.362
移動先は固定値か許可リストから選び、外部入力をそのまま使わないこと、トライキャッチの中で飲み込まないこと、

83
00:07:03.362 --> 00:07:08.769
認証や認可の代わりにしないことを押さえてください。

84
00:07:08.769 --> 00:07:16.255
応答番号は通常三百七番、サーバーアクションでは三百三番で、静的配信ではホスティング側の転送ルールを使います。

85
00:07:16.255 --> 00:07:18.334
これでリダイレクトは完了です。

86
00:07:18.334 --> 00:07:19.582
お疲れさまでした。

87
00:07:19.582 --> 00:07:21.800
次回はユーズパラムズを学びます。