【JS応用｜豆知識】URL.prototype.hostnameで実現する！安全かつ効率的なドメイン解析術

導入

Web開発において、現在のページのドメインを取得したり、APIのエンドポイントを動的に切り替えたりするシーンは非常に多いです。よくある失敗として、正規表現を使ってURLからホスト名を抽出しようとして、複雑なURL構造でバグを生んでしまうケースがあります。そんな時、ブラウザ標準の URL.prototype.hostname を活用すれば、誰でも正確かつ安全にドメイン情報を取得できます。

基礎知識

URLオブジェクトは、Webブラウザの標準機能（URL API）であり、URL文字列を解析して構造化するツールです。そのプロパティの一つである hostname は、URLから「ドメイン名（またはIPアドレス）」のみを抽出して返します。
例えば「https://example.com:8080/path/to/page」というURLであれば、「example.com」の部分だけを綺麗に取り出してくれます。プロトコル（https）やポート番号（8080）、パス（/path/to/page）を個別に意識する必要がないため、非常に強力です。

実装/解決策

使い方は非常にシンプルです。まず、解析したいURLを引数にして new URL() コンストラクタを呼び出し、URLオブジェクトを生成します。その後、そのオブジェクトの hostname プロパティにアクセスするだけです。もしURLの形式が不正な場合はエラー（TypeError）がスローされるため、try-catch文で囲むことで、不正な入力によるアプリケーションのクラッシュを防ぐことができます。

サンプルプログラム

以下のコードは、入力されたURL文字列からドメインを安全に取り出し、特定の条件で処理を分岐させる実用的な例です。

/

URLからホスト名を取得し、特定のドメインか判定する関数

 /
function checkDomain(urlString) {
  try {
    // 1. URLオブジェクトを生成して解析
    const url = new URL(urlString);
    
    // 2. hostnameプロパティでドメイン部分を取得
    const domain = url.hostname;
    
    console.log("抽出されたホスト名:", domain);

    // 3. 業務ロジックへの応用：特定のドメインかチェック
    if (domain === "example.com") {
      console.log("許可されたドメインです。");
    } else {
      console.log("外部ドメインのため、注意が必要です。");
    }
  } catch (e) {
    // URLの形式が不正な場合の処理
    console.error("無効なURLが入力されました:", e.message);
  }
}

// テスト実行
checkDomain("https://example.com/api/v1/users");
checkDomain("invalid-url");

応用・注意点

現場で活用する際の注意点は、ポート番号が含まれる場合です。hostnameプロパティは「ホスト名のみ」を返し、ポート番号は含まれません。もし「example.com:8080」のようにポート番号を含めて扱いたい場合は、host プロパティを使用してください。
また、localhost環境やIPアドレス（127.0.0.1）なども正確に抽出できるため、開発環境と本番環境の切り替え処理に非常に便利です。複雑な正規表現を書いてメンテナンスコストを上げるよりも、まずはブラウザ標準のURL APIで対応できないか検討するのが、モダンなフロントエンド開発の鉄則です。