JavaScript ドメイン取得の比較

JavaScript の location.host と location.hostname の違いと、ブラウザ互換性

JavaScript の window オブジェクトには、現在のウェブページに関する情報を取得する location プロパティがあります。その中に、2 つの似たようなプロパティ host と hostname があり、どちらもドメイン名を取得できますが、取得する情報が少し異なります。

・location.host

• ドメイン名 と ポート番号 (存在する場合) を含む文字列を返します。
  • 例: http://example.com:8080/index.html ならば、location.host は "example.com:8080" を返します。
  • 標準ポート (通常は 80 番) が使われている場合は、ポート番号は含まれません。

• ドメイン名 のみ を含む文字列を返します。ポート番号は含まれません。
  • 例: 上記と同じ URL ならば、location.hostname は "example.com" を返します。

どちらを使うべきか？

• サーバーが標準以外のポートを使っていることがわかっている場合、location.host を使ってポート番号も含めて取得する必要があります。
• ポート番号が必要ない場合は、location.hostname を使うのが一般的です。ドメイン名 (人間が読める部分) だけあれば十分なケースが多いからです。

ブラウザ互換性

どちらも主要なブラウザでサポートされています。特別な互換性問題はないので、安心して使えます。

• window オブジェクトはブラウザのグローバルオブジェクトであり、location プロパティはその中にあります。
• HTML には直接関係はありません。location オブジェクトは JavaScript で使用します。

例

console.log(window.location.host);   // 出力: "example.com:8080" (ポート番号あり)
console.log(window.location.hostname); // 出力: "example.com" (ポート番号なし)

JavaScript ドメイン取得の比較: location.host vs location.hostname の コード例

例 1: ポート番号を含むドメイン取得

// ポート番号を含むドメイン名を取得
function getFullDomainWithPort() {
  return window.location.host;
}

const fullDomain = getFullDomainWithPort();
console.log("ドメイン (ポート番号あり):", fullDomain);

// ポート番号を除いたドメイン名を取得
function getDomainNameOnly() {
  return window.location.hostname;
}

const domainName = getDomainNameOnly();
console.log("ドメイン名 (ポート番号なし):", domainName);

解説

• どちらも主要なブラウザで動作し、特別な互換性問題はありません。
• getDomainNameOnly 関数は window.location.hostname を使って、ポート番号を除いたドメイン名を取得します。

• ドメイン取得以外にも、location オブジェクトにはプロトコル (protocol) やパス (pathname) など、現在のウェブページに関する情報が色々と含まれています。
• 上記のコードは、ブラウザで実行する想定です。Node.js などサーバーサイド JavaScript では window オブジェクトが存在しないため、使用できません。

JavaScript でのドメイン取得: 代替手段

location.host と location.hostname はドメイン取得の便利な方法ですが、状況によっては代替手段が必要になる場合もあります。

URL オブジェクトの使用

JavaScript には URL オブジェクトがあり、URL 文字列をパースして各要素 (プロトコル、ドメイン名、ポート番号など) を取得できます。

const url = new URL(window.location.href);
const domainName = url.hostname;
const fullDomain = url.host;

console.log("ドメイン名 (ポート番号なし):", domainName);
console.log("ドメイン (ポート番号あり):", fullDomain);

• url.hostname でポート番号を除いたドメイン名、url.host でポート番号を含むドメイン名を取得します。
• new URL(window.location.href) で現在の URL を URL オブジェクトに変換します。

正規表現の使用 (上級者向け)

正規表現を使って URL 文字列からドメイン名やポート番号を抽出する方法もあります。ただし、正規表現は少し複雑なので、初心者にはおすすめしません。

const urlString = window.location.href;
const match = urlString.match(/^(?:https?:\/\/)?(.*?)(?:\:([0-9]+))?/);

if (match) {
  const domainName = match[1];
  const port = match[2];
  const fullDomain = domainName + (port ? ":" + port : "");

  console.log("ドメイン名 (ポート番号なし):", domainName);
  console.log("ドメイン (ポート番号あり):", fullDomain);
} else {
  console.error("URL のパースに失敗しました");
}

• 正規表現は複雑なので、理解が難しい場合は避けたほうが良いでしょう。
• 正規表現を使って URL 文字列をパースし、ドメイン名とポート番号を抽出します。

• 正規表現は上級者向けであり、初心者の方は location.hostname や URL オブジェクトの利用を優先しましょう。
• ポート番号が必要だったり、より柔軟な取得方法が求められる場合は URL オブジェクトや正規表現が検討できます。
• ポート番号が必要ない場合は location.hostname がシンプルでおすすめです。