【JavaScript】リダイレクト方法を初心者向けにわかりやすく解説

フロントエンド開発•
JavaScript

はじめに

JavaScriptを使ったリダイレクトは、Webアプリケーションやサイトの画面遷移をコントロールするうえで欠かせない機能です。
ページを開いた瞬間に別のページへ誘導したり、ユーザーがボタンをクリックしたときに条件付きでリダイレクトしたりと、さまざまな場面で使われます。

実務の観点でも、エラー時に特定のページへ飛ばすときや、ログイン認証後にダッシュボードへ誘導するときなど、柔軟な動きが求められるタイミングは多いのではないでしょうか。
とはいえ、リダイレクト方法が複数あるため、どれを使えばよいのか悩むこともあるかもしれません。

そこで本記事では、JavaScript リダイレクトの意味や具体的な方法、注意点などを初めてプログラミングを学ぶ方でも理解できるように解説します。
location.hrefやlocation.replace、location.assignなどの書き方や使い分けも紹介しつつ、実際のコード例も掲載するので、ぜひ参考にしてみてください。

さらに、リダイレクトにおけるSEOやセキュリティ面への影響、単一ページで構成されるSPAとの相性など、実務や応用で役立つ話題も取り上げます。
初心者の方でも段階的に理解できるよう、やさしく書いていきますので安心してください。

ここまでの内容を読んで、「いろいろな使い方があるんだな」と思った方もいるでしょう。
しかし、実際にコードを書いてみないとイメージがつかみにくい部分もあるはずです。

次のセクションでは、この記事全体を通してどんな知識が得られるのかをまとめます。
全体像を把握してから読み進めると、ポイントを押さえやすくなりますよ。

この記事を読むとわかること

  • JavaScriptでリダイレクトを行う基本的な方法
  • location.href、location.replace、location.assignの違い
  • リダイレクトを実務で活用する際の具体的なケース
  • SEOやセキュリティにおけるリダイレクトの考え方

これらを順を追って解説していきます。
リダイレクト手法を覚えることで、よりスムーズな画面遷移を実装できるようになります。

JavaScriptでリダイレクトする目的

JavaScriptでリダイレクトを行う目的は、大きく分けていくつか考えられます。
まず、ユーザー体験を向上させるために、状況に応じて自動的に別のページへ遷移させるケースがあります。たとえば、フォーム送信後にサンクスページへ移動させたり、エラーが発生したときにエラーページへ誘導したりするときに便利です。

また、サーバー側の処理だけではカバーしにくい、リアルタイムな判定が必要なときにJavaScriptのリダイレクトが役立ちます。
たとえば、クライアントのブラウザ情報をチェックして、モバイル端末からアクセスされたらスマホ用ページに切り替えるといった処理を実装する場合があるでしょう。

さらには、クッキーやセッションストレージの情報を元にリダイレクトを行うこともあります。
たとえば、「一度ログイン済みのユーザーは、もう一度ログインページを通さずにダッシュボードへ飛ばす」というような流れが挙げられます。もしサーバーサイドとの連携が複雑な場合でも、フロントエンド側でコードを書くことによって、必要に応じた遷移を実現できるわけです。

単なるページ移動の手段と侮るなかれ。
リダイレクトの書き方ひとつで、見た目の操作感やサイトの信頼感にも影響が及びます。余計なページ読み込みを挟んでしまうと、ユーザーは「時間がかかるな」と感じやすくなるでしょう。よりスムーズに処理するには、どういうタイミングでリダイレクトすべきかを考える必要があります。

今回の記事では、このような様々な角度から、初心者の方でもわかるように解説を進めていきます。
続いて、実際のリダイレクト方法に入る前に、基本的な流れと注意点について見てみましょう。

基本的なリダイレクト方法と注意点

JavaScriptによるリダイレクトは、主にlocationオブジェクトを利用します。
locationオブジェクトはブラウザのウィンドウ（またはタブ）のURLを表し、これを操作することで別のURLへ飛ばすことができます。具体的には、location.href や location.replace、location.assign といったプロパティやメソッドを使います。

たとえば、よく見かける書き方として location.href = "http://example.com"; がありますが、これだけでもすぐにページを移動させることができるのです。
ただし、リダイレクトの種類によっては「戻る」ボタンの動作や、ブラウザ履歴への記録が異なるので注意が必要です。

