【JS応用｜初心者向け】URLオブジェクトを文字列に変換する！URL.prototype.toJSONの便利な使い方

2026.08.13

1. 導入：なぜURL.prototype.toJSONが必要なのか

Web開発をしていると、ブラウザのURL情報（URLオブジェクト）をサーバーに送信したり、ログとして出力したりする場面がよくあります。しかし、URLオブジェクトをそのままJSON文字列に変換しようとすると、期待通りにいかないことがあります。そんな時、URLオブジェクトを安全かつ簡潔に文字列形式へ変換してくれるのが「URL.prototype.toJSON」メソッドです。これを使うことで、オブジェクトの扱いによるエラーを防ぎ、スムーズなデータ処理が可能になります。

2. 基礎知識：URLオブジェクトとJSONの関係

まず「URLオブジェクト」とは、JavaScriptのURLインターフェースを使用して生成された、URLを分解・操作するためのオブジェクトです。
一方、「JSON」はデータをテキスト形式でやり取りするためのフォーマットです。
通常、JavaScriptでオブジェクトをJSON形式の文字列に変換するには「JSON.stringify()」を使いますが、URLオブジェクトをそのまま渡すと、中身のプロパティが正しくシリアライズされない場合があります。ここで「toJSON」メソッドが自動的に呼ばれることで、URLオブジェクトは標準的な「文字列（URL全体）」として正しく変換される仕組みになっています。

3. 実装・解決策：toJSONの仕組み

実は、開発者が明示的に「url.toJSON()」と書くことはほとんどありません。このメソッドは、JSON.stringify()が内部的に呼び出すためのものだからです。
JSON.stringify()は、引数に渡されたオブジェクトの中にtoJSONメソッドが存在すれば、それを実行した結果をJSON文字列の一部として扱います。つまり、URLオブジェクトをJSONの一部として含めるだけで、自動的に適切な文字列へ変換してくれるのです。

4. サンプルプログラム

以下のコードをコピーして、ブラウザのコンソールなどで実行してみてください。URLオブジェクトが正しくJSONの一部として処理される様子が確認できます。

// 1. URLオブジェクトを作成
const myUrl = new URL('https://example.com/search?q=javascript');

// 2. 普通のオブジェクトにURLを含めてみる
const data = {
  id: 1,
  targetUrl: myUrl // ここで自動的に toJSON が呼ばれる
};

// 3. JSON文字列に変換
const jsonString = JSON.stringify(data);

// 結果を表示
console.log('変換後のJSON:', jsonString);
// 出力結果: {"id":1,"targetUrl":"https://example.com/search?q=javascript"}

// 4. 参考：直接 toJSON を呼び出すことも可能
console.log('toJSONの結果:', myUrl.toJSON()); 
// 出力結果: "https://example.com/search?q=javascript"

5. 応用・注意点：現場での活用と落とし穴

注意点：
toJSONメソッドはあくまで「URL全体を文字列として返す」ものです。URLのクエリパラメータだけを抽出したい場合や、特定のパスだけを取得したい場合は、別途「URLSearchParams」オブジェクトや「pathname」プロパティを使用する必要があります。

現場での活用：
API通信を行う際、リクエストボディにURL情報を含めるケースがあるかと思います。その際、手動で「url.toString()」を実行しなくても、JSON.stringify()にオブジェクトごと渡すだけで済むため、コードの可読性が向上し、変換忘れなどのバグを減らすことができます。ぜひ、日々の開発で活用してみてください。

スポンサーリンク
タイトルとURLをコピーしました