JavaScriptでlocation.hostnameプロパティを使ってホスト名を取得、設定する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでlocation.hostnameプロパティを使ってホスト名を取得、設定する方法について解説しています。最初にホスト名とは何か、location.hostnameプロパティの役割を説明します。次に実際にlocation.hostnameを使ったホスト名取得の手順を見ていきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptでlocation.hostnameプロパティを使ってホスト名を取得、設定する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

location.hostnameプロパティを使ってホスト名を取得、設定する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

ホスト名とは

もともとは、ネットワークに接続されたコンピューターの名前のことです。JavaScriptで扱う際は、URLの初めの/(スラッシュ)までの部分(下記の赤で囲った部分)という認識で良いでしょう。

 

location.hostnameプロパティとは

現在位置の情報を持つLocationオブジェクトのプロパティで、URLのドメインを収めた文字列を格納しています。平たく言うと、URLのホスト名の部分を格納したプロパティです。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

location.hostnameプロパティの使い方

JavaScriptに組み込まれているWindow.locationのプロパティなので、そのままWindow.location.hostnameと記述することで使用できます。
Windowは省略可能なのでlocation.hostnameと記述しても使用できます。

 

ホスト名を取得する方法

location.hostnameと記述することでホスト名が取得できます。

 

ホスト名を設定する方法

location.hostnameにホスト名になる文字列を代入することで設定できます。設定した場合、現在のURLのホスト名が書き換わったものにページ移動します。

 

実際に書いてみよう

ホスト名を扱う一例として、TECHACADEMYジュニアのページ(https://junior.techacademy.jp/about)にアクセスしてlocation.hostnameを使ってみます。ブラウザがChromeの場合は、TECHACADEMYジュニアのページが表示されたら、デベロッパーツールを開いてJavaScriptを実行するのが早くて楽です。

デベロッパーツールの開き方

デベロッパーツールのコンソールのタブで下記の記述をします。

location.hostname

ホスト名である「junior.techacademy.jp」が表示されたかと思います。続いてホスト名をTechAcademyのページの「TechAcademy」に変更してみます。下記のようにhostnameにホスト名を代入するだけです。

location.hostname = 'techacademy.jp'

ホスト名が書き変わりTechAcademyのページ(https://techacademy.jp/about)が表示されたかと思います。

 

まとめ

JavaScriptでURLを扱う処理を作る際は、Locationオブジェクトのプロパティからそのまま使えますので適宜使ってみてください。

 

監修してくれたメンター

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。