【JavaScript】URLを取得する方法を初心者向けにわかりやすく解説

フロントエンド開発•
JavaScript

はじめに

JavaScriptでウェブページのURLを操作する場面は、意外と多くあります。 特に、検索パラメータを読み取ったり、アプリケーション内で現在のパスを確認したりするケースは日常的といえるでしょう。 初心者の皆さんからすると「どうやってURLを取得するのか分からない」と感じるかもしれませんが、JavaScriptには便利な機能がそろっています。 本記事では、基本的なURLの取得方法だけでなく、実務で役立つさまざまな使い方を紹介します。

皆さんがプログラミングを始める上で、URLの取得や操作に関する知識は必ず必要になる場面があります。 最初は難しく感じるかもしれませんが、サンプルコードや具体的な活用シーンを交えながら丁寧に解説していきますので、一緒に確認してみましょう。

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

  • JavaScriptでURLを取得する基本的な方法
  • locationオブジェクトやURLオブジェクトの特徴と使い分け
  • URLパラメータ（クエリ文字列）の取得や操作方法
  • 実務における活用シーンや注意点
  • Node.js環境でのURL処理の概要

JavaScriptでURLを取得する代表的な方法

JavaScriptが動作する環境といえば、ウェブブラウザが主に思い浮かぶかもしれません。 実際にブラウザ上では、location オブジェクトを使うことで簡単にURLを取得できます。 ここでは、代表的なURL取得の方法をいくつか見ていきましょう。

location.hrefを使う

JavaScriptで一番手軽にURLを取得する方法として、まず挙げられるのが location.href です。 以下のように書くと、現在のページのURL全体を文字列として取得できます。

const currentUrl = location.href;
console.log(currentUrl);

実務では、サイト内でユーザーのアクセスURLをログに残したり、特定の条件下でページをリロードしたりするような処理が考えられます。 location.href が返す文字列には、プロトコル（httpやhttps）からドメイン名、パス、クエリ文字列、ハッシュフラグメントまで含まれています。 初心者の皆さんにとっては「ページ全体のURLをまとめて取得したい」という場合は、最初に覚えておきたいプロパティです。

locationオブジェクトのその他のプロパティ

location は location.href 以外にも、URLに関するさまざまな情報を細かく取得できる便利なオブジェクトです。 たとえば、以下のようなプロパティが用意されています。

location.protocol

プロトコル部分を表し、http: や https: といった形式の文字列が返されます。

location.host

ドメイン名とポート番号を含むホスト情報が返されます。例として example.com:8080 のようになります。

location.hostname

ポート番号を除いたドメイン名のみを取得できます。たとえば example.com のようになります。

location.port

ポート番号だけを取得できます。通常のhttpが80番やhttpsが443番の場合は、ポート指定が省略されていることも多いです。

location.pathname

ドメイン名の後ろに続くパス部分を返します。例として /index.html や /products/list などです。

location.search

クエリ文字列を返します。たとえば ?id=123&category=books のようになります。

location.hash

# 以降のハッシュ部分を取得できます。SPA（シングルページアプリケーション）などで使用されるケースがあります。

実務では、これらのプロパティを組み合わせることで、現在のページのどのセクションを見ているのか、あるいはユーザーがどのパラメータを利用しているかをチェックできます。 特に、外部APIと連携しているページであれば、location.search からクエリパラメータを抜き出し、ユーザーIDやページ番号をバックエンドに送り、それに応じた処理を行うことも多いです。

URLオブジェクト

少し新しめの方法として URLオブジェクト を利用するやり方もあります。 URL コンストラクタを使うと、ブラウザが提供するネイティブなURL操作機能をより細かく扱うことが可能です。

const currentUrl = new URL(window.location.href);
console.log(currentUrl.hostname);  // 例: "example.com"
console.log(currentUrl.pathname);  // 例: "/index.html"
console.log(currentUrl.searchParams.get("id"));  // パラメータ"id"の値を取得

URL オブジェクトを使うと、searchParams プロパティを通じてクエリパラメータを簡単に取得できます。 location オブジェクトと比べると、よりシンプルにパラメータを扱えるケースが多いので、最近のJavaScriptコードでは積極的に利用されることもあるでしょう。 実務でも、パラメータ操作を頻繁に行う場面では URL オブジェクトを導入しておくと便利です。

