JavaScriptで現在のURLを取得する基本を徹底解説 location.hrefの使い方入門

1. JavaScriptで現在のURLを取得するとは

1. JavaScriptで現在のURLを取得するとは

JavaScriptで現在のURLを取得するとは、今ブラウザで開いているページのアドレスをプログラムから取り出すことを意味します。JavaScriptは、Webページに動きをつけるためのプログラミング言語です。ボタンを押したときにメッセージを表示したり、入力内容をチェックしたりすることができます。

その中でも現在のURLを取得する処理は、とてもよく使われます。たとえば、特定のページだけで処理を変えたい場合や、URLの一部を使って画面表示を切り替えたい場合に役立ちます。

URLはインターネット上の住所です。家の住所がわかれば場所が特定できるように、URLがわかればページを特定できます。JavaScriptでは、この住所情報を簡単に取り出せます。

2. locationオブジェクトの基本を理解しよう

2. locationオブジェクトの基本を理解しよう

現在のURLを取得するために使うのがlocationです。locationはオブジェクトと呼ばれる仕組みです。オブジェクトとは、関連する情報をまとめた箱のようなものです。

locationの中には、hrefやhostnameやpathnameなど、URLに関するさまざまな情報が入っています。その中でもhrefは、現在のURL全体を表すプロパティです。プロパティとは、オブジェクトが持っている情報のことです。

まずは一番基本となるlocation.hrefを使ってみましょう。

console.log(location.href);

このコードを実行すると、今開いているページのURLがコンソールに表示されます。コンソールとは、開発者ツールの中にある確認画面のことです。

https://example.com/sample.html

このように、現在のURLをそのまま取得できます。JavaScriptで現在のURLを取得する基本は、まずlocation.hrefを覚えることです。

3. window.locationとの違い

3. window.locationとの違い

JavaScriptでは、window.locationという書き方もできます。windowとは、ブラウザの画面全体を表すオブジェクトです。実は、locationはwindowの中に入っています。

そのため、次のように書いても同じ意味になります。

console.log(window.location.href);

windowを省略してlocation.hrefと書いても動作します。初心者の方は、まずはシンプルにlocation.hrefと覚えておけば問題ありません。

JavaScriptで現在のURLを取得する方法として、location.hrefとwindow.location.hrefは同じ結果になるということを理解しておきましょう。

4. URLの一部だけを取得する方法

4. URLの一部だけを取得する方法

URL全体ではなく、一部だけを取得したい場合もあります。たとえば、ドメイン名だけを取得したい場合です。ドメイン名とは、example.comのような部分です。

その場合は、hostnameを使います。

console.log(location.hostname);

example.com

ページのパスだけを取得したい場合は、pathnameを使います。

console.log(location.pathname);

/sample.html

このように、JavaScriptのlocationオブジェクトを使うと、現在のURLのさまざまな部分を取得できます。Webアプリ開発やフロントエンド開発ではよく使われる知識です。

5. 現在のURLを使ってページを切り替える

5. 現在のURLを使ってページを切り替える

location.hrefは取得するだけでなく、書き換えることもできます。URLを書き換えると、ページを移動できます。これをリダイレクトと呼びます。リダイレクトとは、自動的に別のページへ移動させることです。

location.href = "https://example.com/next.html";

このコードを実行すると、指定したURLへ移動します。ボタンを押したときにページを移動させることもできます。

document.getElementById("moveBtn").addEventListener("click", function() {
  location.href = "https://example.com/next.html";
});

このように、JavaScriptで現在のURLを取得するだけでなく、変更することも可能です。動的なWebサイトを作る上で重要な基本知識です。

6. クエリパラメータの取得方法

6. クエリパラメータの取得方法

URLの後ろに疑問符がついていることがあります。これはクエリパラメータと呼ばれます。クエリパラメータとは、ページに追加情報を渡す仕組みです。

たとえば、次のようなURLです。

https://example.com/sample.html?id=10

