【JavaScript】URLとは？基本的な使い方と実践例を初心者向けにわかりやすく解説

フロントエンド開発•
JavaScript

はじめに

JavaScriptを使ってウェブページを操作するとき、URL を扱う場面は意外と多いのではないでしょうか。
たとえば、ページのクエリパラメータを取得して検索機能に反映させたり、ユーザーが入力した値をもとに新しいページを動的に生成したりといった作業です。
こうした処理をスムーズに行うためには、JavaScriptでのURL操作を理解しておくことが大切です。

この章では、まずURLに関する基礎知識をざっくりとおさらいし、実際の開発現場でよく使われる機能をピックアップしていきます。
初心者の方でも理解しやすいように、具体例を交えて順序立てて説明していきますので、安心して読み進めてください。

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

  • JavaScriptでURLを扱う基本的な手順
  • URLオブジェクト と URLSearchParams の活用方法
  • クエリパラメータの取得や変更など、実務での具体的な応用例
  • 文字列としてのURL処理と、オブジェクトとしてのURL処理の違い
  • ブラウザ上でのURL操作における注意点

JavaScriptでURLを扱うメリット

ウェブブラウザ上でJavaScriptを使ってURLを操作するメリットとしては、まずサーバーの応答を待たずにクエリパラメータの取り扱いやURLの書き換えができる点が挙げられます。
ユーザーの操作に応じてリアルタイムにURLを変化させ、ページ遷移の挙動を細かく制御しやすくなるため、使い勝手のよいインタラクティブな画面を作りやすくなるのです。

たとえば、検索フォームでユーザーがキーワードを入力した瞬間にURLを更新し、ページ全体はリロードせずに新しい検索結果だけ反映させるといった操作が考えられます。
こうした実装は、モダンなフロントエンド開発の中ではよくあるものです。

一方で、URL操作が複雑になると、ページの表示内容とURLの状態がずれてしまうこともあります。
そのため、どのタイミングでURLを変更するか や 変更した情報をどうやってページに反映するか といった点をきちんと整理しておく必要があります。

URL構造の基本

JavaScriptでURLを操作する前に、そもそもURLがどのような構造になっているかを簡単に押さえておきましょう。

URLは一般的に、以下のような要素で構成されています。

  • プロトコル（例: https:// や http://）
  • ドメイン名（例: example.com）
  • パス（例: /products/list）
  • クエリパラメータ（例: ?category=books&page=2）
  • ハッシュ（例: #section1）

たとえば https://example.com/products/list?category=books&page=2#section1 のようなURLがあった場合、それぞれの要素を分割して取り出すことができます。
JavaScriptには、これらの要素を簡単に扱えるURLオブジェクトという仕組みが用意されています。

URLオブジェクトとは

URLオブジェクト は、文字列としてのURLを解析し、各要素を手軽に取得・操作できるようにするものです。
new URL(文字列) の形でインスタンスを作れば、ホスト名やパス名、クエリパラメータなどをプロパティとして簡単にアクセスできるようになります。

URLオブジェクトの基本的な使い方

URLオブジェクトを使うためには、まず文字列のURLを引数にして new URL() を呼び出します。

const urlString = "https://example.com/products/list?category=books&page=2#section1";
const myUrl = new URL(urlString);

console.log(myUrl.protocol); // "https:"
console.log(myUrl.host);     // "example.com"
console.log(myUrl.pathname); // "/products/list"
console.log(myUrl.search);   // "?category=books&page=2"
console.log(myUrl.hash);     // "#section1"

このようにして生成した myUrl オブジェクトからは、プロトコル、ホスト名、パス、クエリパラメータ、ハッシュ などをそれぞれ簡単に取り出すことができます。
また、これらの値は書き換えも可能です。myUrl.pathname = "/new/path"; のように操作すれば、URLを変更できます。

実務での活用シーン

URLオブジェクト は、クエリパラメータを活用した検索機能や、ユーザーが閲覧しているページのホスト情報をチェックして処理を分ける場合などに便利です。
たとえば、コード中で以下のように「ホストが特定のドメインと一致しているかどうかを確認し、合致していれば特別なバナーを表示する」といった使い方が考えられます。

const currentUrl = new URL(window.location.href);
if (currentUrl.hostname === "example.com") {
  // 特別なバナーを表示するための関数を呼び出す
  showSpecialBanner();
}

