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

初心者向けにJavaScriptでlocation.pathnameプロパティを使ってURLのパス名を取得、変更する方法について現役エンジニアが解説しています。location.pathnameプロパティとは、現在のページ(URL)のパス名が入っているプロパティです。値を変更するとURLのパスも変更されます。

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

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] JavaScript・jQueryで挫折しない学習方法を動画で公開中

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 = "/";
  });
</script>
  </body>
</html>

まずlocation.pathnameを参照し、コンソールにパス名を表示しています。

ページ遷移ボタンをクリックするとlocation.pathnameに”/”が代入され、トップページに遷移します。

まとめ

さて、今回のJavaScriptによるパス名の取得、変更方法はいかがでしたでしょうか。

Webアプリを作っていて現在のパス名を取得する機会は何かとあると思いますので活用できると良いと思います。

筆者プロフィール

黒木一志(くろきかずし)

TechAcademyジュニアのゲームアプリコースを担当しています黒木です。現在は会社員としてシステムエンジニアをしております。

会社ではC#にて業務系アプリの開発を行っておりますが、過去にはCakePHP、Ruby on Railsを使ったWebアプリ開発を行っておりました。

プライベートではバンド演奏や本を読んだり映画を見たりしております。最近はスケボーにハマってます。みなさんにプログラミングの楽しさをお伝え出来たらと思っております。何卒宜しくお願い致します。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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

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