TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでlocation.hostnameプロパティを使ってホスト名を取得、設定する方法を現役エンジニアが解説【初心者向け】
icon
icon
JavaScript

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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

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

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

お願いします！

 

ホスト名とは

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

 

location.hostnameプロパティとは

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

 

[PR] フロントエンドで副業する学習方法を動画で公開中

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）が表示されたかと思います。

 

1時間でできる無料体験！

まとめ

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

 

監修してくれたメンター

横山茂雄（よこやましげお）

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

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

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

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

記事を検索

関連するキーワード

関連する記事

JavaScriptで要素をセンタリングする方法を現役エンジニアが解説【初心者向け】

JavaScriptで要素をセンタリングする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 ...
JavaScript

JavaScriptで配列から重複を削除する方法を現役エンジニアが解説【初心者向け】

JavaScriptで配列から重複を削除する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けの...
JavaScript

JavaScriptのテキストエディタの選び方を現役エンジニアが解説【初心者向け】

JavaScriptのテキストエディタの選び方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 ...
JavaScript

JavaScriptで数値を3桁ずつのカンマ区切りに変換する方法を現役エンジニアが解説【初心者向け】

JavaScriptで数値を3桁ずつのカンマ区切りに変換する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解...
JavaScript

JavaScriptのgetElementsByNameメソッドの使い方を現役エンジニアが解説【初心者向け】

JavaScriptのgetElementsByNameメソッドの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者...
JavaScript

JavaScriptで正規表現のグループ化を使ってmatchメソッドで文字列を抽出する方法を現役エンジニアが解

JavaScriptで正規表現のグループ化を使ってmatchメソッドで文字列を抽出する方法について、TechAcademyのメンター（現役エンジニア）が実際のコ...
JavaScript

あわせてよく読まれている記事

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

JavaScriptでlocation.hostプロパティを使ってホスト名とポート番号を取得、設定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでlocation.hostプロパティを使ってホスト名とポート番号を取得、設定する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 ホスト名、ポート番号と location.hostプロパティとは location.hostプロパティの使い方 まとめ   ホスト名、ポート番号とは ブラウザでWebサイトを表示するには、Webサイトの住所であるURLを指定します。例えばYahoo!のURLは以下のようになります。 https://www.yahoo.co.jp/ URLの構成は以下のとおりです。 プロトコル(通信手段)：上記では「https」が該当します。現在はほとんど https が使用されています ホスト名：上記では「www.yahoo.co.jp」が該当します。ホスト名はWebサイトが格納されているサーバの住所を示しています ポート番号：上記では省略されています。ポート番号はホストに対してプロトコルごとに用意されている接続先の番号です。httpsの場合は 443 となりますので上記のURLは「https://www.yahoo.co.jp:443/」と同等です ディレクトリ名やファイル名：上記では指定していません。ポート番号以降に表示するディレクトリ名やファイル名を指定可能です。   [PR] フロントエンドで副業する学習方法を動画で公開中location.hostプロパティとは JavaScriptでURLに関する情報を取得、更新するにはLocationインタフェースを使用します。Locationインタフェースはdocument.locationまたは window.locationプロパティで参照可能です。 Locationインタフェース について、詳しくは以下のサイトも参考にしてください。 MDN – Location location.hostプロパティの使い方 今回のサンプルプログラムでは、window.locationプロパティからホスト名とポート番号を取得、設定する方法を確認します。実行はChromeブラウザのデベロッパーツールのコンソールで行います。はじめにYahoo!JapanのWeb サイトを開いておきましょう。 Yahoo!Japan ホスト名とポート番号を取得する方法 ホスト名とポート番号を取得するにはlocation.hostと記述します。 location.host 実行結果は以下のとおりです。 "www.yahoo.co.jp"   ホスト名とポート番号を設定する方法 ホスト名とポート番号を設定するにはlocation.hostに値を代入します。 location.host = "www.google.com" 実行すると、Webサイトが Google に変更されます。これはホスト名とポート番号が変更され、URLが「https://www.google.com/」となったためです。 まとめ 今回の記事ではJavaScriptでlocation.hostプロパティを使ってホスト名とポート番号を取得、設定する方法を学習しました。 筆者プロフィール 太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア 普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。 開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。 地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