たとえば、location.href は現在のページ履歴に残りますが、location.replace を使うと履歴を上書きしてしまうため、ユーザーが「戻る」操作を行っても元のページには戻れません。
一方で、location.assign は location.href と似ていますが、細かい挙動が異なる部分があり、開発時の設計意図によってはどれを使うか変えていくべきでしょう。

また、リダイレクトが多用されると、ユーザーは混乱する可能性もあります。
勝手にいろんなページへ飛ばされると、「いったい今どこにいるの？」と迷いやすくなるので、状況に応じて上手に使い分けることが大切です。

ここでひとつ情報を補足しておくと、マルチページ構成のWebサイトだけでなく、 シングルページアプリケーション (SPA)でもJavaScript リダイレクトが必要となる場面があります。
SPAの場合、URL変更を伴う画面遷移が複雑になるので、その点については後のセクションで詳しく扱います。

次は、具体的なコード例を見ていきましょう。
まずは location.href の使用法を例示します。

location.href の使い方

location.href は、もっともよく使われるリダイレクト方法です。
これは簡単に言うと、「現在のブラウザが表示しているURL自体を書き換えて、ページを読み込み直す」という仕組みです。以下は基本的なコード例です。

// 特定のボタンをクリックしたらリダイレクトを実行する例
const button = document.getElementById("redirectBtn");
button.addEventListener("click", () => {
  location.href = "https://www.example.com";
});

上記のように書けば、ボタンを押したときに https://www.example.com へ飛ばすことができます。
そして、このリダイレクトはブラウザの履歴に追加されるため、ユーザーがブラウザの「戻る」ボタンを押すと、元のページに戻ってくることが可能です。

また、フォーム送信とあわせて location.href を利用することもあります。
たとえば、入力完了後に「サンクスページ」へ誘導したい場合などは、フォームの送信イベントのなかで location.href を設定すれば、自然な流れでページを切り替えられます。

一方で、ユーザーが誤って複数回クリックしてしまうと、想定外の連続リダイレクトが発生することも考えられます。
その場合は、イベントリスナー内でフラグを立てて、処理を一度だけ実行するように工夫するなどの対策が必要です。

このように location.href は扱いやすい反面、履歴に残る点やページ遷移の瞬間に読み込みが挟まる点が特徴的です。
次は、履歴に残さずリダイレクトできる location.replace の使い方を見ていきましょう。

location.replace の使い方

location.replace は、現在のページ履歴を上書きする形でリダイレクトを行うメソッドです。
location.href との違いは、ブラウザの「戻る」ボタンを押しても元のページに戻れないことにあります。

以下に簡単なサンプルコードを示します。

// 何らかの条件を満たしたときにページを差し替える例
if (userIsLoggedIn) {
  location.replace("https://www.example.com/dashboard");
}

このコードが実行されると、ユーザーは「ダッシュボード」に移動します。
しかし、直前のページには戻れません。これは、セキュリティ的な理由やユーザーエクスペリエンスの観点で意図的に使われることが多いです。

たとえば、ログインページ→ダッシュボードへ移動した後に、ユーザーが「戻る」を押してもログインページに戻さないようにする場合に有効です。
二重ログインを防ぐ演出や、機密性の高いページを簡単に戻れなくしたいときに活用されるでしょう。

ただし、何でもかんでも location.replace を使ってしまうと、ユーザーの操作感が損なわれる可能性があるので注意してください。
特に、ユーザーが「操作をやり直したい」と思った際、前のページに戻れない仕様はストレスになるかもしれません。

JavaScriptリダイレクトの設計を行う際は、ユーザーが「戻りたい」か「戻らなくてもよい」かをきちんと判断し、使い分けることが大切です。
続いては、location.assign について見てみましょう。

location.assign の使い方

location.assign は、location.href と似た挙動をしますが、公式ドキュメント上では明示的に「新しいドキュメントを読み込みたいときに使う」とされています。
実際には多くのケースで location.href と同じように動いてくれますが、コードの可読性や意図がよりはっきりする場合もあるでしょう。

サンプルコードは次のようになります。

// URLの更新だけでなく、適宜パラメータを付け加えるイメージ
function redirectToProfile(userId) {
  const newUrl = `https://www.example.com/profile?id=${userId}`;
  location.assign(newUrl);
}

location.assign(newUrl); は内部的に location.href = newUrl; とほぼ同じ挙動をしますが、どのメソッドを使うかはプロジェクトのコーディング規約やチームの方針次第です。
ただ、明示的に「ページを追加する」というニュアンスがあることから、あえて assign を使う場面もあります。

