JavaScriptのlocation.hostプロパティによるホスト名取得方法10選

●location.hostとは？

今回は、JavaScriptのlocation.hostプロパティについて詳しく解説していきます。

location.hostは、Webサイトのホスト名（ドメイン名とポート番号）を取得するために使用される便利なプロパティです。

例えば、あなたがWebデザイナーとして働いていて、サイトのホスト名に応じて動的にコンテンツを切り替えたいと考えているとします。

そんな時、location.hostを使えば、現在のホスト名を簡単に取得することができます。

これにより、より動的で魅力的なWebサイトを作成することが可能になるのです。

○location.hostの基本的な使い方

では、location.hostの基本的な使い方について見ていきましょう。

location.hostを使うと、現在のURLのホスト名を文字列として取得することができます。

例えば、現在のURLが “https://www.example.com/index.html” だとすると、location.hostの値は “www.example.com” となります。

ポート番号が指定されている場合、例えば “https://www.example.com:8080/index.html” の場合は、location.hostの値は “www.example.com:8080” となります。

○サンプルコード1：現在のホスト名を取得する

それでは、実際にlocation.hostを使って現在のホスト名を取得してみましょう。

次のようなシンプルなコードを書くことで、ホスト名を表示することができます。

console.log(location.host);

このコードをWebページ内で実行すると、コンソールに現在のホスト名が出力されます。

例えば、”www.example.com” や “localhost:3000” といった具合です。

実行結果

www.example.com

このように、location.hostを使えば、わずか1行のコードでホスト名を取得することができます。

これは、動的なWebサイトを作成する上で非常に重要な情報となります。

○location.hostと他のLocationプロパティの違い

ここで、location.hostと他のLocationオブジェクトのプロパティの違いについて触れておきましょう。

Locationオブジェクトには、URLに関する様々な情報を取得するためのプロパティが用意されています。

例えば、location.hrefはURL全体を、location.pathnameはパス名部分を、location.searchはクエリ文字列を、それぞれ取得するために使用されます。

これらのプロパティを使い分けることで、URLのさまざまな部分にアクセスすることができます。

location.hostは、これらのプロパティの中でも、特にホスト名に特化したプロパティです。

ホスト名は、Webサイトを識別する上で非常に重要な情報であり、location.hostを使えば、それを簡単に取得することができるのです。

●location.hostを使ったホスト名の取得方法

さて、location.hostの基本的な使い方がわかったところで、実際にlocation.hostを使ってホスト名を取得し、それを様々な方法で活用する方法について見ていきましょう。

ここからは、より実践的なサンプルコードを交えながら、location.hostの使い方を詳しく解説していきます。

○サンプルコード2：ホスト名を変数に格納する

まずは、取得したホスト名を変数に格納する方法から始めましょう。

これは、後でホスト名を再利用する場合に便利です。

const hostname = location.host;
console.log(hostname);

このコードでは、location.hostの値を hostname という変数に代入しています。

そして、console.log() を使って、その変数の値を出力しています。

実行結果

www.example.com

こうすることで、取得したホスト名を後から何度でも使うことができます。

例えば、ホスト名に応じて異なる処理を行いたい場合などに、この方法が役立ちます。

○サンプルコード3：ホスト名を条件分岐に使用する

次に、取得したホスト名を条件分岐に使用する方法を見ていきましょう。

これは、ホスト名に応じて異なる処理を行いたい場合に非常に便利です。

const hostname = location.host;

if (hostname === 'www.example.com') {
  console.log('This is the main website.');
} else if (hostname === 'blog.example.com') {
  console.log('This is the blog section.');
} else {
  console.log('Unknown host.');
}

このコードでは、まずホスト名を hostname 変数に格納しています。

そして、if...else if...else 文を使って、ホスト名に応じて異なるメッセージを出力しています。

実行結果（ホスト名が ‘www.example.com’ の場合）

This is the main website.

実行結果（ホスト名が ‘blog.example.com’ の場合）

This is the blog section.

実行結果（ホスト名がその他の場合）

Unknown host.

このように、location.hostを使えば、ホスト名に応じて柔軟に処理を切り替えることができます。

これは、マルチドメイン環境でのWebサイト開発などで特に役立つテクニックです。

○サンプルコード4：ホスト名を関数の引数に渡す

ホスト名を関数の引数に渡すことで、より柔軟で再利用性の高いコードを書くことができます。

次のサンプルコードを見てみましょう。

function greetUser(hostname) {
  if (hostname === 'www.example.com') {
    console.log('Welcome to the main website!');
  } else if (hostname === 'blog.example.com') {
    console.log('Welcome to our blog!');
  } else {
    console.log('Welcome to our website!');
  }
}

const hostname = location.host;
greetUser(hostname);

このコードでは、greetUser() という関数を定義しています。

この関数は、ホスト名を引数として受け取り、それに応じて異なる歓迎メッセージを出力します。

そして、location.hostから取得したホスト名を hostname 変数に格納し、それを greetUser() 関数の引数として渡しています。