JavaScriptでlocationオブジェクトを使う方法【初心者向け】

JavaScriptをプログラミング初心者向けに紹介した記事です。 今回は、JavaScriptでlocationオブジェクトを使う方法について解説します。 また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。   本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。   なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。   大石ゆかり 田島メンター！locationオブジェクトというのは何でしょうか？ 田島悠介 ブラウザで表示したWebページのアドレス（URL）に関する情報が格納されているんだ。また、指定したアドレスに移動したりもできるんだよ。 大石ゆかり どのような書き方があるのですか？ 田島悠介 例を見ながら説明していくね！   locationオブジェクトとは プログラムを作っていると、Webページのアドレス（URL）に関する情報を取得したり、指定したアドレスに移動したい場面があるのではないでしょうか。そんな時に便利なのが、locationオブジェクトです。 URLとは、Uniform Resource Locator の略で、インターネット上でのページの「住所＝アドレス」のことを指します。URLには、情報の種類やサーバ名、ポート番号やファイル名など、プログラミングで使える様々な情報が格納されています。 それらの情報が格納されているのがlocationオブジェクトです。 実際の開発現場では、URLからパラメータを取得したり、指定したアドレスに移動したりする時に使います。   locationオブジェクトの書き方 基本的なプログラムは以下のようになります。locationキーワードの後ろに「.」ピリオドを付けて関数名を記載します。 主な関数については次章で紹介します。 location.関数名   [PR] フロントエンドで副業する学習方法を動画で公開中locationオブジェクトの主な使い方 この記事では、locationオブジェクトの主な使い方について解説します。 まずは、簡単な関数を用意します。 <!DOCTYPE html> <html lang = "ja"> <head> <meta charset = "utf-8"> <title>JavaScriptの練習</title> </head> <body> <script> // locationオブジェクトを表示 console.log(location); // urlを取得 var url = location.href; console.log(url); // プロトコルを取得 var protocol =
JavaScript

JavaScriptで現在のURLを取得する方法を現役エンジニアが解説【初心者向け】

JavaScriptで現在のURLを取得する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 現在のURLを取得する方法について詳しく説明していくね！ 大石ゆかり お願いします！   現在のURLを取得する方法 URLとはWebサイトのインターネット上のアクセス方法を示す文字列です。例えば以下のような文字列になります (※実際には存在しないURLなのでご注意ください)。 https://techacademy.jp/magazine/wp-content/uploads/2017/07/index.html2_-620×437-e1499391542321.png URLはいくつかの要素に分解されます。例えば上記の場合は以下のとおりです。 プロトコル：通信手段です。「https」が該当します。現在はほとんどのWebサイトが https を使用しています。 ホスト名：WebサイトがあるWebサーバー名です。「www.example.com」が該当します。 ファイル名：ブラウザに表示されるWebサイトのファイル名です。「index.html」が該当します。Webサーバーの仕組みによっては、実在するファイルではなくWebサーバーのプログラムで動的に生成した情報を表示している場合もあります。 URLについてはさらに多くの要素が含まれます。詳しくは以下の記事を参考にしてください mozilla.org-What_is_a_URL JavaScriptで現在のURLを取得するには location インタフェースを使用します。以下は location インタフェースからURL全体を取得する記述例です。 location.href location インタフェースについて、詳しくは以下の記事を参考にしてください。 mozilla.org-Location   実際に書いてみよう 今回は location インタフェースから様々なURL情報を取得してみます。実行はブラウザのコンソールから行います。ブラウザはChromeを使用しました。 はじめに任意のWebサイトを開き、デベロッパーツールのコンソールを開きます。今回はtechacademyのトップページを例にご説明します。 https://techacademy.jp/ コンソールを開いたら以下のように入力しましょう。 location.href 実行結果は以下のようになります。 次にホスト名のみを表示してみましょう。 location.hostname 実行結果は以下のようになります。 実際にWebページ内のJavaScriptで location インタフェースを使用する場合は以下のように記述します。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>sample</title> </head> <body> <button onclick="func1()">現在のURL情報を表示</button> <script language="javascript" type="text/javascript"> function func1() { console.log("href:", location.href); console.log("protocol:", location.protocol); console.log("host:", location.host);
JavaScript