先ほど説明した location.replace との大きな違いは、「ブラウザの履歴に残る」ことです。
戻るボタンで元のページに戻りたい設計になっている場合は、assign が自然でしょう。

コード例としては、パラメータを付加してユーザー情報を表示させるページへ移動させるなど、動的なURLを生成して飛ぶといった処理が考えられます。
つまり、location.assign は location.href と同等とみなせる一方、用途が明確な場面での可読性向上に役立つかもしれません。

ここまでは基本的なリダイレクトのやり方を3種類紹介してきました。
次は、これらのメソッドを条件分岐と組み合わせて使う方法に触れていきましょう。

条件分岐を活用したリダイレクト

リダイレクトは、単にページを切り替えるだけでなく、「条件を満たしたら特定のURLへ」「満たさなければ別のURLへ」といった柔軟な制御にも利用できます。
たとえば、ユーザーのログイン状態、権限、入力フォームの内容、ブラウザの種類などをチェックしてから、遷移先を振り分けるわけです。

以下は、ログイン状態によって別のページにリダイレクトするイメージです。

function handleLogin(user) {
  if (user.hasAdminPrivileges) {
    // 管理者権限がある場合
    location.replace("https://www.example.com/admin");
  } else {
    // 一般ユーザーの場合
    location.href = "https://www.example.com/dashboard";
  }
}

ここでは管理者のときには location.replace を使い、戻ることを許さない形にしています。
一方で一般ユーザーには location.href を使い、履歴に残す設計としています。これだけで管理者ページから戻る操作が制限され、意図しないアクションを防げるかもしれません。

ほかには、ユーザーエージェントを判定してスマホ版ページに誘導する例もあります。
ただし、ユーザーエージェントは偽装が可能なので、最近ではレスポンシブデザインを使うことが多く、ブラウザ判定によるリダイレクトは慎重に行う必要があります。

条件分岐を入れすぎるとコードが煩雑になるので、なるべく共通のリダイレクト関数を用意しておき、引数で「どのURLに飛ばすか」「履歴に残すかどうか」を受け取ると管理しやすくなります。
このように、リダイレクトと条件分岐の組み合わせは、思いのほかたくさんの応用が考えられるのです。

次のセクションでは、SPA（シングルページアプリケーション）でのリダイレクト運用について解説していきます。

シングルページアプリケーション(SPA)での活用例

SPA（Single Page Application）では、通常のマルチページ構成と違い、JavaScriptフレームワークなどで画面の大部分を動的に書き換えることが多いです。
この場合、URL自体は変えずにコンテンツだけを差し替える「疑似的な遷移」が多用されるため、従来の location.href や location.replace をそのまま使うと再読み込みされてしまい、SPAの利点を損ねる可能性があります。

たとえばReactやVue.jsなどのフレームワークでは、URL遷移を行う際に専用のルーター機能を利用するケースが一般的です。
具体的には、React Routerの useNavigate() やVue Routerの $router.push() のようなメソッドを使って画面遷移を行います。これによって、アプリ内でURLは変わるものの、ページ全体の再読み込みは発生しない仕組みです。

では、JavaScript リダイレクトの出番はないのかと言うと、そうでもありません。
たとえば、フレームワークのルーターがカバーしきれない外部ドメインへの遷移や、ログアウト処理後に外部サイトに飛ばしたい場合は依然として location.assign や location.replace が必要になります。

さらに、SPAでもエラー処理などでサーバー側のステータスコードを受け取ったとき、特定のURLへ一気に飛ばすようなロジックを組むことがあります。
そういう場合には、JavaScriptのリダイレクトメソッドとフレームワークのルーターを組み合わせて実装することもあるでしょう。

SPAは画面遷移の管理が複雑になりやすい分、リダイレクトをどう扱うかも一筋縄ではいきません。
ユーザーが混乱しないよう、URLと実際の画面状態が一致するような設計をすることが大事です。

次は、リダイレクトとSEOの関係について掘り下げます。
初心者のうちは見落としがちですが、検索エンジンからのアクセスを重視したい場合には大切な論点です。

SEOの観点からのリダイレクト

