JSでのURL処理：URLオブジェクトの使い方詳細解説

現代のWeb開発において、URL（統一資源位置指定子）はウェブリソースとの対話の核心部分です。JavaScript は URL オブジェクトを提供しており、URL の解析、変更、作成を簡単に行うことができます。この記事では、開発者がURLを効率的に操作できるように、URL オブジェクトの使い方を詳しく解説します。

1. URLオブジェクトの作成

URL コンストラクターを使って新しいURLオブジェクトを作成できます。これにはURL文字列を引数として渡します。

1
const url = new URL("https://www.example.com:8080/path/name?query=test#hash");
2
console.log(url);

この url オブジェクトには、プロトコル、ホスト名、パス、クエリ文字列、ハッシュなど、完全なURL情報が含まれています。

2. よく使うプロパティ

URL オブジェクトには、URLの各部分を簡単に取得できる多くの便利なプロパティがあります。

  • href: 完全なURL文字列を返します。
  • protocol: URLのプロトコル部分（例：https:）を返します。
  • hostname: URLのホスト名部分（ポート番号は含まれません）を返します。
  • port: URLのポート番号（存在する場合）を返します。
  • pathname: URLのパス部分を返します。
  • search: URLのクエリ文字列部分（?を含む）を返します。
  • hash: URLのハッシュ部分（#を含む）を返します。

例：

1
const url = new URL("https://www.example.com:8080/path/name?query=test#hash");
2


3
console.log(url.href); // https://www.example.com:8080/path/name?query=test#hash
4
console.log(url.protocol); // https:
5
console.log(url.hostname); // www.example.com
6
console.log(url.port); // 8080
7
console.log(url.pathname); // /path/name
8
console.log(url.search); // ?query=test
9
console.log(url.hash); // #hash

3. URLの変更

URL オブジェクトのプロパティは変更可能であり、URLの各部分を直接変更できます。

1
const url = new URL("https://www.example.com/path/name");
2
url.pathname = "/new/path";
3
url.search = "?search=query";
4
url.hash = "#newhash";
5


6
console.log(url.href); // https://www.example.com/new/path?search=query#newhash

pathname、search、hash などのプロパティを変更することで、簡単にURLを更新できます。

4. クエリパラメータの操作 (searchParams)

URL オブジェクトの searchParams プロパティは、URLSearchParams オブジェクトを提供し、クエリ文字列を簡単に操作できます。

クエリパラメータの追加

1
url.searchParams.append("newParam", "value");
2
console.log(url.href); // https://www.example.com/new/path?search=query&newParam=value

クエリパラメータの取得

1
console.log(url.searchParams.get("search")); // query

クエリパラメータの変更

1
url.searchParams.set("search", "newQuery");
2
console.log(url.href); // https://www.example.com/new/path?search=newQuery&newParam=value

クエリパラメータの削除

1
url.searchParams.delete("newParam");
2
console.log(url.href); // https://www.example.com/new/path?search=newQuery

URLSearchParams は、クエリパラメータの追加、取得、変更、削除を簡単に行える方法を提供しています。

5. 相対URLの処理

基準となるURLを URL コンストラクターに渡すことで、JavaScriptは相対パスを自動的に解釈します。

1
const relativeUrl = new URL("/relative/path", "https://www.example.com");
2
console.log(relativeUrl.href); // https://www.example.com/relative/path

6. URLのエンコードとデコード

クエリパラメータを操作する際には、特殊文字をエンコードまたはデコードする必要がある場合があります。JavaScriptは次のメソッドを提供しています。

  • encodeURIComponent()：URLコンポーネントをエンコードします。
  • decodeURIComponent()：エンコードされたURLコンポーネントをデコードします。

例：

1
const param = "name=John Doe";
2
const encoded = encodeURIComponent(param);
3
console.log(encoded); // name%3DJohn%20Doe
4


5
const decoded = decodeURIComponent(encoded);
6
console.log(decoded); // name=John Doe

これらのメソッドは、URLに含まれる文字列が不正な文字を含まないようにします。

結論

URL オブジェクトは、URLの解析、変更、生成において開発者に強力なツールを提供します。動的に生成されたURLや、ユーザー入力からのURLを処理する際には、URL オブジェクトおよび関連する URLSearchParams オブジェクトが非常に便利です。

クエリパラメータの解析やパスの変更、新しいURLの作成など、URL オブジェクトは開発者が効率的かつ確実にタスクをこなす手助けをしてくれます。

似た投稿

CommonJS と ES Module の違い

CommonJS と ES Module の違い

フロントエンドで要素がビューポート内に入ったかどうかを判断する方法とその応用

フロントエンドで要素がビューポート内に入ったかどうかを判断する方法とその応用