JavaScriptでlocation.hashプロパティを使ってURLのハッシュを取得する方法を現役エンジニアが解説【初心者向け】

JavaScriptでlocation.hashプロパティを使ってURLのハッシュを取得する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでlocation.hashプロパティを使ってURLのハッシュを取得する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 ハッシュとは location.hashプロパティとは location.hashプロパティの使い方 location.hrefでURLのハッシュを取得する方法 実際に書いてみよう まとめ   ハッシュとは URLにおけるハッシュとは、#の後の文字列のことです。 Twitterなどでも#をつけてハッシュタグとして、特定の項目を表したりしますがこれと同じようなものです。HTMLにidを設定し、そのidをハッシュで指定したURLはページの表示位置がそのハッシュのidを持つHTMLタグの場所になります。 平たく言うと、ハッシュはURLで指定したページの表示位置を指定しているということになります。下記にMDNのlocation.hashのリファレンスのURLを載せてみました。 下のものにはハッシュを#Examplesとつけています。実際にこのリンクをクリックすると、同じページを表示しますがハッシュのあるものは、Examplesという項目の位置を表示していることが確認できるかと思います。 developer.mozilla.org/ja/docs/Web/API/Location/hash developer.mozilla.org/ja/docs/Web/API/Location/hash#Examples（ハッシュあり） [PR] フロントエンドで副業する学習方法を動画で公開中location.hashプロパティとは URLを現すLocationインターフェースのプロパティで、#を含むハッシュのデータが格納されています。先程のMDNのリファレンスのハッシュ付きリンクの場合は、#Examplesが格納されています。 location.hashプロパティの使い方 locationは、記述の省略が可能なwindowオブジェクトのプロパティです。そのため、そのままlocation.hashと記述することで使うことができます。 location.hrefでURLのハッシュを取得する方法 location.hashと記述することで現在のURLのハッシュ部分を取得できます。location.hashにHTMLに設定したidを設定することでその位置に移動することもできます。 いわゆる、ページ内遷移です。 実際に書いてみよう 記述は下記のものだけです。 location.hash 簡単にhashの値を確認する方法として、冒頭で紹介したMDNのハッシュ付きページを開いてブラウザの開発者ツールなどでコンソールにlocation.hashと記述してみてください。 #Examplesと表示されるはずです。 参考までにChromeブラウザの開発者ツールの開き方をGoogleのサイトで紹介したページのリンクを貼っておきます。 Chromeの開発者ツールの開き方（英語） まとめ URLのハッシュを使えば、初期の表示を指定した位置にすることができます。 JavaScriptでハッシュを取得したり書き換えることでページ内遷移ができます。ページのトップにスクロールを戻したり、中盤にある項目までスクロールさせたりとユーザーを助けることができますので活用してみてください。 筆者プロフィール 横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

サイズ指定に役立つ！CSSでcalc( )を使う方法【初心者向け】

CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。 異なる単位で複雑な計算も簡単に指定できます。 レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。 目次ホスト名とはlocation.hostnameプロパティとはlocation.hostnameプロパティの使い方ホスト名を取得する方法ホスト名を設定する方法実際に書いてみようまとめ監修してくれたメンター そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   大石ゆかり CSSで3等分にした要素の幅を設定するにはどうしたらいいですか？ 田島悠介 いろいろ方法があるけどcalcファンクションを使えば簡単だよ。 大石ゆかり calc？CSSで計算ができるんですか？ 田島悠介 その通り！たとえば全体の幅から3等分した要素を作りたいならwidth: calc(100% / 3)のように指定できるよ。 大石ゆかり へぇー。わかりやすいですね。 田島悠介 そうなんだ。まずはどういった記述の仕方をするか見てみよう。 大石ゆかり はい！   calcファンクションとは CSSのcalcファンクションとは、レイアウトやサイズ指定に計算式を使えるようにしてくれるファンクションです。 通常だと100pxや3emのようにレイアウトやサイズを指定しますが、calcファンクションを用いることで、100px + 50pxや、3em – 1em のように四則演算を使えるようになります。 たとえば、縦横150pxの要素をブラウザの表示領域で中央に配置するには以下のように記述できます。 width: calc(100vw / 2 - 150px / 2); height: calc(100vh / 2 - 150px / 2); このように指定すれば、中央位置（50vw, 50vh）から150pxの要素の端から中心までの距離（150px / 2）だけずらした位置を求めて中央にセンタリングできます。   calcファンクションを使うメリット 異なる単位で計算することができる 計算が明白になる calc()は結果の値ではない 異なる単位で計算することができる CSSのcalcファンクションは、異なる単位の値で計算式を作成できます。 異なる単位で計算できれば、相対的な長さの単位（%、em、vwなど）と絶対的な長さの単位（pxやptなど）を組み合わせて、要素をセンタリングするなどの指定が簡単に記述できます。 %、em、pxなどいろいろな単位を組み合わせた計算が可能です。 たとえば、表示領域全体から固定幅 80pxの要素の残りの幅を calc(100% – 80px) のように計算式で求められます。 このように、固定幅の要素と幅が可変する要素を並べたいときに便利です。 計算が明白になる calcファンクションを使うと、値が何を意味しているかが分かりやすくなります。 たとえば3等分の幅にしたい場合、「width: 33.333333333%;」と指定するよりも「width: calc(100% / 3);」としたほうが、3等分の幅にしたいことが明白にわかります。 固定された値を指定するよりもわかりやすく、3分割や7分割などの割り切れない値も設定できます。 calc()は結果の値ではない calcファンクションの計算結果は固定されているわけではなく、ブラウザの幅などに合わせてリアルタイムに計算されます。 たとえば「height: calc(100vh – 50px);」と指定すれば、ブラウザの表示領域に合わせて常に高さが表示領域の半分より50pxだけ少なくなるように調整されます。   [PR] フロントエンドで副業する学習方法を動画で公開中calcファンクションの書き方 calcファンクションはCSSで値の代わりとして計算式を指定できます。 widthやheight、font-sizeなど値が指定できるところなら使えます。 構文 プロパティ（widthなど）: calc(式) 四則演算が使用できる 指定する式では四則演算の演算子（+、-、*、/）が使えます。 前後に空白が必要 加算（+）と減算（-）では演算子の前後に半角スペースを空ける必要があります。 除算（/）や乗算（*）では演算子の前後に半角スペースを入れなくても計算式が認識されますが、慣習として四則演算の演算子の前後には半角スペースを入れます。 ※演算子の前後に半角スペースを入れないと、加算や減算ではなく正の値や負の値として認識されます。詳しくは公式ドキュメント「calc() – CSS: カスケーディングスタイルシート | MDN」をご覧ください。 calcが利用できる場所 calcファンクションは、長さ（<length>）、周波数（<frequency>）、角度（<angle>）、時間（<time>）、数量（<number>）、整数値（<integer>）の値を設定する場所に対して使用できます。 入れ子が可能 calcファンクションは入れ子にできます。 入れ子にすると計算式の優先順位を決める、単なる括弧( )として扱われます。   calcファンクションの実装例 実際にcalcファンクションを使った実装例を見てみましょう。 ルートに基づいたサイズ指定 要素を3等分の幅にする 左右のセンタリング 上下の中央配置 ヒーローヘッダーの高さ調整 ルートに基づいたサイズ指定 calcファンクションを使えば、フォントのサイズを相対的に指定できます。 たとえば、calcファンクションでルート（最上位の要素。html要素）のフォントサイズより5px大きいサイズを指定しておけば、ルートのフォントサイズが変更されたら一緒に変わるようにできます。 スマートフォンとPCなどでフォントサイズを一括して変更したいときに便利です。 ソースコード 「text_plus」クラスの要素のフォントサイズをルートのフォントサイズの1.5倍になるようにcalcファンクションで計算します。 ルート（html要素）のフォントサイズが変更されたら、「text_plus」クラスの要素のサイズも変更されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">
CSS