JavaScriptを使ったリダイレクトと聞くと、SEOに悪影響はないのかと心配になるかもしれません。
検索エンジンによっては、クローラーがJavaScriptを正しく実行しなかったり、リダイレクトを理解できなかったりする可能性が昔は指摘されていました。しかし、近年は検索エンジンもJavaScriptのレンダリングに対応が進んでいます。

とはいえ、以下の点には注意が必要です。

  • クローラーがJavaScriptをレンダリングするまでに時間がかかる場合がある
  • ユーザーがアクセスしたときに瞬間的に内容が切り替わると、クローラーとユーザーで見えているコンテンツが異なる可能性がある
  • 何重にもリダイレクトをかけるとクローラーが混乱しやすい

通常の運用では、JavaScript リダイレクトが即座に「SEOには絶対に悪い」というわけではありません。
ただし、リダイレクト先のコンテンツをクロールさせたい場合は、サーバーサイドでリダイレクト（3xxステータスを返す）を使った方がより確実だと考えられます。

もしクローラーに正しくインデックスしてもらうことが最重要なのであれば、できればサーバー側でのリダイレクトを検討するほうが無難かもしれません。
一方で、たとえば「会員向けページに一時的に移動させるだけ」など、SEOをそれほど重視しない範囲ならJavaScript リダイレクトで十分というケースもあります。

結局のところ、どのようなページをリダイレクトしたいのかと、そのページで検索エンジンに拾ってもらいたいのかによって最適解が異なります。
特に、Topページから別のページへ一瞬で飛ばすような仕組みは、クローラーにとってもユーザーにとってもわかりにくい場合があるので気をつけてください。

次に、セキュリティやユーザビリティの観点も押さえておきましょう。
無闇にリダイレクトを多用すると、思わぬリスクが生じるかもしれません。

セキュリティやユーザビリティの考慮

JavaScriptリダイレクトを用いる際に、セキュリティ面で最初に気にかけるべきは、オープンリダイレクトという脆弱性リスクです。
これは、外部サイトへ勝手に誘導される仕組みをうっかり作ってしまい、フィッシングやマルウェア配布に悪用される恐れがあるものです。

たとえば、URLパラメータで遷移先を指定できるように実装するときに、チェックを設けずに location.href や location.replace を使ってしまうと、攻撃者が適当なURLを差し込み、ユーザーを不正サイトへ飛ばす可能性があります。
こうしたリスクを避けるには、リダイレクト先のドメインをホワイトリスト化するなど、URLをあらかじめ制限する方法が考えられます。

また、ユーザビリティの面でも、突然のリダイレクトは「使いにくさ」を感じさせてしまいます。
例えば、フォーム入力の途中で予期せぬ自動リダイレクトが起こると、ユーザーは混乱するだけでなく入力内容を失う恐れもあるでしょう。

以下のような点に注意するとよいでしょう。

  • リダイレクトする理由やタイミングを明確にして、ユーザーが混乱しないようにする
  • 短時間で何度もページ移動が発生しないよう制御する
  • 外部ドメインへのリダイレクト時は、リンク先の安全性を検証し、不正なURLが入り込まないようにする

JavaScript リダイレクトは手軽ですが、セキュリティやユーザビリティへの配慮を怠るとトラブルの原因になります。
特に外部ドメインへのリダイレクトには慎重になりましょう。

続いて、サーバーサイドで行うリダイレクトとの比較も見ておくと、より全体像をつかみやすくなります。

サーバーサイドのリダイレクトとの違い

サーバーサイドでリダイレクト（3xxステータスを返す）を行うと、クライアント側は最初から「別のURLを参照せよ」という指示を受け取る形になります。
この方法は、検索エンジンにも「このページは別の場所へ移動した」と明示的に伝えることができるため、SEO的には基本的に有利とされています。

一方で、JavaScript リダイレクトは、ユーザーのブラウザでスクリプトを実行してはじめて遷移先を決定します。
そのため、サーバーサイドのリダイレクトと比べると、ほんのわずかですが余計な処理が挟まることになるわけです。また、JavaScriptをオフにしているユーザーがいた場合はリダイレクトが動かないリスクもゼロではありません。

ただし、フロントエンドで柔軟に制御したいケースや、ユーザーの入力内容、あるいはクッキー情報などをリアルタイムにチェックしてからリダイレクトしたいケースでは、JavaScript リダイレクトが適しています。
サーバーサイドだけではすべてのロジックを記述しきれない可能性もありますし、開発効率や運用のしやすさも考慮に入れる必要があります。

