JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでサイト訪問者を別のページやURLへリダイレクトする方法を徹底解説

JavaScriptのwindow.locationオブジェクトを使えば、サイト訪問者を別のURLへ簡単にリダイレクトできます。この記事では、基本的なリダイレクトの実装方法から、メッセージ表示付きのリダイレクト、実務での活用シーンまで詳しく解説します。

ページリダイレクトの基本

サイト訪問者を新しいURLへリダイレクトするには、リダイレクト元のページで以下のJavaScriptを実行するだけです。

window.location = "https://wheretoredirect.com"

このコードは、外部の.jsファイルとして読み込むか、Webページの<head>セクション内にインラインで記述できます。

<script type="text/javascript">
  window.location = "https://wheretoredirect.com"
</script>

この設定により、https://yourwebsite.comにアクセスしたすべての訪問者は、window.locationの値として指定したURLへ即座に転送されます。

ページリダイレクトを活用すると、訪問者を以下のような場所へ誘導できます。

  • 別のドメイン(oldsite.comからnewsite.comへ)
  • 同一ドメイン内の別のページや投稿(yourwebsite.com/your-post)
  • 同一ドメイン内のサブフォルダ(yourwebsite.com/archive)
  • サブドメイン(support.yourdomain.com)

なお、リダイレクト先を指定する際は、プロトコルの表記(https、www、https://wwwなど)を正しく指定するよう注意してください。誤った表記ではリダイレクトが正しく機能しない場合があります。

リダイレクト前にメッセージを表示する

ユーザー体験を向上させるために、リダイレクトを実行する前に訪問者へメッセージを表示し、カウントダウンタイマーで転送を遅らせる方法があります。こうすることで、訪問者が「なぜ突然別のサイトに飛ばされたのか」と戸惑うことを防げます。

先ほどのコードに、以下の2つの要素を追加してみましょう。

  • リダイレクトされる理由を説明するメッセージ
  • 5秒後にリダイレクト処理を実行するカウントダウンタイマー

メッセージ表示+カウントダウンタイマーの実装例

function showMessageBeforeRedirect() {
  window.location = "https://wheretoredirect.com"
}
document.write("You’ll be redirected to our new domain in 5 seconds :-)")
setTimeout("showMessageBeforeRedirect()", 5000)

5000という値はミリ秒単位です。つまり、この例では5秒後にリダイレクトが実行されます。

先ほどと同じように、このコードをWebページの<head>セクションに追加してみてください。

<script type="text/javascript">
  function showMessageBeforeRedirect() {
    window.location = "https://wheretoredirect.com"
  }
  document.write("You’ll be redirected to our new domain in 5 seconds :-)")
  setTimeout("showMessageBeforeRedirect()", 5000)
</script>

実際の動作イメージは、CodePenのサンプルで確認できます。

なぜ訪問者をリダイレクトするのか?

実際のプロジェクトでユーザーをリダイレクトする必要があるケースはいくつかあります。主な例を紹介します。

  • ドメインの移行: 新しいドメイン名へ切り替えた際に、旧ドメインを訪れたユーザーを自動的に新ドメインへ誘導したい場合。
  • ブラウザ別の対応: レガシーブラウザ用とモダンブラウザ用など、サイトに複数のバージョンがあり、ユーザーの環境に合ったページへ振り分けたい場合。
  • 多言語サイトの振り分け: 同一サイトの言語別バージョンがあり、例えばブラウザの言語設定がイタリア語のユーザーをyourwebsite.com/itへ誘導したい場合。

このように、JavaScriptによるリダイレクトはドメイン移転時のアクセス維持やユーザー体験の向上に役立つ便利なテクニックです。用途に合わせて適切に活用しましょう。

  1. JavaScriptで別のWebページにリダイレクトする方法を解説

    JavaScriptを使えば、ボタンのクリックや特定の条件を満たしたタイミングで、ユーザーを別のWebページへ簡単に誘導（リダイレクト）できます。最も一般的なのは、window.location.href プロパティに移動先のURLを代入する方法です。 主なリダイレクトの方法 window.location.href = URL：最もシンプルで広く使われる方法です。 window.location.assign(URL)：hrefと同じ動作をし、ブラウザの履歴にも残ります。 window.location.replace(URL)：現在のページを置き換えるため、「戻る」ボタンで元のページに

  2. 数秒後にURLを別のWebサイトへリダイレクトする方法【metaタグの使い方】

    ページリダイレクトとは？ ページリダイレクトとは、あるURLをクリックしてページXにアクセスしようとした際に、内部的には別のページYへ自動的に転送される仕組みのことです。サイトの移転やURL変更の際に、古いページから新しいページへ訪問者を誘導するなど、さまざまな場面で活用されています。 METAタグを使ったリダイレクトの基本 数秒後にURLを別のWebサイトへリダイレクトさせたい場合は、HTMLの<meta>タグを使用します。http-equiv=refresh を指定し、content属性で待機時間（秒数）と転送先のURLを設定します。このcontent属性の値によって、リダイ