実務での利用シーン

ここからは、URLを取得することが具体的にどのような場面で活用されるのかを紹介します。 ただ単に文字列を取得するだけではなく、さまざまな処理に結びつけられる点がポイントです。

クライアントサイドでのリンク操作

ウェブサイト上のリンクをユーザーにクリックしてもらうのではなく、JavaScriptの処理によって動的にリンク先を変更するケースがあります。 たとえば、ある条件を満たした場合にだけ別のページへ移動させる、というような使い方です。

if (someCondition) {
  location.href = "https://example.com/newpage";
}

このように書くことで、ユーザーが操作しなくても自動的にページを移動させる仕組みを作ることができます。 実務では、ユーザーのログイン状態やアクセス権限に応じて別のURLに振り分けるような処理によく使われます。 動的にURLを生成する場面では、取得したURLに対してクエリパラメータを付け加えることもあるため、location.search や URLSearchParams などを組み合わせると便利です。

シングルページアプリケーション(SPA)でのルーティング

SPAでは、ページ全体をリロードするのではなく、特定のセクションだけを書き換えて動作させることが多いです。 そのような場合、URLハッシュ（location.hash）や history.pushState() と組み合わせて疑似的なページ遷移を行います。 URLの監視を行い、ハッシュが変更されたら対応するコンポーネントを表示する、という仕組みを作るときにはURL取得が必須です。

たとえば、/products/#/item/123 のようにパス後ろにハッシュを付ける設計があるかもしれません。 ハッシュを変更するだけでページ全体のリロードを行わずに、別の商品ページを読み込めるような流れです。 実務ではSPAが採用されるケースが多いため、URLの取得・操作は覚えておいて損はありません。

クエリパラメータの読み取りと分岐処理

実務で頻繁に登場するのがクエリパラメータを使った分岐処理です。 たとえば、URLに ?type=admin というパラメータが含まれていれば管理者向けの画面を表示し、含まれていなければ一般ユーザー向け画面を表示する、といった実装を行う場合です。

const urlObj = new URL(location.href);
const userType = urlObj.searchParams.get("type");

if (userType === "admin") {
  console.log("管理者向けの表示処理を実行");
} else {
  console.log("通常ユーザー向けの表示処理を実行");
}

このようにパラメータをもとに条件分岐することで、アクセスURLに応じたUIやコンテンツを出し分けることができます。 例えばABテストを実行するときにも、URLパラメータを分けて表示内容を切り替えるテクニックが活用されます。

URLパラメータの操作方法

URLの中でもクエリパラメータは重要な要素です。 検索キーワードやユーザーの入力情報など、さまざまなデータをURL上に付与してフロントエンドとバックエンドでやりとりするケースが一般的といえます。 ここでは、クエリパラメータを扱う3つの方法を紹介します。

location.searchの手動パース

最もシンプルな方法は location.search を文字列として取得し、手動でパース（分解）するやり方です。 たとえば、?id=123&category=books のような文字列が取得できた場合、以下のようなコードで分割します。

const queryString = location.search; // 例: "?id=123&category=books"
if (queryString.startsWith("?")) {
  const paramsStr = queryString.substring(1); // "id=123&category=books"
  const paramsArr = paramsStr.split("&"); // ["id=123", "category=books"]
  
  const result = {};
  paramsArr.forEach(param => {
    const [key, value] = param.split("=");
    result[key] = value;
  });
  
  console.log(result.id);       // "123"
  console.log(result.category); // "books"
}

これは初心者の皆さんにはやや煩雑に見えるかもしれませんが、文字列操作の基礎として勉強になるかもしれません。 しかしながら、パラメータ数が多かったり、URLエンコードされた文字列を扱ったりすると、コードが長くなりやすい欠点もあります。 実務では、簡易的なケースや、極力ライブラリなどに依存したくない場面で用いられることがあります。

URLSearchParamsオブジェクトの活用

手動でパースするのは大変なので、ブラウザ組み込みの URLSearchParams を使うと格段に楽になります。 location.search から先頭の ? を除いて URLSearchParams を生成すると、パラメータの取得がとてもスムーズに書けます。