この場合、searchを使うと取得できます。

console.log(location.search);

?id=10

JavaScriptで現在のURLを取得する基本を理解すると、このようなパラメータ処理も簡単になります。ログイン情報の判定や検索機能の実装など、さまざまな場面で活用できます。

7. 初心者が注意するポイント

7. 初心者が注意するポイント

JavaScriptで現在のURLを取得する際は、実行する場所に注意が必要です。ローカル環境と本番環境ではURLが異なることがあります。また、セキュリティの関係で一部情報が取得できない場合もあります。

さらに、コンソールに表示するにはブラウザの開発者ツールを開く必要があります。開発者ツールは、ブラウザの設定メニューから開くことができます。

JavaScriptの基礎として、locationオブジェクトの仕組みを理解しておくことはとても大切です。現在のURLを取得する基本をしっかり身につけることで、より実践的なWeb開発へと進むことができます。

JavaScript初心者の方は、まずlocation.hrefで現在のURLを取得するところから始めてみてください。そしてhostnameやpathnameやsearchなども試してみましょう。繰り返し実行することで、自然と理解が深まります。

まとめ

まとめ

今回は、JavaScriptで現在のURLを取得する基本としてlocation.hrefの使い方を中心に、locationオブジェクトの仕組みやwindow.locationとの違い、hostnameやpathnameやsearchなどの各種プロパティについて詳しく解説しました。JavaScriptで現在のURLを取得する方法は、フロントエンド開発やWebアプリ開発において非常に重要な基礎知識です。特にlocation.hrefは、今表示しているページのURL全体を文字列として取得できるため、ページ判定やリダイレクト処理、クエリパラメータの解析など幅広い用途で活用されます。

Webサイト制作やWebシステム開発では、現在のURLを取得して条件分岐を行う場面が数多くあります。例えば、特定のパスにいるときだけ処理を実行する、ドメインによって表示内容を変更する、クエリパラメータをもとにデータを取得するなど、実務でも頻繁に使われます。そのため、JavaScript初心者の方でもlocation.hrefやlocation.hostnameやlocation.pathnameの違いを正しく理解しておくことが大切です。

また、location.hrefは取得だけでなく書き換えも可能であり、ページ遷移やリダイレクト処理を実装できます。これはシングルページアプリケーションだけでなく、一般的なWebページでもよく使われるテクニックです。JavaScriptで現在のURLを取得する基本を理解することで、Webページの動きをより柔軟に制御できるようになります。

現在のURLを使った実践的なサンプルプログラム

ここでは、現在のURLを取得してページごとに処理を切り替える簡単なサンプルを確認します。JavaScriptで現在のURLを取得する方法を実践的に理解することで、基礎から応用へとステップアップできます。

const currentUrl = location.href;

if (currentUrl.indexOf("sample") !== -1) {
  console.log("sampleページが表示されています。");
} else {
  console.log("sampleページではありません。");
}

sampleページが表示されています。

このように、location.hrefで現在のURLを取得し、文字列検索を行うことでページ判定が可能です。さらに、クエリパラメータを利用して値を取得する例も確認してみましょう。

const params = new URLSearchParams(location.search);
const id = params.get("id");

if (id) {
  console.log("idは" + id + "です。");
} else {
  console.log("idは指定されていません。");
}

idは10です。

このように、location.searchとURLSearchParamsを組み合わせることで、クエリパラメータの取得も簡単に実装できます。JavaScriptで現在のURLを取得する基本を押さえることで、ログイン判定や検索機能、ページごとの動的表示など、実践的な機能開発につなげることができます。

JavaScriptの基礎文法とあわせてlocationオブジェクトを理解しておくことで、ブラウザ上での動的処理に強くなります。現在のURLを取得する処理は、Web制作の現場でも頻出するため、何度もコードを書いて体に覚えさせることが大切です。JavaScriptで現在のURLを取得する基本を確実に身につけ、より高度なフロントエンド開発へと進んでいきましょう。