トミケルの本音

日々の仕事や趣味で感じたことを綴るブログ

JSのnew URLってなに？

✅ new URL() とは？

  • 文字列のURLを、部品ごとに操作・取得できる「URLオブジェクト」に変換するための構文。
  • JavaScriptの組み込みクラス（new でオブジェクトを生成できるコンストラクタ）
  • 標準のWeb APIとしてブラウザ・Node.jsの両方で利用可能。

🧠 どんなときに使う？

  • クエリパラメータ（?key=value）を追加・取得・変更したいとき
  • プロトコル（http/https）、ドメイン、パスなどを個別に扱いたいとき
  • APIのエンドポイントをプログラム的に構築したいとき
  • ユーザー入力のURLが有効な形式かどうか検証したいとき

🔍 主なプロパティと機能

プロパティ・メソッド説明
.protocol“https:” や “http:” などのプロトコル部分
.hostnameドメイン名部分（例：example.com）
.pathnameパス部分（例：/search）
.searchParamsクエリパラメータを操作できるオブジェクト
.toString()フルURLの文字列を返す

📦 よくある用途

  • fetchの第一引数
    • fetch関数の第一引数はURL文字列とURLオブジェクトのどちらでも動作するようになっている。（すご🥺）
  • APIリクエスト用URLの生成
  • クエリの追加や変更
  • サーバーから送られたURLの解析
  • reCAPTCHAの検証URLの作成など

🧑‍💻 実際の使い方

// ✅ URLを分解して各部を取り出す
const url = new URL("<https://example.com/search?q=tomikel&lang=ja>");

console.log(url.protocol); // "https:"
console.log(url.hostname); // "example.com"
console.log(url.pathname); // "/search"
console.log(url.search);   // "?q=tomikel&lang=ja"
console.log(url.searchParams.get("q"));     // "tomikel"
console.log(url.searchParams.get("lang"));  // "ja"

// ✅ クエリパラメータを追加・変更する
const url2 = new URL("<https://example.com/api>");

url2.searchParams.append("page", "1");
url2.searchParams.set("sort", "desc");

console.log(url2.toString()); // "<https://example.com/api?page=1&sort=desc>"

// ✅ baseURL を使って相対パスから絶対URLを作成
const base = "<https://example.com>";
const relative = "/user/profile";
const url3 = new URL(relative, base);

console.log(url3.toString()); // "<https://example.com/user/profile>"

// ✅ URLの妥当性をチェックする関数
function isValidUrl(input) {
  try {
    new URL(input);
    return true;
  } catch {
    return false;
  }
}

console.log(isValidUrl("<https://example.com>")); // true
console.log(isValidUrl("not a url"));           // false
JavaScript