実行結果（ホスト名が ‘www.example.com’ の場合）

Welcome to the main website!

実行結果（ホスト名が ‘blog.example.com’ の場合）

Welcome to our blog!

実行結果（ホスト名がその他の場合）

Welcome to our website!

このように、ホスト名を関数の引数として渡すことで、コードの再利用性を高めることができます。

これは、大規模なWebサイトの開発などで特に重要なテクニックとなります。

○サンプルコード5：ホスト名を配列に追加する

最後に、取得したホスト名を配列に追加する方法を見ていきましょう。

これは、複数のホスト名を管理する場合に便利です。

const hostnames = [];
hostnames.push(location.host);
console.log(hostnames);

このコードでは、まず空の配列 hostnames を作成しています。

そして、push() メソッドを使って、location.hostから取得したホスト名をその配列に追加しています。

最後に、console.log() で配列の中身を出力しています。

実行結果

['www.example.com']

このように、ホスト名を配列に追加することで、複数のホスト名を一元的に管理することができます。

これは、例えば、許可されたホスト名のリストを作成するような場合に役立ちます。

●よくあるエラーと対処法

さて、ここまでlocation.hostの基本的な使い方と、その応用例を見てきました。

しかし、実際にlocation.hostを使っていると、時々思わぬエラーに遭遇することがあります。

初心者のWebデザイナーの皆さんも、きっと「あれ？思ったようにホスト名が取得できない！」なんて経験があるのではないでしょうか。

でも、ご安心ください。そんなエラーにも、ちゃんと対処法があるんです。

○エラー1：location.hostがundefinedになる原因と対処法

まずは、location.hostの値がundefinedになってしまうエラーについて見ていきましょう。

このエラーが発生する主な原因は、JavaScriptコードがHTMLファイルから切り離されていることです。

例えば、JavaScriptコードが外部ファイルに記述されていて、そのファイルがHTMLファイルから正しく読み込まれていない場合などです。

このエラーを解決するには、次の点を確認してみてください。

• JavaScriptファイルがHTMLファイルから正しく読み込まれているか
• JavaScriptコードがHTMLファイルの<body>タグの最後に記述されているか

これを確認し、必要に応じて修正することで、undefinedエラーを解決することができます。

○エラー2：location.hostが空文字列になる原因と対処法

次に、location.hostの値が空文字列になってしまうエラーについて見ていきましょう。

このエラーが発生する主な原因は、Webページがローカル環境で開かれていることです。

つまり、file://プロトコルを使ってHTMLファイルを直接開いている場合などです。

この場合、location.hostは空文字列を返します。

このエラーを解決するには、次の点を確認してみてください。

• Webサーバー（Apache、Nginx、IISなど）を使ってHTMLファイルを開く
• http://またはhttps://プロトコルを使ってWebページにアクセスする

これを確認し、必要に応じて修正することで、空文字列エラーを解決することができます。

○エラー3：location.hostが期待した値にならない原因と対処法

最後に、location.hostの値が期待した値にならないエラーについて見ていきましょう。

このエラーが発生する主な原因は、Webページが予期しないURLでアクセスされていることです。

例えば、リダイレクトを使っている場合や、URLに特殊文字が含まれている場合などです。

このエラーを解決するには、次の点を確認してみてください。

• リダイレクト前のURLを使う
• URLエンコーディングを使って特殊文字を処理する

これを確認し、必要に応じて修正することで、期待した値が取得できるようになります。

●location.hostの応用例

さて、ここまでlocation.hostの基本的な使い方と、その際に発生しうるエラーへの対処法を見てきました。

皆さんも、だんだんとlocation.hostへの理解が深まってきたのではないでしょうか。

ここからは、location.hostのより実践的な応用例を見ていきましょう。

この例を通して、location.hostの真の力を体感してください。

○サンプルコード6：ホスト名に応じてCSSを動的に切り替える

まずは、ホスト名に応じてCSSを動的に切り替える方法から始めましょう。

これは、同じHTMLファイルを使いながら、ホスト名ごとに異なるデザインを適用したい場合に便利です。

const hostname = location.host;

if (hostname === 'www.example.com') {
  document.write('<link rel="stylesheet" href="style1.css">');
} else if (hostname === 'blog.example.com') {
  document.write('<link rel="stylesheet" href="style2.css">');
} else {
  document.write('<link rel="stylesheet" href="default.css">');
}

このコードでは、location.hostで取得したホスト名に応じて、異なるCSSファイルを動的に読み込んでいます。

document.write()を使って、<link>タグを動的に生成しているのがポイントです。

実行結果（ホスト名に応じて異なるCSSが適用される）

<!-- www.example.comの場合 -->
<link rel="stylesheet" href="style1.css">

<!-- blog.example.comの場合 -->
<link rel="stylesheet" href="style2.css">

<!-- その他のホスト名の場合 -->
<link rel="stylesheet" href="default.css">

このテクニックを使えば、同じHTMLファイルを使いながら、ホスト名ごとに全く異なるデザインを適用することができます。

