JavaScriptにおけるwindow.locationの実践的な活用方法8選

●window.locationとは？

JavaScriptを学び始めたばかりの皆さん、こんにちは。

今日は、Webページの URL 情報を取得したり操作したりするために欠かせない「window.location」について解説します。

将来フロントエンドエンジニアを目指す皆さんにとって、window.location を使いこなすスキルは必須です。

window.location は、ブラウザのアドレスバーに表示されている現在のページの URL 情報を扱うための JavaScript のオブジェクトです。

このオブジェクトを通じて、URL のさまざまな構成要素（プロトコル、ホスト名、パス、クエリ文字列など）にアクセスできます。

また、新しい URL にページを遷移させたり、現在のページを再読み込みしたりするためにも使用されます。

○window.locationの基本的な構造

window.location オブジェクトには、URL を構成するさまざまなプロパティが用意されています。

それぞれのプロパティにアクセスすることで、URL の特定の部分を取得したり設定したりできます。

例えば、次のような URL があるとします。

https://www.example.com/path/to/page.html?id=123#section1

この URL に対して、window.location オブジェクトの主なプロパティは次のような値を持ちます。

• window.location.protocol -> “https:”
• window.location.host -> “www.example.com”
• window.location.pathname -> “/path/to/page.html”
• window.location.search -> “?id=123”
• window.location.hash -> “#section1”

○window.locationのプロパティ一覧

window.location オブジェクトには、URL 情報を扱うためのさまざまなプロパティが用意されています。

ここでは、主要なプロパティの一覧を紹介します。

• href -> 完全な URL を取得または設定します。
• protocol -> URL のプロトコル部分（”http:”、”https:”など）を取得または設定します。
• host -> URL のホスト名とポート番号（指定されている場合）を取得または設定します。
• hostname -> URL のホスト名を取得または設定します。
• port -> URL のポート番号を取得または設定します。
• pathname -> URL のパス部分を取得または設定します。
• search -> URL のクエリ文字列（”?”以降の部分）を取得または設定します。
• hash -> URL のフラグメント識別子（”#”以降の部分）を取得または設定します。
• origin -> URL のオリジン（プロトコル、ホスト名、ポート番号）を取得します（読み取り専用）。

これらのプロパティを使い分けることで、URL のさまざまな構成要素にアクセスし、必要に応じて変更を加えることができます。

●URLパラメータの取得と活用

さて、フロントエンドエンジニアを目指す皆さん、ここからはいよいよwindow.locationの実践的な使い方について学んでいきましょう。

まずは、URLパラメータの取得と活用方法から始めましょう。

URLパラメータとは、URLの末尾に「?」に続けて付加される情報のことです。

このパラメータを利用することで、Webページに追加情報を渡したり、ページの状態を保持したりできます。

例えば、検索結果のページングや、フォームの入力内容を次のページに引き継ぐといった場面で大活躍です。

○サンプルコード1：URLパラメータの取得

それでは、URLパラメータを取得する方法を見ていきましょう。

window.locationオブジェクトのsearchプロパティを使うことで、現在のURLに含まれるパラメータ文字列を取得できます。

const params = new URLSearchParams(window.location.search);
const value = params.get('key');

上記のコードでは、URLSearchParamsオブジェクトを使ってパラメータ文字列を解析し、get()メソッドで特定のパラメータ値を取得しています。

例えば、現在のURLがhttps://example.com/?key=valueだった場合、value変数には"value"が格納されます。

○サンプルコード2：複数のURLパラメータの取得

URLには複数のパラメータを含めることもできます。

その場合は、&で区切って記述します。

複数のパラメータを取得するには、次のようなコードを使います。

const params = new URLSearchParams(window.location.search);
const key1 = params.get('key1');
const key2 = params.get('key2');

例えば、現在のURLがhttps://example.com/?key1=value1&key2=value2だった場合、key1変数には"value1"が、key2変数には"value2"がそれぞれ格納されます。

○サンプルコード3：URLパラメータを使った条件分岐

取得したURLパラメータを使って、ページの動作を切り替えることもできます。

次のコードは、URLパラメータの値に応じて異なるメッセージを表示する例です。

const params = new URLSearchParams(window.location.search);
const mode = params.get('mode');

if (mode === 'dark') {
  document.body.style.backgroundColor = 'black';
  document.body.style.color = 'white';
} else {
  document.body.style.backgroundColor = 'white';
  document.body.style.color = 'black';
}

このコードでは、URLパラメータmodeの値が"dark"であれば、ページの背景色を黒に、文字色を白に変更しています。