こうした実装は、複数のサブドメインを運用している大規模ウェブサイトでも役立つはずです。
実務では、テスト環境やステージング環境、あるいは本番環境など複数のURLを持つことが多いため、URLによる条件分岐は意外とよく登場する場面です。

クエリパラメータとURLSearchParams

URLの中でも特に頻繁に扱うのがクエリパラメータです。
?category=books&page=2 のように、? に続く形式で様々なキーと値が連結されている部分です。

JavaScriptではこのクエリパラメータを手軽に操作できる URLSearchParams という仕組みがあります。
URLオブジェクトから myUrl.searchParams のように呼び出すか、あるいは単独で new URLSearchParams('?category=books&page=2') のように生成して使うこともできます。

URLSearchParamsの基本的な操作

以下のコード例を見てみましょう。

const urlString = "https://example.com/products/list?category=books&page=2";
const myUrl = new URL(urlString);

// searchParams は URLSearchParams オブジェクト
const params = myUrl.searchParams;

// パラメータの取得
console.log(params.get("category")); // "books"
console.log(params.get("page"));     // "2"

// パラメータの追加や変更
params.set("page", "3");
params.append("sort", "desc");

// 最終的なURLを文字列で確認
console.log(myUrl.toString());
// "https://example.com/products/list?category=books&page=3&sort=desc"

params.set("page", "3") のようにすると、クエリパラメータを変更したり追加したりできます。
また params.append("sort", "desc") は、もともと存在しないキーを追加してくれます。

こうした操作を行うだけで、最終的な myUrl.toString() の値が更新されるため、そのまま新しいURLとして利用できます。
たとえば、シングルページアプリケーション（SPA）のルーターなどと組み合わせると、ユーザーの操作に応じてリアルタイムにパラメータを変化させられるでしょう。

文字列でURLを扱う場合との違い

JavaScriptでURLを扱う方法としては、昔からよく使われる window.location や、ただの文字列操作で split や substring などを使うやり方もあります。
しかし、URLオブジェクトやURLSearchParamsを使うことで、パラメータの抜き出しや書き換えが飛躍的に楽になる のです。

文字列操作だけでURLを扱おうとすると、? や & を区切りに手動で切り分けたり、エンコードやデコードを気にかけたりと、細かい処理をたくさん書かなければなりません。
その点、URLオブジェクトやURLSearchParamsなら、複雑なパースや組み立てを自動的にやってくれるので、実装ミスを減らすことができます。

一方で、既存のコードベースでは文字列操作によるURL処理が残っていることもあるため、理解しておくといざというときに役立ちます。
ただし新規で実装する場合は、URLオブジェクトやURLSearchParamsを積極的に使うことが多いでしょう。

URLエンコードとデコード

URL内のパラメータは、半角英数字以外の文字列を含むときにはエンコードと呼ばれる処理が必要です。
たとえば、スペースや日本語などをURLに含める場合は、そのままでは正しく動作しない場合があります。

JavaScriptには encodeURI() や encodeURIComponent() といった関数が用意されており、URLのエンコードを手軽に行うことができます。
逆に、エンコードされた文字列を元に戻す（デコードする）には decodeURI() や decodeURIComponent() を使います。

  • encodeURI(): URL全体をエンコードする
  • encodeURIComponent(): URLの一部（主にクエリパラメータの値）をエンコードする

実務ではクエリパラメータの値をエンコードするときに encodeURIComponent() を使うケースが多いです。
たとえば、ユーザーが入力した検索ワードにスペースや日本語が含まれている場合は、encodeURIComponent() でクエリパラメータに正しく変換してからURLを生成するとよいでしょう。

エンコードに関する注意点

エンコードを行うタイミングを間違えると、すでにエンコードされた文字列を再度エンコードしてしまい、URLが読み取れなくなるケースがあります。
そのため、必要な部分だけをエンコード し、全体を何度もエンコードし直すようなことがないように気をつけましょう。

URLをエンコードする際に、一度エンコードした文字列を再度エンコードしてしまうと、読み込めないリンクが生成される可能性があります。エンコードの重複には注意してください。

ページ遷移や履歴管理との関係