Webデザイナーの皆さんにとって、とても便利な方法ですよね。

○サンプルコード7：ホスト名に応じてAPIのエンドポイントを切り替える

次に、ホスト名に応じてAPIのエンドポイントを切り替える方法を見ていきましょう。

これは、開発環境と本番環境で異なるAPIサーバーを使う場合などに便利です。

const hostname = location.host;
let apiUrl;

if (hostname === 'dev.example.com') {
  apiUrl = 'https://dev-api.example.com';
} else if (hostname === 'staging.example.com') {
  apiUrl = 'https://staging-api.example.com';
} else {
  apiUrl = 'https://api.example.com';
}

console.log(apiUrl);

このコードでは、location.hostで取得したホスト名に応じて、異なるAPIのURLをapiUrl変数に代入しています。

これにより、環境ごとに適切なAPIサーバーにアクセスすることができます。

実行結果（ホスト名に応じて異なるAPIのURLが出力される）：

// dev.example.comの場合
https://dev-api.example.com

// staging.example.comの場合
https://staging-api.example.com
staging-api.example.com

// その他のホスト名の場合
https://api.example.com
api.example.com

このテクニックを使えば、環境ごとに異なる設定を簡単に切り替えることができます。

特に、複数の環境を使い分けるような大規模なWebサイトの開発では、とても重宝するでしょう。

○サンプルコード8：ホスト名に応じて広告の表示を制御する

Webサイトに広告を表示する際、ホスト名に応じて広告の表示を制御したいことがあります。

例えば、本番環境では広告を表示するが、開発環境では表示しないようにするなどです。

const hostname = location.host;

if (hostname === 'www.example.com') {
  // 広告を表示するコード
  console.log('広告を表示します');
} else {
  // 広告を表示しないコード
  console.log('広告は表示しません');
}

このコードでは、location.hostで取得したホスト名がwww.example.com（本番環境）の場合にのみ、広告を表示するようにしています。

実行結果（ホスト名に応じて広告の表示が制御される）

// www.example.comの場合
広告を表示します

// その他のホスト名の場合
広告は表示しません

このテクニックを使えば、環境ごとに広告の表示を柔軟に制御することができます。

特に、広告収入が主な収益源であるWebサイトなどでは、とても便利な方法だと言えるでしょう。

○サンプルコード9：ホスト名に応じてアクセス解析のトラッキングコードを出し分ける

Webサイトのアクセス解析を行う際、ホスト名に応じて異なるトラッキングコードを使い分けたいことがあります。

例えば、本番環境と開発環境で別のGoogle Analyticsのプロパティを使うなどです。

const hostname = location.host;

if (hostname === 'www.example.com') {
  // 本番環境用のトラッキングコード
  console.log('UA-12345678-1');
} else if (hostname === 'dev.example.com') {
  // 開発環境用のトラッキングコード
  console.log('UA-87654321-1');
} else {
  // その他の環境ではトラッキングしない
  console.log('トラッキングしません');
}

このコードでは、location.hostで取得したホスト名に応じて、異なるGoogle AnalyticsのトラッキングIDを出力しています。

実行結果（ホスト名に応じて異なるトラッキングIDが出力される）

// www.example.comの場合
UA-12345678-1

// dev.example.comの場合
UA-87654321-1

// その他のホスト名の場合
トラッキングしません

このテクニックを使えば、環境ごとに適切なアクセス解析を行うことができます。

特に、本番環境と開発環境でアクセス解析データを分けて管理したい場合などに、とても便利です。

○サンプルコード10：ホスト名を使ったセキュリティ対策

最後に、ホスト名を使ったセキュリティ対策の例を見ていきましょう。

ここでは、特定のホスト名からのアクセスのみを許可する例を示します。

const hostname = location.host;
const allowedHosts = ['www.example.com', 'blog.example.com'];

if (allowedHosts.includes(hostname)) {
  console.log('アクセスを許可します');
} else {
  console.log('アクセスを拒否します');
}

このコードでは、許可されたホスト名のリストallowedHostsを定義しています。

そして、location.hostで取得したホスト名がそのリストに含まれているかどうかをincludes()メソッドを使ってチェックしています。

実行結果（ホスト名に応じてアクセスの可否が制御される）

// www.example.comまたはblog.example.comの場合
アクセスを許可します

// その他のホスト名の場合
アクセスを拒否します

このテクニックを使えば、信頼できるホスト名からのアクセスのみを許可し、その他のホスト名からのアクセスを拒否することができます。

これは、Webサイトのセキュリティを向上させる上で、とても重要な方法の1つです。

まとめ

JavaScriptのlocation.hostプロパティは、Webページのホスト名を取得するための強力なツールです。

基本的な使い方から、実践的な応用例まで、その可能性は無限大。ホスト名に応じて動的にWebサイトの振る舞いを変えることで、よりインタラクティブで洗練されたWebサイトを作ることができます。

今回学んだことを活かして、さらなる高みを目指していきましょう。