このページでは、JavaScriptで使用される window.location.href、window.location.assign()、window.location.replace()、window.location.reload() メソッドについて、それぞれの用途や違いを例とともに詳しく解説します。

• window.location.href
• window.location.assign(url)
• window.location.replace(url)
• window.location.reload([force])

window.location.href

window.location.href は、現在のURLを取得したり、新しいURLに移動するために使用されます。

基本的な使い方

console.log(window.location.href); // 現在のページのURLを取得
window.location.href = "https://example.com"; // 指定したURLに移動

ポイント

• URLを取得する際は単純にwindow.location.hrefを参照します。
• 新しいURLに移動する場合、ブラウザの履歴に記録されます。

例

現在のページのURLを取得して表示する例：

const currentURL = window.location.href;
alert("現在のURL: " + currentURL);

別のページにリダイレクトする例：

function goToGoogle() {
    window.location.href = "https://www.google.com";
}

Googleに移動

window.location.assign(url)

window.location.assign() は、指定したURLに移動するためのメソッドです。

基本的な使い方

window.location.assign("https://example.com");

ポイント

• 移動先のURLがブラウザの履歴に記録されます。
• window.location.hrefと同様に動作しますが、コードの意図を明確にするためにassign()を使うことがあります。

例

特定のURLにリダイレクトする例：

document.getElementById("redirectBtn").addEventListener("click", function() {
    window.location.assign("https://www.example.com");
});

Example.comに移動

window.location.replace(url)

window.location.replace() は、現在のページを新しいページに置き換えるメソッドです。

基本的な使い方

window.location.replace("https://example.com");

ポイント

• ブラウザの履歴に記録されないため、「戻る」ボタンで元のページに戻れません。
• セキュリティやリソースのロード制御に利用されることが多いです。

例

強制的に新しいページに移動する例：

function forceRedirect() {
    window.location.replace("https://www.example.com");
}

強制的に移動

window.location.reload([force])

window.location.reload() は、現在のページを再読み込みするためのメソッドです。

基本的な使い方

window.location.reload(); // 通常の再読み込み
window.location.reload(true); // キャッシュを無視して再読み込み

ポイント

• 引数を指定しない場合、キャッシュを使用して再読み込みします。
• 引数にtrueを渡すと、キャッシュを無視してリロードします。

例

ページをリロードするボタンの例：

function reloadPage() {
    window.location.reload();
}

ページを再読み込み

まとめ

以上のように、window.locationを使用すると、URLの操作やページ遷移を簡単に実現できます。それぞれのメソッドの特徴を理解して適切に使い分けましょう。