const queryString = location.search; // 例: "?id=123&category=books"
const searchParams = new URLSearchParams(queryString);

const id = searchParams.get("id"); 
const category = searchParams.get("category");

console.log(id);       // "123"
console.log(category); // "books"

さらに、set メソッドを使うと、パラメータの値を動的に変更することもできます。

searchParams.set("id", "999");
searchParams.set("category", "music");
console.log(searchParams.toString()); // "id=999&category=music"

実務では、ユーザーからの入力値をURLパラメータに反映させて、そのまま別の画面に受け渡すような処理が考えられます。 クエリパラメータが複数存在してもまとめて扱えるため、コードがすっきり書けるのが大きなメリットです。

URLオブジェクトを使った検索パラメータ処理

前述のように、URLオブジェクト も searchParams を操作できます。 すでに new URL(window.location.href) で URL オブジェクトを作成しておけば、そこから searchParams へアクセス可能です。 これにより、URL全体のホスト名やパスなども一緒に操作できるため、同時に複数のURL要素を扱う場合に便利です。

const currentUrlObj = new URL(window.location.href);
currentUrlObj.searchParams.set("page", "2");
console.log(currentUrlObj.toString()); // 例: "https://example.com/products?page=2"

実務では、パラメータを変更したらページ全体を書き換えずとも、History APIを使って現在のURLを上書きする方法もあります。 history.pushState({}, "", currentUrlObj.toString()); のように書くと、ページをリロードせずにURLだけ切り替えられるので、ユーザーの操作感が向上することが多いです。

実務で気をつけたいポイント

URLの取得は単純に見えますが、実務に落とし込むと、いくつか注意すべき点があります。 エッジケースやブラウザ間の挙動差、セキュリティリスクなど、事前に押さえておくと安心です。

クロスブラウザ対応

location オブジェクト自体は古くから存在しますが、URLオブジェクト や URLSearchParams は比較的新しい機能です。 一部の古いブラウザではサポートされていない可能性があるため、ポリフィルを入れたり、トランスパイラで対応したりする必要があるかもしれません。 業務システムや特定企業内のアプリでは、社内標準ブラウザが古い場合もあるので注意しましょう。

URLハッシュの扱い

location.hash によってページ内の特定セクションへ移動する仕組みを使うことがあります。 SPAではルーティングにハッシュを使うことも多いですが、ハッシュはサーバーに送信されない点が特徴です。 そのため、バックエンド側でハッシュ情報を検知する仕組みにはならないことを覚えておきましょう。

また、URLハッシュを用いた導線は、ページをリロードした際に想定どおりの状態になるかを十分に確認する必要があります。 特にコンテンツが動的に生成されるページでは、ハッシュによるアンカー移動が先に実行されてしまい、該当する要素がまだ描画されていないというケースもあり得ます。

セキュリティ上の注意点

URLパラメータを取得して、そのまま画面に表示するような実装をする場合は、XSS（クロスサイトスクリプティング）のリスクがあります。 悪意のあるスクリプトを仕込まれたURLを踏んでしまうと、ページ側が攻撃コードをそのまま実行してしまうことも考えられるからです。 実務では、取得したURLやパラメータをHTMLとして挿入する際、エスケープ処理 をきちんと行うことが求められます。

取得したパラメータをすぐにinnerHTMLなどへ挿入するのは避けましょう。必要な場合は、エスケープ処理やサニタイズを行うことが大切です。

Node.js環境でのURL取得

JavaScriptはブラウザだけでなく、サーバーサイド環境でも動作します。 ただし、ブラウザ特有のオブジェクト（window や document、location など）はNode.js環境では利用できません。 そこで、Node.js専用の仕組みとして url モジュールが提供されています。

// Node.js環境
const url = require("url");

const urlStr = "https://example.com/products?category=books&id=123";
const parsedUrl = url.parse(urlStr, true);

console.log(parsedUrl.hostname);       // "example.com"
console.log(parsedUrl.query.category); // "books"
console.log(parsedUrl.query.id);       // "123"

