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

 

まとめ

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

 

監修してくれたメンター

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

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

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

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

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

記事を検索

関連するキーワード

関連する記事

JavaScriptでJSONのエスケープを行う方法を現役エンジニアが解説【初心者向け】

JavaScriptでJSONのエスケープを行う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...
JavaScript

JavaScriptでオブジェクトにプロパティを追加する方法を現役エンジニアが解説【初心者向け】

JavaScriptでオブジェクトにプロパティを追加する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説し...
JavaScript

JavaScriptでFile APIを利用する方法を現役エンジニアが解説【初心者向け】

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

JavaScriptのPromiseの仕組みについて現役エンジニアが解説【初心者向け】

JavaScriptのPromiseの仕組みについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
JavaScript

JavaScriptでファイル名を取得する方法を現役エンジニアが解説【初心者向け】

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

JavaScriptでの再帰関数の書き方を現役エンジニアが解説【初心者向け】

JavaScriptでの再帰関数の書き方について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けの...
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

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

データベースはコマンドを打つことで操作していきますが、そのやり方などを実際にやりながら覚えていくのが近道です。 MySQLでサーバに接続することで、MySQLのデータをプログラムで利用できます。 実務でも、MySQLでサーバに接続して、Webサービスの開発を行いますので、ぜひ学習してみてください。 本記事では初心者向けに、MySQLでサーバに接続する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次ホスト名とはlocation.hostnameプロパティとはlocation.hostnameプロパティの使い方ホスト名を取得する方法ホスト名を設定する方法実際に書いてみようまとめ監修してくれたメンター そもそも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

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

JavaScriptでlocation.pathnameプロパティを使ってURLのパス名を取得・変更する方法を現役エンジニアが解説【初心者向け】

JavaScriptでlocation.pathnameプロパティを使ってURLのパス名を取得、変更する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでlocation.pathnameプロパティを使ってURLのパス名を取得、変更する方法について詳しく説明していくね！ 大石ゆかり お願いします！   URLのパス名とは URLのパス名とは、URLの中でもファイルの場所を示す部分の事です。 例えば、”https://abc.com/aaa/bbb/ccc.html”というURLがあったとして、パス名は”/aaa/bbb/ccc.html”になります。 location.pathnameプロパティとは location.pathnameプロパティでは現在のページのパス名を参照することが出来ます。 [PR] コーディングで副業する方法とはlocation.pathnameプロパティの使い方 location.pathnameで現在のページのパス名の取得、location.pathname = “pathname”でパス名を指定し、ページ遷移することが出来ます。 URLのパス名を取得する方法 以下のようにlocation.pathnameで現在のパス名を取得することができます。 var pathName = location.pathname;   URLのパス名を変更する方法 以下のようにlocation.pathnameに値を代入することによってパス名を変更することが出来ます。 location.pathname = "/newpath/index.html";   実際に書いてみよう では実際にパス名の取得、変更するコードを書いてみましょう。 <html> <head> <meta charset="utf-8" /> </head> <body> <button id="page">ページ遷移</button> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script> <script> // パス名取得 var pathName = location.pathname; console.log(pathName); $('#page').on('click', function() { location.pathname =
JavaScript

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

副業したい方

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

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

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

スキルアップしたい方

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

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

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

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