SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

redirectの使い方：サーバー側の条件で移動先を決めるの解説動画

再生時間 7:22動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

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

  1. 0:00こんにちは。
  2. 0:00今回は、リダイレクトの使い方です。
  3. 0:03古いページを開いたら新しいページへ自動で移動する、未ログインならログイン画面へ案内する。
  4. 0:11こうした移動を、サーバー側の判定で指示する方法を学びます。
  5. 0:15リダイレクトは、ネクスト・ナビゲーションから読み込む関数で、呼び出すとその場で移動の制御が発生します。
  6. 0:24条件によって移動先を変えられる点が特長ですが、入力値をそのまま移動先に使うと危険な場合もあります。
  7. 0:32仕組みと注意点を、順に整理していきます。
  8. 0:35画面上のリンクを押して移動するのとは違い、サーバーが処理の途中で判断して移動先を決められる点が、
  9. 0:40この関数の役割です。
  10. 0:45まず前提です。
  11. 0:46この記事の例は、ネクストジェイエス十五以降の非同期リクエストエーピーアイに合わせた書き方です。
  12. 0:52ネクストジェイエス十六では、キャッシュコンポーネンツを有効にしない構成を前提とします。
  13. 0:58タイプスクリプトは五・二以降で、利用するネクストジェイエスが対応するノードジェイエスを使います。
  14. 1:05配置先は、アプリ直下にレイアウト・ティーエスエックスを備えたアップルーターのプロジェクトです。
  15. 1:11ページズルーターとは配置先も実行場所も異なるため、プロジェクトのルーターとバージョンを先に確認してください。
  16. 1:19引数と戻り値を整理します。
  17. 1:21リダイレクトには、移動先のパスを引数として渡します。
  18. 1:25ただしこの関数は、通常の値を返して次の処理へ進む関数ではありません。
  19. 1:30呼び出した時点で、現在の描画を終了して移動させるための制御が発生します。
  20. 1:36そのため、リダイレクトの後に処理が続く前提でコードを書いてはいけません。
  21. 1:42また、任意のユーアールエルを渡せることと、渡してよいことは別です。
  22. 1:47外部の入力から移動先を組み立てる場合は、許可する移動先を限定することが欠かせません。
  23. 1:54合図を出す関数であり、戻り値で結果を受け取る関数ではない、と覚えてください。
  24. 2:00タイプスクリプトの型でも、この関数は決して戻らないことが表されています。
  25. 2:05呼び出しの後に書いた処理は、実行されないものとして扱ってください。
  26. 2:11記事のコードです。
  27. 2:12ファイルは、アプリ、レガシーというフォルダーのページ・ティーエスエックスです。
  28. 2:18最初にネクスト・スラッシュ・ナビゲーションからリダイレクトを読み込みます。
  29. 2:24コンポーネントの中では、引数にスラッシュ、つまりトップページのパスを渡してリダイレクトを呼び出すだけです。
  30. 2:32レガシーのページにアクセスすると、トップへ移動します。
  31. 2:36この例は固定された内部ユーアールエルへ移動するため、ユーザー入力から転送先を組み立てていません。
  32. 2:43安全な基本形として、まずはこの形を押さえてください。
  33. 2:47処理の順序も確認しておきましょう。
  34. 2:50リダイレクトが呼ばれた時点でこのページの描画は終了し、残りの処理へは進みません。
  35. 2:56サーバー側の条件で移動先を決める例です。
  36. 2:59移動先の候補は、デスティネーションズという許可リストにあらかじめ固定しておきます。
  37. 3:04検索パラメーターのティーオーが文字列ならその値をキーとして使い、そうでなければホームを既定値にします。
  38. 3:11許可リストにキーがあればその移動先を、なければトップページを選び、最後にリダイレクトを呼びます。
  39. 3:18入力値をそのまま移動先にせず、必ず許可リストを通すのがポイントです。
  40. 3:23スライドでは、検索パラメーターをプロップスから受け取る形で示しています。
  41. 3:28この形なら、検索パラメーターに外部のユーアールエルがそのまま入ってきても、
  42. 3:32許可リストに載っていないため移動先にはなりません。
  43. 3:36実行結果と処理の順序です。
  44. 3:38画面のコードは、移動先を選ぶ部分だけを純粋なロジックに切り出したものです。
  45. 3:44キーがガイドならスラッシュガイド、ホームならトップページが選ばれます。
  46. 3:49許可リストにない値、たとえば外部サイトを思わせる文字列や空文字が来ても、
  47. 3:54トップページへ落ちるため、意図しない場所へは移動しません。
  48. 3:59条件判定を先に終えてからリダイレクトを呼ぶ順序も大切です。
  49. 4:03移動先が決まる前に合図を出してしまうと、判定そのものが届かなくなります。
  50. 4:09移動の応答についてです。
  51. 4:11通常のサーバー応答では三百七番、サーバーアクションでは三百三番が使われます。
  52. 4:16さらに、ストリーミング中はメタタグによる移動になる場合があり、常に同じエイチティーティーピー応答になると決めつけないようにします。
  53. 4:25恒久的な移転の場合は、パーマネントリダイレクトや、ウェブサーバーの転送規則との違いを整理してください。
  54. 4:33一時的な移動と恒久的な移転では、検索エンジンやブラウザーの扱いも変わります。
  55. 4:38開発者ツールで、実際の移動先と応答番号を確認する習慣をつけましょう。
  56. 4:43移動が一時的なのか恒久的なのかを曖昧にすると、後から転送ルールを見直すときに混乱します。
  57. 4:49用途ごとに使い分ける方針を、設計の段階で決めておきましょう。
  58. 4:54つまずきやすい点です。
  59. 4:56処理の失敗を捕捉するトライの中でリダイレクトを呼ぶと、遷移のための制御までキャッチしてしまう可能性があります。
  60. 5:05移動の合図は例外に近い仕組みで届くため、通常のエラーと同じ網にかかってしまうのです。
  61. 5:12対策はシンプルで、保存処理などのエラー処理を先に終えてから、トライキャッチの外でリダイレクトを呼びます。
  62. 5:21エラー処理のまとまりと、移動の合図を分けて書くことで、意図しない飲み込みを防げます。
  63. 5:28呼び出し位置がそのまま処理の境目になる、という意識が大切です。
  64. 5:33セキュリティの注意点です。
  65. 5:35未ログインならログイン画面へ移動させる設計でも、それだけで守りが完成するわけではありません。
  66. 5:41データの取得や更新を行う処理側でも、認証と認可の確認は必要です。
  67. 5:46移動はあくまで案内であり、権限の検査そのものではありません。
  68. 5:50また、ログイン後に元のページへ戻すリターントゥーのような外部入力を使う場合は、
  69. 5:54許可する移動先を限定してください。
  70. 5:58自由に移動先を指定できると、利用者を外部の悪意あるサイトへ送る踏み台にされる恐れがあります。
  71. 6:04静的出力との関係と確認課題です。
  72. 6:06静的ファイルだけの配信では、リクエストごとのサーバー判定やエイチティーティーピー転送を、
  73. 6:11この関数に任せることはできません。
  74. 6:15静的サイトの旧ユーアールエルの転送は、公開ウェブサーバーやホスティングの転送ルールとして設計します。
  75. 6:22確認では、開発者ツールで移動先と応答を見てください。
  76. 6:26開発サーバーだけでなく、本番用ビルドと公開先でも確認し、ユーアールエルを直接開く場合と画面内のリンクから遷移する場合、
  77. 6:33値がない場合と不正な値の場合を分けて試すと、入力の問題が見つかります。
  78. 6:39特に、不正な値を入れたときに意図しない外部サイトへ移動しないかは、公開前に必ず確かめてください。
  79. 6:46まとめです。
  80. 6:47リダイレクトは、サーバー側の条件に応じて移動先を決め、現在の描画を終えて移動させる合図です。
  81. 6:53戻り値を期待せず、条件判定を終えてから呼び出す形が基本です。
  82. 6:57移動先は固定値か許可リストから選び、外部入力をそのまま使わないこと、トライキャッチの中で飲み込まないこと、
  83. 7:03認証や認可の代わりにしないことを押さえてください。
  84. 7:08応答番号は通常三百七番、サーバーアクションでは三百三番で、静的配信ではホスティング側の転送ルールを使います。
  85. 7:16これでリダイレクトは完了です。
  86. 7:18お疲れさまでした。
  87. 7:19次回はユーズパラムズを学びます。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

redirectでサーバー側からページ遷移を指示する方法を学びます。例外による制御、HTTPステータス、入力値を移動先へ使う際の注意点を解説します。

解説記事・サンプルコードを読む：redirectの使い方：サーバー側の条件で移動先を決める →