URLを扱ううえで、ページを実際に遷移させるかどうか という点も大切です。
たとえば、window.location.href = "https://example.com" のようにURLを設定すると、ページは即座に移動します。
一方、ヒストリーAPI を使うと、アドレスバーのURLを書き換えながらページ遷移したかのような挙動を実現できます。

ヒストリーAPIの基本

ヒストリーAPIには history.pushState() や history.replaceState() といったメソッドがあります。
これらを使うと、実際にはページをリロードすることなく、URLを変更しつつブラウザの戻る・進むなどの履歴操作が可能になります。

// pushState(state, title, url)
history.pushState({ page: 3 }, "", "?page=3");
// ブラウザのアドレスバーには ?page=3 が反映されるが、リロードはされない

このようにURLを操れると、SPAなどでユーザー体験を向上させるケースが多いです。
ただし、履歴が増えすぎたり、ユーザーがブラウザの戻るボタンを押したときの挙動など、追加で考慮すべき点が増えることも事実です。

URLの相対パスと絶対パス

JavaScriptでURLを生成するとき、絶対パス か 相対パス かを判断する必要がある場面が出てきます。
絶対パスとは https://example.com/... のようにプロトコルから始まる完全なURLのこと。
相対パスは、現在のページを基準に ../ や ./ を使いながらパスを指定する方法を指します。

URLオブジェクトを使って相対パスを扱う場合、以下のように「ベースとなるURL」を第二引数に渡すことができます。

const base = "https://example.com/products/list";
const relative = "../new-item";
const newUrl = new URL(relative, base);
console.log(newUrl.toString());
// "https://example.com/products/new-item"

このように、相対パスで指定しても new URL() が自動的に絶対パスへ変換してくれます。
ファイルを移動したりフォルダ階層を変えたりしてURLのパスが変わる場合でも、ベースURLを適切に設定するだけで対応しやすくなります。

ハッシュ（#）の活用方法

URLの最後についている # 以下の文字列をハッシュまたはフラグメントと呼びます。
ハッシュはページ内リンクを示したり、SPAにおけるルーティングで使われたりと、さまざまな用途があります。

URLオブジェクトでは myUrl.hash を使ってハッシュ部分を取得・変更できます。
たとえば、特定のセクションを表示するときに #section1 のようなハッシュを付与しておき、ユーザーがページを再読み込みしても同じセクションを開けるようにする実装などが考えられます。

const url = new URL(window.location.href);
if (url.hash === "#login") {
  // ログインモーダルを自動的に開く
  openLoginModal();
}

モーダルやタブの選択状態など、ページを再読み込みしたときにも同じ画面状態を再現したい場合に、ハッシュはシンプルで便利な仕組みです。

実務で遭遇しやすい問題点

JavaScriptでURLを操作する場合、いくつか注意すべき問題点もあります。

1. クエリパラメータの多重管理

ページの表示内容に関わるクエリパラメータが増えてくると、URLが長くなったり、管理が煩雑になったりします。
どのパラメータがどんな役割を持っているのか、チームで共有しておくとよいでしょう。

2. エンコード漏れ

日本語や特殊文字を含む場合、エンコード処理を忘れると文字化けやエラーが発生することがあります。
URLSearchParamsを使う場合は、基本的には自動でエンコードされますが、状況に応じて適切に関数を使い分けましょう。

3. URLの長さ制限

ブラウザごとにURLの最大長が決まっているため、クエリパラメータを大量に詰め込みすぎると表示や動作に支障をきたす可能性があります。
データの受け渡し方法を分割するなどの対策が必要になる場面もあります。

URLを使った条件分岐の実例

URLによってページを切り替えたり、特別なコンテンツを出し分けたりするのは実務でよくあるパターンです。
以下のコードは、URLに含まれるクエリパラメータによって表示内容を切り替える簡単な例です。

function showContentBasedOnUrl() {
  const url = new URL(window.location.href);
  const mode = url.searchParams.get("mode");

  if (mode === "admin") {
    displayAdminMenu();
  } else if (mode === "preview") {
    showPreviewBanner();
  } else {
    showRegularContent();
  }
}

このようにしておけば、?mode=admin が付いたURLを開いたときに管理者用メニューを表示したり、?mode=preview が付いたURLならプレビュー用のバナーを表示したりできます。
大掛かりな認証は別途必要になるかもしれませんが、まずはURLを活用したロジックとして覚えておくと便利です。

URLを生成してリンクを動的に挿入する