url.parse では、第二引数を true にするとクエリ文字列を自動的にオブジェクトに変換してくれます。 また、Node.jsのバージョンによっては new URL() を使うことも可能です。 その場合はブラウザ同様に searchParams にアクセスできるので、より直感的にパラメータを扱うことができます。

// Node.js環境
const { URL } = require("url");

const urlObj = new URL("https://example.com/products?category=books&id=123");
console.log(urlObj.searchParams.get("category")); // "books"
console.log(urlObj.searchParams.get("id"));       // "123"

クエリ文字列モジュール(querystring)の使いどころ

Node.jsには querystring モジュールもあり、クエリ文字列をオブジェクトに変換したり、逆にオブジェクトからクエリ文字列を生成したりできます。 以下のように書くと、シンプルにパラメータ操作が行えます。

const querystring = require("querystring");

const queryStr = "category=books&id=123";
const parsedQuery = querystring.parse(queryStr);
console.log(parsedQuery.category); // "books"
console.log(parsedQuery.id);       // "123"

const newQueryStr = querystring.stringify({ category: "music", id: "456" });
console.log(newQueryStr); // "category=music&id=456"

実務では、URLパラメータの操作をNode.jsサーバー側で行う場面があるでしょう。 例えば、特定のデータベース検索条件をパラメータ経由で取得して、そのままクエリオブジェクトとしてアプリケーション内部で利用することも考えられます。

トラブルシューティング

URLの取得や操作を行う際には、意外なところでつまづくことがあるかもしれません。 ここでは、初心者の皆さんが遭遇しがちなトラブルの代表例を見ていきます。

取得しているURLが空になってしまう

ブラウザ上で console.log(location.href); と書いたのに、なぜか空文字が出力されるという報告はあまり聞かれませんが、もしローカルファイル（file:// など）を直接開いている場合や、特殊なブラウザ環境だと想定外の値が返ることがあります。 また、Node.js環境で location を使おうとしてエラーになるのも同様にありがちな問題です。 自分がどの環境でコードを実行しているか、そして location が存在し得るかどうかを確認するのが大切です。

相対パスと絶対パスの混同

JavaScriptでURLを扱うときに、相対パスと絶対パスを混同してしまうケースは珍しくありません。 ページ上のリンクを location.href で書き換える際に、 /about.html のように先頭にスラッシュを入れるのか、about.html のように書くのかで意図するリンク先が変わります。 また、new URL("about.html", window.location.href) のように第二引数を使えば、相対パスから絶対URLを生成することが可能です。

特殊文字やエンコードに関する問題

URL中には、日本語やスペース、記号などが含まれる場合があります。 特にクエリパラメータにユーザーの自由入力があると、その中にスペースや記号、絵文字まで含まれることもあるでしょう。 こうした文字はエンコード（％エンコードなど）されてURLに反映されるため、手動でパラメータを操作しているときには注意が必要です。 URLSearchParams や encodeURIComponent などの標準関数を使うことで、多くのトラブルを回避できます。

クエリパラメータに日本語や特殊文字が混在するとURLが崩れる場合があります。エンコードが必要かどうかを事前に確認しましょう。

まとめ

URLの取得や操作は、実際に手を動かしてみると案外シンプルに行える場面が多いかもしれません。 しかし、実務レベルで考えると、ブラウザ環境によるサポート状況、Node.js側の実装、セキュリティ対策など、さまざまな要素を押さえる必要があります。

  • locationオブジェクト は伝統的な方法で、個別のプロパティを参照することも可能
  • URLオブジェクト は searchParams などを通じてパラメータ操作を簡単に行える
  • Node.js では url モジュールや querystring モジュールが利用できる
  • パラメータを表示する際はエスケープ処理を忘れない
  • URLハッシュや絶対パス・相対パスの違いにも注意する

皆さんがこれからJavaScriptでブラウザ向けの開発やNode.jsを使ったサーバーサイド開発を進めるうえで、URLの扱いは必ず通る道です。 本記事で紹介した内容を一つずつ手を動かしながら試してみると、徐々に理解が深まるでしょう。 慣れてしまえばさほど複雑ではありませんので、ここで紹介したポイントを軸に、ぜひ実際のプロジェクトでも活用してみてください。

JavaScriptをマスターしよう

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

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

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