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

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

初心者向けにJavaScriptでlocation.hostプロパティを使ってホスト名とポート番号を取得、設定する方法について現役エンジニアが解説しています。ホスト名とはドメイン名のことで、ポート番号とはアプリなどが使用する出入口です。取得・設定するにはlocation.hostプロパティを使います。

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

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

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptでlocation.hostプロパティを使ってホスト名とポート番号を取得、設定する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

  1. ホスト名、ポート番号と
  2. location.hostプロパティとは
  3. location.hostプロパティの使い方
  4. まとめ

 

ホスト名、ポート番号とは

ブラウザで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サービス公開を習得できる、オンラインブートキャンプを開催しています。

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

記事を検索

関連するキーワード

関連する記事

Railsで特定のページのみJavaScriptを読み込む方法を現役エンジニアが解説【初心者向け】

Railsで特定のページのみJavaScriptを読み込む方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説...
JavaScript

JavaScriptでsplitメソッドを使って分割する時に区切り文字を残す方法を現役エンジニアが解説【初心者

JavaScriptでsplitメソッドを使って分割する時に区切り文字を残す方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使っ...
JavaScript

ChromeでJavaScriptを無効／停止する方法を現役エンジニアが解説【初心者向け】

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

JavaScriptのクロージャの使い方を現役エンジニアが解説【初心者向け】

JavaScriptのクロージャの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そ...
JavaScript

JavaScriptで作成した要素にイベントを追加する方法を現役エンジニアが解説【初心者向け】

JavaScriptで作成した要素にイベントを追加する方法について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 ...
JavaScript

JavaScriptで配列を分割する方法を現役エンジニアが解説【初心者向け】

JavaScriptで配列を分割する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そ...
JavaScript

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

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

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）が表示されたかと思います。   まとめ JavaScriptでURLを扱う処理を作る際は、Locationオブジェクトのプロパティからそのまま使えますので適宜使ってみてください。   監修してくれたメンター 横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ 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

MySQLでサーバに接続する方法【初心者向け】

データベースはコマンドを打つことで操作していきますが、そのやり方などを実際にやりながら覚えていくのが近道です。 MySQLでサーバに接続することで、MySQLのデータをプログラムで利用できます。 実務でも、MySQLでサーバに接続して、Webサービスの開発を行いますので、ぜひ学習してみてください。 本記事では初心者向けに、MySQLでサーバに接続する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次ホスト名、ポート番号とはlocation.hostプロパティとはlocation.hostプロパティの使い方まとめ筆者プロフィール そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   MySQLでサーバに接続する方法 今回は、Macでターミナルを使い進めていきます。 Windowsの方はコマンドプロンプトを使っておこなってください。 今さら聞けない！コマンドプロンプトの使い方も参考にしてみてください。   ターミナルのコマンド例 Macでフォルダの中身を出力する ls   Macでlsと実行すると、フォルダの中にあるファイルやフォルダの一覧が表示されます。   Windowsでフォルダの中身を出力する dir Windowsでdir実行すると、フォルダの中にあるファイルやフォルダの一覧が表示されます。   フォルダ名へ移動する フォルダ名へ移動する cd フォルダ名 MacもWindowsも、cd フォルダ名というコマンドで、フォルダ名のフォルダに移動できます。   例えば、 XAMPP の bin というフォルダに移動したい場合は次のように実行します。 cd /Applications/XAMPP/bin   Macであれば、ls を入力するとbin の中身が表示されます。   大石ゆかり 接続するって、自分のPCの中にあるMySQLにですか？ 田島悠介 MySQLってサーバソフトなんだよね。ポート番号で待ち受けていて、外から接続することができるんだ。今回はコマンドプロンプトからなので、MySQLの本体があるフォルダに移動してログインするんだよ。 大石ゆかり ユーザーIDとパスワードでログイン、という感じでしょうか？ 田島悠介 そうそう。では、実際にログインしてみよう！   MySQLにログインする MySOLにログインすることで、データベースの操作が可能になります。   MySQLにログインするコマンド コマンドプロンプトを起動後、次のコマンドを打ちMySQLにログインします。 mysql -u ユーザー名   次のように表示されればMySQLに接続したことを意味します。 mysql>   [PR] フロントエンドで副業する学習方法を動画で公開中PHPでMySQLに接続する ここでは、PHPでMySQLに接続する解説をします。 サンプルコード $host = 'ホスト名'; $username = 'ユーザー名'; $password = 'パスワード名'; $db_name = 'データベース名'; mysqli_connect($host, $username, $password, $db_name); 解説 ホスト名、ユーザー名、パスワード名、データベース名を設定することで接続設定が完了します。   LaravelでMySQLに接続する ここでは、LaravelでMySQLに接続する解説をします。 .envファイルの設定 Laravelプロジェクト直下にある.envファイルの中の次の箇所を設定します。 設定内容には、データベース名とユーザー名とパスワードにそれぞれあらかじめ用意した内容を設定します。   php artisan migrateの実行 php artisan migrateコマンドをターミナル（コマンドプロンプト）で実行することで、LaravelからMySQLへの接続情報が反映されます。   php artisan tinkerの実行 php artisan tinkerコマンドをターミナル（コマンドプロンプト）で実行することで、LaravelからMySQLの操作が可能になります。   以上が、Laravelを利用したMySQLへの接続操作です。   RubyでMySQLに接続する ここでは、RubyでMySQLに接続する解説をします。 mysql2の環境構築 現在利用されているサーバOSはUbuntuのシェアが高いです。 UbuntuはLinuxというサーバの一種です。 UbuntuでRubyからMySQLに接続する方法として、 mysql2 というGemをインストールするのが一般的です。 Gemというのは、RubyGemsという名称の略語です。 RubyGemsは、Rubyで用意されたパッケージ管理システムです。 Ubuntuで、mysql2をインストールするコマンドは次のとおりです。 sudo apt install libmysqlclient-dev -y gem install mysql2   app.rbへの記載例 app.rbのコード require 'sinatra' require 'mysql2' get '/' do client = Mysql2::Client.new(host: 'ホスト名', username: 'ユーザー名', password: 'パスワード名', database: 'データベース名',
MySQL

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

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

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

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