それ以外の場合は、通常の白背景・黒文字で表示されます。

●ページ遷移の制御

フロントエンドエンジニアを目指す皆さん、ここからはwindow.locationを使ったページ遷移の制御方法について理解していきましょう。

ページ遷移は、ユーザーのアクションに応じてWebサイトの画面を切り替える重要な機能です。

window.locationオブジェクトを活用することで、JavaScriptからページ遷移を自在に操ることができます。

○サンプルコード4：別のページへの遷移

まずは、JavaScriptを使って別のページへ遷移する方法から見ていきましょう。

window.locationオブジェクトのhrefプロパティに新しいURLを代入するだけで、ページを遷移させることができます。

window.location.href = 'https://example.com/new-page.html';

上記のコードを実行すると、ブラウザは即座にhttps://example.com/new-page.htmlへ遷移します。

これは、リンクをクリックしたときと同じ動作ですね。

ページ遷移のタイミングを制御したい場合に便利な方法です。

○サンプルコード5：現在のページのリロード

次に、現在のページを再読み込み（リロード）する方法を見てみましょう。

ページのリロードは、ユーザーがブラウザの更新ボタンをクリックしたときと同じ動作です。

JavaScriptからリロードするには、location.reload()メソッドを使います。

window.location.reload();

このコードを実行すると、現在のページが再読み込みされます。

フォームの送信後や、ページの表示内容を最新の状態に更新したい場合に活用できます。

○サンプルコード6：ページ遷移前の確認ダイアログ

ページ遷移する前に、ユーザーに確認のダイアログを表示したい場合もあるでしょう。

例えば、フォームの入力内容が未保存の状態でページを離れようとしたときに、「変更内容が失われますが、よろしいですか？」といった確認メッセージを出すことで、うっかりデータを失うのを防げます。

window.onbeforeunload = function() {
  return '変更内容が失われますが、よろしいですか？';
};

上記のコードでは、window.onbeforeunloadイベントを使って、ページを離れる直前に確認ダイアログを表示しています。

ユーザーが「キャンセル」をクリックすると、ページ遷移はキャンセルされます。

●よくあるエラーと対処法

さて、フロントエンドエンジニアを目指す皆さん、ここまでwindow.locationの基本的な使い方やページ遷移の制御方法について学んできましたが、実際にコードを書いていると、思わぬエラーに遭遇することがあるでしょう。

エラーメッセージに戸惑ってしまい、なかなか先に進めないなんてことも。

ここでは、window.locationを使う際によく出くわすエラーとその対処法を３つ紹介します。

エラーに悩まされるのは、あなただけではありません。一緒に乗り越えていきましょう！

○TypeError: Cannot read property ‘location’ of undefined

まずは、”TypeError: Cannot read property ‘location’ of undefined”というエラーから見ていきましょう。

このエラーは、windowオブジェクトがundefinedになっている場合に発生します。

つまり、window.locationにアクセスしようとしたけれど、windowオブジェクトが存在しないために起こるのです。

このエラーが起きる主な原因は、ブラウザ以外の環境（例えば、Node.jsなど）でコードを実行しようとしたときです。

windowオブジェクトはブラウザ特有のオブジェクトなので、ブラウザ以外の環境では存在しません。

対処法としては、コードがブラウザ環境で実行されているかどうかを確認してから、window.locationにアクセスするようにしましょう。

if (typeof window !== 'undefined') {
  console.log(window.location.href);
}

上記のように、typeof window !== 'undefined'でwindowオブジェクトの存在をチェックすれば、エラーを回避できます。

○SecurityError: The operation is insecure

次は、”SecurityError: The operation is insecure”というエラーについて見てみましょう。

このエラーは、安全ではない操作を行おうとしたときに発生します。

具体的には、HTTPSで提供されているページから、HTTPのURLへ遷移しようとした場合などに起こります。

ブラウザのセキュリティ機能が、安全ではない遷移を防いでいるのです。

HTTPSからHTTPへの遷移は、機密情報が平文で送信される可能性があるため、セキュリティ上のリスクがあります。

対処法は、遷移先のURLをHTTPSに変更することです。

つまり、安全な通信が可能なHTTPSのURLを使うようにしましょう。

// 安全ではない遷移 (HTTPSからHTTPへ)
window.location.href = 'http://example.com';

// 安全な遷移 (HTTPSからHTTPSへ)
window.location.href = 'https://example.com';

HTTPSを使えない場合は、遷移先のページをHTTPS対応にするか、別の方法を検討する必要があります。

