【開発者必見！】location.host と location.hostname の使い分けでコードをスッキリさせよう！

2024-04-10

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

location.host と location.hostname は、どちらも現在のウェブページの URL に関する情報を取得するために使用される JavaScript のプロパティです。しかし、両者にはいくつかの重要な違いがあります。

location.host:

ホスト名とポート番号の両方を返します。
例: https://www.example.com:8080 の場合、location.host は www.example.com:8080 を返します。
デフォルトポート (80 または 443) が使用されている場合は、ポート番号は省略されます。

ホスト名のみを返します。
ポート番号は常に省略されます。

ブラウザ間互換性:

両方のプロパティは、すべての主要なブラウザでサポートされています。
互換性の問題に関しては、location.host は location.hostname よりも新しいプロパティであることに注意する必要があります。
古いブラウザでは、location.host が存在しない可能性があります。

使用例:

ホスト名とポート番号の両方が必要な場合は、location.host を使用します。
例えば、現在のページの URL をログに記録したい場合は、次のように記述できます。

console.log(location.host); // "www.example.com:8080"

現在のページが同じドメイン上の別のページに移動するリンクを作成したい場合は、次のように記述できます。

const link = document.createElement('a');
link.href = `https://${location.hostname}/other-page.html`;

location.host はホスト名とポート番号を返します。
使用例は、必要な情報によって異なります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>location.host vs location.hostname</title>
</head>
<body>
  <h1>現在の URL</h1>
  <p>ホスト名とポート番号: <code><span id="host"></span></code></p>
  <p>ホスト名のみ: <code><span id="hostname"></span></code></p>

  <script>
    const hostElement = document.getElementById('host');
    const hostnameElement = document.getElementById('hostname');

    hostElement.textContent = location.host;
    hostnameElement.textContent = location.hostname;
  </script>
</body>
</html>

このコードを実行すると、現在のページのホスト名とポート番号、およびホスト名のみが表示されます。

<a href="https://${location.hostname}/other-page.html">別のページへ</a>

現在のページのホスト名を使用して、そのホスト名のウェブサイトのホームページに移動するリンクを作成する:

<a href="https://${location.hostname}">ホームページへ</a>

location.host と location.hostname 以外の方法

現在のページの完全な URL を返します。
例: https://www.example.com:8080/path/to/page.html

現在のページの通信プロトコル (HTTP または HTTPS) を返します。
例: https

例: 8080

例: /path/to/page.html

例: ?param1=value1&param2=value2

現在のページのハッシュフラグメントを返します。
例: #fragment

これらのプロパティは、location.host と location.hostname と同様に、さまざまな状況で使用できます。

console.log(location.href); // "https://www.example.com:8080/path/to/page.html"

現在のページが HTTPS を使用しているかどうかを確認したい場合は、次のように記述できます。

if (location.protocol === 'https') {
  // HTTPS を使用している
} else {
  // HTTPS を使用していない
}

location.host と location.hostname は、現在のウェブページのホスト名に関する情報を取得するために使用されます。
location.href、location.protocol、location.port、location.pathname、location.search、location.hash などの他のプロパティも、URL に関する情報を取得するために使用できます。