要は、目的や状況に応じて、サーバーサイドかJavaScriptかを適切に選ぶのが重要なのです。
もしSEOを最優先に考えるならサーバーサイドリダイレクト、ユーザー操作やブラウザ状態などを考慮しながら柔軟に制御したいならJavaScriptリダイレクト、といった使い分けをするとよいでしょう。

次のセクションでは、よくある疑問やトラブルシューティングの例をまとめてみます。
実際に実装するうえで遭遇しがちなケースを知っておくと、いざというときに役立つはずです。

よくある疑問とトラブルシューティング

JavaScriptリダイレクトを導入するとき、初心者の方がつまずきやすいポイントや、よくある疑問点にはいくつかパターンがあります。ここでは代表的なものを挙げてみましょう。

  1. リダイレクトが動かない

    • JavaScriptエラーが出ている可能性があるので、コンソールを確認してください。文法ミスや、変数や関数名のtypoが原因となることが多いです。
    • リダイレクトを記述するスクリプトが正しく読み込まれていないケースも考えられます。外部ファイルを参照している場合はパスを見直しましょう。

  2. リダイレクトされすぎてループになる

    • location.href を使ったコードが何度も呼ばれ、無限に遷移を繰り返している可能性があります。条件分岐を見直して、想定外の場合はリダイレクトしないようにすることが必要です。
    • セッション状態やフラグを管理して、同じページに戻ってきたときはスキップするなどの対策を検討しましょう。

  3. 戻るボタンが効かなくなった

    • location.replace を使用している場合、履歴が上書きされます。ユーザーが戻れない仕様で問題ないか再確認してください。
    • 必要に応じて location.href や location.assign に変更するか、別のやり方を検討しましょう。

  4. 特定のブラウザでのみリダイレクトが遅い

    • ユーザーエージェントによる問題や、JavaScriptの実行タイミングが遅れている可能性があります。古いブラウザの場合はJavaScriptの動作に差異があるかもしれません。
    • 避けられない場合もあるので、ユーザーが多いブラウザでしっかりテストすることをおすすめします。

これらのトラブルは、落ち着いてコンソールエラーをチェックしたり、フラグ管理をしっかり行ったりすることで防げることが多いです。
初めて実装するときは、条件分岐やコードの流れを小さく区切りながら確認すると安心ですね。

最後に、この記事のまとめをお伝えします。
全体をおさらいして、必要なポイントを整理してみてください。

まとめ

JavaScript リダイレクトは、ユーザー体験を向上させたり、状況に応じたページ遷移を実現したりするうえで非常に便利な手段です。
特に location.href、location.replace、location.assign の3種類は、ブラウザの履歴への残り方や戻るボタンの挙動などが微妙に違うため、使い分けを覚えておくと実務でも役立ちます。

また、単なるページ移動だけでなく、条件分岐やユーザーエージェントの判定と組み合わせることで、柔軟なリダイレクトが可能になります。
シングルページアプリケーション（SPA）のようにURL操作が複雑な場合でも、場合によってはJavaScript リダイレクトが必須となる場面があるわけです。

一方で、SEOやセキュリティの視点も考慮しなければなりません。
クローラーがJavaScriptを実行するタイミングやオープンリダイレクトの問題など、実装の仕方を誤ると思わぬ悪影響が出ることがあります。

最後に、サーバーサイドのリダイレクトとの違いもしっかり理解しておくと、最適な方法を選べるようになるでしょう。
サーバーサイドの3xxリダイレクトは検索エンジンへの伝わり方が明確な一方、JavaScript リダイレクトはクライアント側で柔軟なロジックを実行できるメリットがあります。

今後、開発プロジェクトで「どうやってページを移動させよう？」と考える場面があれば、この記事で紹介した技術や注意点を思い出してみてください。
きっと、より適切な方法を選ぶ助けになるはずです。これでJavaScript リダイレクトの基本的な知識はひととおり押さえられたのではないでしょうか。

JavaScriptをマスターしよう

この記事で学んだJavaScriptの知識をさらに伸ばしませんか？
Udemyには、現場ですぐ使えるスキルを身につけられる実践的な講座が揃っています。

JavaScriptの人気講座ランキングを見る筆者おすすめ No.1 講座！「ちゃんと学ぶ、HTML/CSS + JavaScript」
フロントエンド開発の新着記事をチェック

フロントエンドエンジニアとは？初心者にもわかりやすい徹底解説