○SyntaxError: Unexpected token ‘=’

最後は、”SyntaxError: Unexpected token ‘='”というエラーを取り上げます。

このエラーは、JavaScriptの構文に誤りがあるときに発生します。

window.locationに関連して起きるケースとしては、URLパラメータの設定を誤ったときなどが考えられます。

例えば、次のようなコードは構文エラーになります。

// 誤った構文
window.location.href = 'https://example.com?key=value';

上記のコードでは、URLパラメータを ?key=value のように指定していますが、これは正しい構文ではありません。

URLパラメータを設定するには、? の後にキーと値をイコール (=) でつなぎ、複数のパラメータがある場合は & で区切る必要があります。

正しくは、次のように書きます。

// 正しい構文
window.location.href = 'https://example.com?key1=value1&key2=value2';

構文エラーを避けるためには、コードを書くときに構文の正しさに気をつけることが大切です。

エディタの構文チェック機能を活用したり、コードをこまめに動作確認したりして、エラーを早期に発見・修正するようにしましょう。

エラーは誰にでも起こり得るものですが、エラーメッセージをヒントに原因を特定し、適切な対処法を見つけることができれば、難関を乗り越えられます。

自分だけで解決できないときは、先輩エンジニアに相談したり、オンラインのフォーラムで質問したりするのも良いでしょう。

エラーと向き合う経験を積むことで、より強いエンジニアへと成長していけるはずです。

●window.locationの応用例

フロントエンドエンジニアを目指す皆さん、ここまでwindow.locationの基本的な使い方から、エラーの対処法までを解説してきました。

もう、window.locationを使いこなせる自信が少しずつ湧いてきたのではないでしょうか。

ここからは、window.locationを使った便利な機能の実装例を2つ紹介します。

実際のプロジェクトでも活用できる、実践的なコード例ばかりですよ。

一緒に手を動かしながら、window.locationの応用力を身につけていきましょう！

○サンプルコード7：現在のURLをコピーするボタンの実装

まずは、現在のページのURLをクリップボードにコピーする機能の実装方法から見ていきましょう。

シェアボタンなどで活用できる、ユーザーにとって便利な機能です。

function copyCurrentURL() {
  const currentURL = window.location.href;
  navigator.clipboard.writeText(currentURL).then(function() {
    alert('現在のURLをクリップボードにコピーしました！');
  }, function() {
    alert('URLのコピーに失敗しました。');
  });
}

上記のコードでは、window.location.hrefで現在のURLを取得し、navigator.clipboard.writeText()メソッドを使ってクリップボードにコピーしています。

コピーの成功・失敗に応じて、アラートでメッセージを表示するようにしています。

このコードを実行するボタンを設置すれば、ワンクリックでURLのコピーが完了します。

<button onclick="copyCurrentURL()">現在のURLをコピー</button>

ユーザーがURLを共有したいときに、簡単に行えるようになりますね。

○サンプルコード8：ページ内のアンカーリンクのスムーズスクロール

次は、ページ内のアンカーリンクをクリックしたときに、スムーズにスクロールする機能を実装してみましょう。

長いページでも、目的の位置にすっと移動できるので、ユーザーエクスペリエンスの向上につながります。

function smoothScroll(target) {
  const targetElement = document.querySelector(target);
  if (targetElement) {
    window.scrollTo({
      top: targetElement.offsetTop,
      behavior: 'smooth'
    });
  }
}

// リンクのクリックイベントを監視
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();
    const target = this.getAttribute('href');
    smoothScroll(target);
  });
});

このコードでは、smoothScroll()関数でアンカーリンクの目的地までスムーズにスクロールするようにしています。

window.scrollTo()メソッドのbehaviorオプションに'smooth'を指定することで、なめらかなスクロールを実現しています。

また、querySelectorAll()メソッドで、href属性が#で始まるすべてのリンクを取得し、クリックイベントを監視しています。

リンクがクリックされたら、デフォルトの動作をキャンセルし、smoothScroll()関数を呼び出すようにしています。

アンカーリンクを設置するには、次のようなHTMLを記述します。

<a href="#section1">セクション1へ移動</a>

...

<h2 id="section1">セクション1</h2>

href属性で指定したIDを持つ要素まで、スムーズにスクロールしてくれます。

まとめ

これからは、今回学んだ知識と経験を糧に、自分のプロジェクトでwindow.locationを活用していってください。

きっと、ユーザーにとってより使いやすく、インタラクティブなWebサイトを作れるようになるはずです。

困難に直面したときは、ここで得た知見を思い出し、乗り越えていきましょう。