JavaScriptのnew URL()コンストラクタでURLからすべてのデータ値を取得する方法

JavaScriptのnew URL()コンストラクタを使えば、URL文字列からすべてのデータ値を簡単に取り出せます。この記事では、その基本的な使い方と実践的な活用例をわかりやすく解説します。

URLのデータ値が必要になる場面

たとえば、Webサイトにサイト内検索機能を実装するケースを考えてみましょう。検索機能を正しく動作させるには、URL文字列に含まれるすべてのデータ値(パス名、ホスト名、クエリパラメータなど)にアクセスできる必要があります。

new URL()コンストラクタとは

幸い、JavaScriptにはnew URL()という便利なコンストラクタが標準で用意されています。これを使うと、URL文字列をオブジェクトに変換でき、URL内のすべてのプロパティと値を整理された形で一覧できます。

使い方はとてもシンプルです。変数を作成し、そこにnew URL('your-url')を代入するだけです。以下の例では、TechStackerの記事ページのURLをもとに、URLオブジェクトを生成しています。

const urlData = new URL('https://techstacker.com/how-to-detect-double-clicks-with-vanilla-javascript');

続いて、結果をコンソールに出力してみましょう。

console.log(urlData)

返されるURLオブジェクトは、次のような構造になっています。

var url = {
	hash: "",
	host: "techstacker.com",
	hostname: "techstacker.com",
	href: "https://techstacker.com/,how-to-detect-double-clicks-with-vanilla-javascript",
	origin: "https://techstacker.com",
	password: "",
	pathname: "/how-to-detect-double-clicks-with-vanilla-javascript"
	port: "",
	protocol: "https:",
	search: "",
	searchParams: "URLSearchParams {}",
	username: ""
};

各プロパティへのアクセス方法

URLをオブジェクト化すれば、あとは各プロパティに自由にアクセスできます。たとえば、URLのpathname(パス部分)を取得したい場合は、次のように書きます。

console.log(url.pathname)
// 出力: "/how-to-detect-double-clicks-with-vanilla-javascript"

同様に、url.hostでホスト名、url.protocolでプロトコル(http:やhttps:)なども取得できます。

クエリパラメータを取得するには

URLにクエリ文字列(?以降の部分)が含まれている場合は、searchParamsプロパティ(URLSearchParamsオブジェクト)を使うと便利です。get()メソッドにパラメータ名を渡すだけで、対応する値を取り出せます。

const url = new URL('https://example.com/search?q=javascript&page=2');

console.log(url.searchParams.get('q'));    // 出力: "javascript"
console.log(url.searchParams.get('page')); // 出力: "2"

このようにnew URL()を使えば、URLの解析処理を自前で実装することなく、ブラウザ標準の機能だけで安全かつ効率的に行えます。サイト内検索やトラッキング、動的ページの制御など、さまざまな場面で活用してみてください。