PHPのgethostnameメソッドの使い方を現役エンジニアが解説【初心者向け】

今回は、PHPのgethostnameメソッドの使い方について解説します。   そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPHP/Laravel講座の内容をもとに紹介しています。   田島悠介 今回は、PHPに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 PHPのgethostnameメソッドの使い方について詳しく説明していくね！ 大石ゆかり お願いします！   PHPのgethostnameメソッドとは PHPのgethostnameメソッドとは、ホスト名を取得するための関数です。PHPのgethostnameメソッドは、PHP5.3.0以降のPHP5系、PHP7系で利用することが可能です。ホスト名とは、ネットワーク上でコンピュータを識別するための名称を意味します。 例えば学校や、企業内のネットワーク内で接続されているコンピュータやプリンタやNAS等の表示を見たことが有るかと思います。プリンタとは印刷機のことです。プリンタであれば、一般的にはプリンタの型番が表示されています。 NASとは、Network Attached Storageの略称で、ネットワークに接続されているHDDやSSDなどの大容量記憶装置を意味します。 プリンタもNASも、接続している他のユーザからわかりやすいようにホスト名を設定していることがあるということです。   gethostnameメソッドの使い方 サンプルコード gethostname() php_uname('n')   解説 gethostname()というコードをPHPプログラム中に記載することで、ホスト名を取得することが可能です。 PHP5.3より前のPHPの場合は、php_uname(‘n’)と記載することで、gethostname()と同様に、ホスト名を取得することが可能です。   [PR] フロントエンドで副業する学習方法を動画で公開中実際に書いてみよう サンプルコード <?php $host1 = gethostname(); echo $host1 . "\n"; $host2 = php_uname('n'); echo $host2; ?>   表示結果 e7f7d468662d e7f7d468662d   解説 1行目の<?phpでは、PHPプログラムを開始するということを宣言しています。 2行目の$host1 = gethostname();では、変数$hostにホスト名を代入しています。 ホスト名自体は、gethostname();で取得しています。 3行目のecho $host1 . “\n”;では、2行目で代入した変数$host1にはいっているホスト名を表示しています。 . “\n”;の部分で改行しています。 4行目の$host2 = php_uname(‘n’);では、PHPのバージョンが5.3より前の場合用にサンプルコードを用意しました。 本来は、同じプログラム内で、別のバージョンのPHPを実行するわけでは無い点に注意が必要です。 ただ、php_uname(‘n’);自体は、PHP5.3以降のPHPでも利用可能です。 実際には、PHPのバージョンにより2行目と4行目どちらかを使い分ける必要があります。変数$host2には、php_uname(‘n’);で取得したホスト名を代入しています。 5行目のecho $host2;では、4行目で取得したホスト名を表示しています。 6行目の?>は省略可能です。PHPの処理が終了することを意味しています。 今回は、ホスト名がe7f7d468662dだったため、e7f7d468662dと表示され、改行後、再度、e7f7d468662dと表示されました。   今回は、PHPのgethostnameメソッドの使い方について解説しました。 筆者プロフィール 中本賢吾（なかもとけんご） アジマッチ有限会社　代表取締役社長 開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。 地域の職業プログラマー育成活動では、小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもPHPやフレームワークのLaravelを使ってWebアプリケーション開発を習得できるオンラインブートキャンプPHP/Laravel講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
PHP

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでlocation.hostnameプロパティを使ってホスト名を取得、設定する方法を現役エンジニアが解説【初心者向け】