「リダイレクト」は「ユーザーを別のURLに連れて行くこと」
まず言葉の整理からいきます。
リダイレクト（redirect） は、ざっくり言うと
「今このページを見ているユーザーを、別の URL に自動的に移動させること」
です。
ログインしていなかったらログインページへ飛ばす
古い URL にアクセスされたら新しい URL に移動させる
処理が終わったら完了画面に移動させる
こういう「ページの移動をコードで制御したい」ときに、
JavaScript からリダイレクトを行います。
ここでは、クライアント側（JavaScript）でのリダイレクト に絞って話します。
一番基本：location.href を書き換えるリダイレクト
location.href に代入すると「普通の遷移」と同じ
一番シンプルなリダイレクトはこれです。
location.href = "https://example.com/login";
これは、ユーザーがリンクをクリックしたのと同じで、
「履歴に残る普通のページ遷移」 です。
戻るボタンを押せば、元のページに戻れます。
例えば、「ログインしていなければログインページへ飛ばす」ならこう書けます。
function requireLogin(isLoggedIn) {
if (!isLoggedIn) {
location.href = "/login";
}
}
requireLogin(false);
ここで重要なのは、
location.href に代入した瞬間、そのページの JavaScript の処理は基本的に「そこで終わる」
→ その後のコードは実行されないと思っておくのが安全
という感覚です。
相対パスも使える
location.href には絶対 URL だけでなく、相対パスも指定できます。
location.href = "/dashboard";
location.href = "../top";
今のサイト内での移動なら、
相対パスで書くことが多いです。
履歴を残さないリダイレクト：location.replace
replace は「今のページを履歴から消してから移動」
location.replace は、
「今のページを履歴から上書きして、別の URL に移動する」 メソッドです。
location.replace("https://example.com/home");
これを使うと、
ユーザーが戻るボタンを押しても、
元のページには戻れません。
例えば、
ログインフォームでログイン成功
→ /login には戻ってきてほしくない
→ /dashboard に移動したあと、戻るを押しても /login に戻らないでほしい
という場面でよく使われます。
同じことを href でやるとこうなります。
location.href = "/dashboard"; // 戻ると /login に戻れる
location.replace("/dashboard"); // 戻ると /login には戻れない
「戻るで戻れるかどうか」 が、href と replace の大きな違いです。
ページを再読み込みする：location.reload
リダイレクトではないけれど「今のURLにもう一度行く」
location.reload() は、
「今のページをもう一度読み込み直す」 メソッドです。
location.reload(); // 通常のリロード
location.reload(true); // （古い仕様）キャッシュ無視を要求
これは別の URL に移動するわけではないので、
厳密には「リダイレクト」ではありませんが、
「状態をリセットしたい」
「最新の内容をもう一度取りに行きたい」
といったときに使われます。
ただし、フォーム送信直後のページで reload すると、
「フォームを再送信しますか？」と聞かれたりするので、
使いどころは慎重に考える必要があります。
setTimeout と組み合わせた「数秒後にリダイレクト」
「3秒後にトップページへ戻ります」のような動き
よくあるパターンとして、
「メッセージを表示してから、数秒後に自動で別ページへ移動する」
というものがあります。
document.body.textContent = "完了しました。3秒後にトップページへ移動します。";
setTimeout(() => {
location.href = "/";
}, 3000);
ここでは、
ユーザーにメッセージを見せる時間を確保する
その後、自動的にリダイレクトする
という「時間を挟んだリダイレクト」をしています。
このときも、replace を使えば「戻るで戻れないリダイレクト」にできます。
setTimeout(() => {
location.replace("/");
}, 3000);
SPA（シングルページアプリ）と「リダイレクト風」の動き
本当のリダイレクトではなく「URL だけ変える」パターン
React や Vue などの SPA では、
ページ全体をリロードせずに画面を切り替えます。
このとき、location.href でリダイレクトしてしまうと、
ページが丸ごとリロードされてしまいます。
そこで使われるのが history.pushState / replaceState です。
history.pushState({ page: "dashboard" }, "", "/dashboard");
// ここで自分で UI を書き換える
これは、
アドレスバーの URL は変わる
でもページのリロードは起きない
画面の中身は JavaScript が差し替える
という「リダイレクト風」の動きです。
初心者の段階では、
「SPA のルーティングは history API を使って URL を変えている」
くらいの理解で十分です。
本当のリダイレクト（location.href / replace） は、
「ページを丸ごと別の URL に移動させる」動きだと押さえておきましょう。
クライアントリダイレクトとサーバーリダイレクトの違い
JavaScript でやるのは「クライアント側リダイレクト」
ここまで話してきたのは、
すべて JavaScript から行う「クライアント側リダイレクト」です。
ユーザーのブラウザ上で、
location.href / replace を書き換える
→ ブラウザがその URL に行く
という流れです。
サーバー側リダイレクト（HTTP 3xx）は別物
一方で、サーバー側でもリダイレクトができます。
HTTP の 301 / 302 などのステータスコードを返すやつです。
ユーザーが /old にアクセス
→ サーバーが「/new に移動して」とレスポンス
→ ブラウザが自動的に /new を開く
という流れになります。
サーバー側リダイレクトは、
「URL の設計」「SEO」「ブックマークの更新」などに関わる話で、
JavaScript からは直接触りません。
初心者としては、
クライアント側：location.href / replace（今話しているやつ）
サーバー側：HTTP 3xx（バックエンドの話）
と分けて考えておけば十分です。
初心者として「リダイレクト」で本当に掴んでほしいこと
リダイレクトは「ユーザーを別の URL に自動で連れて行くこと」
location.href に代入すると「履歴に残る普通の遷移」になる
location.replace は「履歴を上書きする遷移」で、戻るボタンで戻れなくなる
setTimeout と組み合わせると「数秒後にリダイレクト」が簡単に書ける
SPA では history API で「リダイレクト風」に URL を変え、ページリロードはしない
まずはブラウザのコンソールで、
自分のサイトやローカル環境でこう試してみてください。
location.href = "/"; // 普通の遷移
// location.replace("/"); // 戻れない遷移（試すときは注意）
「戻るボタンを押したときの挙動の違い」を、
自分の手で一度体験しておくと、
リダイレクトの設計をするときの感覚がぐっとクリアになります。