ユーザーの入力に応じてリンクを動的に生成するケースもあります。
たとえば、フォームに入力された情報をクエリパラメータに埋め込んだURLを提示し、ユーザーにクリックしてもらう実装などです。

function createDynamicLink(baseUrl, queryObj) {
  const url = new URL(baseUrl);
  for (const [key, value] of Object.entries(queryObj)) {
    url.searchParams.set(key, value);
  }
  return url.toString();
}

// 使い方の例
const link = createDynamicLink(
  "https://example.com/search",
  { keyword: "JavaScript URL", page: "1" }
);
console.log(link);
// "https://example.com/search?keyword=JavaScript%20URL&page=1"

ここでは Object.entries() を使い、オブジェクトからキーと値のペアを取り出して searchParams.set() を使っています。
実務では「ユーザーがフォームに入力した値をもとにURLを生成し、それをメールで案内する」といったシーンで役立つでしょう。

URLの検証

ユーザー入力をもとにURLを生成する場合、不正なURL や 予期せぬ形式の入力 に対するチェックを行う必要があります。
URLオブジェクトを使うと、無効な文字列を渡したときにエラーが発生する場合があります。

try {
  const invalidUrl = new URL("htp://invalid-url");
} catch (error) {
  console.error("URLが無効です:", error);
}

ただし、JavaScriptのURLコンストラクタが判定できないパターンや、意図しない解釈をされるケースもありえます。
もし厳密なチェックが必要な場合は、独自のバリデーションロジックを組み合わせるとよいでしょう。

セキュリティ面での考慮

URLを通じてデータを受け渡しする際には、セキュリティ上の観点も無視できません。
たとえば、クエリパラメータを通じてユーザー入力を受け取り、そのままHTMLに埋め込んで表示すると、XSS（クロスサイトスクリプティング）のリスクが高まります。

表示するときには、受け取った文字列をエスケープ処理したり、JavaScriptのコードとして実行しないように注意したりすることが重要です。
加えて、機密情報（トークンやパスワードなど）をクエリパラメータに含めると、URLがログやアクセス解析などに記録されてしまう点にも注意が必要です。

テスト環境でのURL操作

実務では、テスト環境やローカル環境でURLを切り替えながら動作確認を行うことが一般的です。
たとえば、http://localhost:3000 のようなローカルサーバーで開発・デバッグを行い、本番公開前にステージング環境 https://staging.example.com で最終チェックを行う、といった流れです。

URLオブジェクトを活用すれば、ホスト名が localhost か staging.example.com かを判定し、環境ごとに挙動を変えるといった実装もしやすくなります。
このあたりは大規模なシステムほどよく使うテクニックとなるでしょう。

やってみると理解が深まる

URL周りの処理は、実際に書いてみると覚えやすい分野です。
画面に表示されているリンクがどんなクエリパラメータを持っていて、クリックしたときにどう処理が流れるかを追ってみると、イメージがつかみやすくなるのではないでしょうか。

もし余裕があれば、簡単なサンプルページを作って、「入力フォームの内容をクエリパラメータに反映する」「リンクをクリックするとURLのハッシュだけ変更してモーダルを開く」といった機能を試すのもよいでしょう。

地道に自分でコードを書き、挙動を確認してみることが理解への近道です。

まとめ

JavaScriptでURLを扱う際には、URLオブジェクト や URLSearchParams をうまく活用することで、パラメータの追加や変更、パスの切り替えといった処理をスムーズに行えます。
文字列操作だけでなく、オブジェクトとして扱うことでミスを減らし、コードも読みやすくなるでしょう。

また、URLを変更するときはページを実際にリロードするのか、ヒストリーAPIで履歴を操作してSPA的な挙動を実装するのかといった選択が必要です。
用途やユーザー体験を意識しながら、最適な方法を選ぶとよいでしょう。

最後に、エンコード処理 や セキュリティ面の配慮、URLの長さ制限 などにも注意が必要です。
特にクエリパラメータを多用する場合は設計段階で整理し、適切に運用できるよう気を配ってください。

JavaScriptでのURL操作をしっかりマスターしておけば、さまざまな場面で役立ちます。
実装の幅が広がるだけでなく、ユーザーにとって使いやすいページを作りやすくなるので、ぜひ少しずつ試してみてください。

JavaScriptをマスターしよう

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

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

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