TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでページ遷移する方法を現役エンジニアが解説【初心者向け】
icon
icon
JavaScript

JavaScriptでページ遷移する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでページ遷移する方法について現役エンジニアが解説しています。ブラウザで現在表示しているページから別のページへと移動することをページ遷移と言います。JavaScriptではlocation.hrefに移動したいページのURLを設定します。

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

JavaScriptでページ遷移する方法について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

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

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

 

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptでページ遷移する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

ページ遷移とは

ブラウザで現在表示しているページから別のページへと移動することを**ページ遷移**と呼びます。

例えばTechAcademyのページ(https://techacademy.jp/)から、TechAcademyのTwitterアカウントページ(https://twitter.com/techacademy)に移動することもページ遷移です。

JavaScriptでページ遷移する方法

JavaScriptでページ遷移するにはlocation.hrefプロパティを使用します。

ChromeでDeveloper toolsを開いてConsoleタブでlocation.hrefを打ち込んだ結果がこちらです。

ChromeでDeveloper toolsを開いてConsoleタブでlocation.hrefを打ち込んだ結果

現在見ているページのURLである「https://techacademy.jp/」が返ってきます。
location.hrefに移動したいページのURLを入力することで、ページ遷移することができます。

location.href = "移動したいページの URL";

 

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

jQueryでページ遷移する方法

jQueryでページ遷移する場合でもlocationオブジェクトのhrefプロパティを使います。

タイプ数も増えるので location.href = urlで直接設定する方が良いと思いますが、jQueryでページ遷移する場合はattrメソッドを使って以下のように書きます

$(location).attr("href", "移動したいページの URL");

 

実際に書いてみよう

ChromeのDeveloper Toolsを開いて確認していきましょう。

この記事ページで試すと、別ページに移動してしまうため新しくタブかウィンドウを開いてそこで試すのが良いでしょう。

Developer Toolsの開き方はWindowsだと[F12] キー、Macだと[Command] + [Shift] + [I]になります。開いたら「Console」タブを選択します。

Chrome Developer tools

デフォルト設定だとページ遷移でコンソールの内容もクリアされてしまうため、実行結果を残したい場合には右上の歯車アイコンから「Preserve log」にチェックを入れましょう。

Chrome developer toolsで実行結果のログを残したい場合

まずはGoogleのトップページに移動してみましょう。コンソールに以下の内容を打ち込んでみてください。

location.href = "https://google.co.jp"

 

ページ遷移が確認できたら、次はjQueryのページに移動してみましょう。

location.href = "https://jquery.com/"

 

最後にjQueryを使ったページ遷移を試してみましょう。TechAcademy ページに移動してみます。

 

$(location).attr("href", "https://techacademy.jp/")

 

各ページに遷移できることが確認できたのではないでしょうか。なお、当然ではありますがjQueryを使ったページ遷移は、jQueryを読み込んでいないと使用できませんのでご注意ください。

筆者プロフィール

メンター稲員さん

フリーランスエンジニア。大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。

経験言語：Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript,Node.js。
おうち大好きマンです。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

CDNからjQueryファイルを読み込む方法【初心者向け】

JavaScriptのライブラリであるjQueryでファイルを読み込む方法を解説しています。 CDNでの読み込みでバージョン指定や最新版の使用など手軽に行...
JavaScript

JavaScriptによるHTMLの読み込み(onload)処理について現役エンジニアが解説【初心者向け】

JavaScriptによるHTMLの読み込み(onload)処理について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解...
JavaScript

JavaScriptでソケット通信（WebSocket）する方法を現役エンジニアが解説【初心者向け】

JavaScriptでソケット通信（WebSocket）する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに...
JavaScript

JavaScriptのコンボボックスの実装方法を現役エンジニアが解説【初心者向け】

JavaScriptのコンボボックスの実装方法について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門...
JavaScript

JavaScriptでCookieのexpiresを設定する方法を現役エンジニアが解説【初心者向け】

JavaScriptでCookieのexpiresを設定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解...
JavaScript

JavaScriptでconfirmを使って確認ダイアログを表示させる方法【初心者向け】

JavaScriptをプログラミング初心者向けに紹介した記事です。 今回は、JavaScriptでconfirmを使って確認ダイアログを表示させる方法につ...
JavaScript

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

JavaScriptでページ遷移する方法を現役エンジニアが解説【初心者向け】

JavaScriptでページ遷移する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 JavaScriptでページ遷移することで、JavaScriptの処理に応じたページ遷移が可能になります。 実務でも、JavaScriptでページ遷移することで、クリックされた場合などに操作に応じたページ遷移を行うため、ぜひ学習してみてください。 また、入門向けのJavaSriptを学習できるサイトも紹介しているので、あわせてご覧ください。 目次ページ遷移とはJavaScriptでページ遷移する方法jQueryでページ遷移する方法実際に書いてみよう筆者プロフィール そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでページ遷移する方法について詳しく説明していくね！ 大石ゆかり お願いします！   JavaScriptでページ遷移する方法 JavaScriptでページを遷移する方法です。 利用シーンとして2つの方法を紹介します。 自身のページを別のページへ遷移する方法 別画面を起動し、別画面でページ遷移する方法   1.自身のページを別のページへ遷移する方法 自身のページを別のページへ遷移する指定の仕方は、次のようにlocation.hrefに対してURLを代入します。 location.href = "URL" 利用するのは、”location.href”を利用します。 このプロパティは、現在のページのパス情報を含んでいます。 値を変更すれば、ページ遷移ができます。   2.別画面を起動し、別画面でページ遷移する方法 別画面を起動し、別画面でページ遷移するには、”open”メソッドを利用して新しい画面を開くと同時にページ遷移を行います。 open( "URL","_blank") ; “open”メソッドは新しい画面を開くメソッドです。 第1引数に遷移したいURL(パス)を指定します。 第2引数には、何も指定しなくても良いのですが、新しい画面を開く場合は”_blank”を指定します。   実際に書いてみよう ここでは、実際にJavaScriptで遷移する方法を書いてみましょう。   サンプルコード // 1.自身のページを別のページへ遷移する方法 location.href = "http://techacademy.jp/"; // 2.別画面を起動し、そちらでページ遷移する方法 open( "http://techacademy.jp/", "_blank") ; 解説 location.href = “https://www.google.com”;では、この行が読み込まれたときに、開いているページがテックアカデミーのページに遷移します。 open( “https://www.google.com”, “_blank”) ;では、この行が読み込まれたときに、新しいページが開きテックアカデミーのページに遷移します。   [PR] フロントエンドで副業する学習方法を動画で公開中まとめ 今回は、JavaScriptのコードを利用したページ遷移処理を解説しました。 location.hrefを利用すると、同じ画面でページ遷移が可能になります。 openメソッドの第2引数に”_blank”を指定することで、新しいウィンドウが開き、指定ページへ遷移します HTMLでJavaScriptを読み込む（呼び出す）方法についても参考にしてみてください。   大石ゆかり 内容が分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   JavaScriptを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい プログラミングを学習していて、このように思ったことはありませんか？ テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
JavaScript

JavaScriptでlocation.replaceメソッドでURLを置換する方法を現役エンジニアが解説【初心者向け】

JavaScriptでlocation.replaceメソッドでURLを置換する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。   JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事を見てみましょう。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでlocation.replaceメソッドを使ってを現在のURLを置換する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 location.replaceメソッドとは location.replaceメソッドの使い方 現在のURLを置換する方法 実際に書いてみよう まとめ   location.replaceメソッドとは location.replaceメソッドとは、指定したURLへページを遷移させることのできるメソッドです。 このメソッドを利用するとJavaScriptによって任意のURLへ画面遷移させることが可能です。 また、location.replaceメソッドによってページを遷移した場合は履歴が残らないためブラウザの戻るボタンで前のページへ戻ることができません。   [PR] フロントエンドで副業する学習方法を動画で公開中location.replaceメソッドの使い方 location.replaceメソッドは以下のように移動先URLを指定して使うものです。 location.replace(移動先URL)   現在のURLを置換する方法 現在のURLを置換し、ページ遷移させるには以下のように移動先URLを引数に指定しましょう。 location.replace("./page1.html");   実際に書いてみよう location.replaceメソッドを使用し、ページ遷移を行うコードを実際に記述します。 今回は、任意のURLを入力しボタンを押下した際に入力されたURLへページ遷移するコードを書いてみましょう。 HTML <html> <head> <meta charset="utf-8" /> </head> <body> <input id="url" /> <button id="page">ページ遷移</button> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script> <script> $('#page').on('click', function() { var url = $('#url').val(); location.replace(url); }); </script> </body> </html> コードを解説していきます。 画面には文字入力欄とページ遷移ボタンを配置していましょう。 ページ遷移ボタンが押されると、文字入力欄に入力された値をlocation.replaceメソッドの引数に渡し、ページ遷移を行います。   まとめ 今回のlocation.replaceメソッドを使って現在のURLを置き換える方法を含め、JavaScriptを使ったページ遷移やURLの置き換えは様々な場面で使う機会が出てくるため、是非覚えておきましょう。   執筆してくれたメンター 黒木一志（くろきかずし） TechAcademyジュニアのゲームアプリコースを担当しています黒木です。 現在は会社員としてシステムエンジニアをしております。 会社ではC#にて業務系アプリの開発を行っておりますが、過去にはCakePHP、Ruby on
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

HTMLでhref属性の使い方を現役エンジニアが解説【初心者向け】

HTMLでhref属性の使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 href属性の使い方について詳しく説明していくね！ 大石ゆかり お願いします！   HTMLでhref属性の使い方について サイト作成では必ず登場する、aタグとそれに紐づくhref属性の使い方について解説してみます。 aタグとは。リンク＝次のページ・コンテンツへつながるドアのようなもの。と理解しておくと良いでしょう。ドアの先には行き先が必ずあるものです。行き先がhref属性と覚えておきましょう。 これらはセットです。hrefの中が空白であると構文エラーになり、表示動作も不安定になります。注意しておきましょう。 <a href="https://techacademy.jp/">テックアカデミー</a> これを和訳すると、「テックアカデミー」と書かれた箇所をクリックすると、実際のテックアカデミーのサイトに遷移する。となります。   hrefのよくある「行き先」5種 リンクの行き先は、内部と外部のどちらも設定することができます。主に以下の5つになるでしょう。 サイト内の別のページへ遷移する 同じページ内の違う位置へ遷移する（ページ内リンク） 外部サイトへ遷移する サイト内のファイルに直接遷移する（例えばPDFなど） サイト内のファイルに直接遷移、そしてダウンロードする（例えばzipファイルなど） 以下がそれぞれのリンクの書き方です。　※４、5番目は実際のリンクではありません。 <a href="https://techacademy.jp/webdesign-wordpress-set">テックアカデミー　※講座のページへ遷移する</a> <a href="https://techacademy.jp/#training-top">テックアカデミー　※トップページの「トレーニング」部分へ遷移する</a> <a href="https://www.kiramex.com/">テックアカデミー　※運営会社のキラメックス株式会社へ遷移する</a> <a href="https://techacademy.jp/download/design.pdf">pdfファイルを表示させる。　※サンプルなので表示しません</a> <a href="pdf/design.pdf">pdfファイルをダウンロードさせる。　※サンプルなので動作しません</a>   [PR] フロントエンドで副業する学習方法を動画で公開中hrefの指定方法 指定をするには、合わせてパスの構造を理解しておきましょう。 絶対パス 絶対パスは呼び出したいファイルが同じディレクトリ内になく、外部で公開されている場合などに使います。世界中の誰が見ても参照できる位置を示します。 東京都港区南青山1-2-3建物名・号室〜といったような住所と同じような、ものです。 <a href="https://techacademy.jp/">テックアカデミー</a> 相対パス 基本となるパスの書き方です。「パスを書くそのファイルから見た、呼び出すファイルの位置」になります。 <a href="index.html">テックアカデミー</a> ルートパス サイトのルートから（今回の例であれば「demo」フォルダがルート）見たパスになります。最初につける/がルートを意味します。サイトルートから見た位置関係になるのですべて/からはじめます。WordPressなどや、.htaccessで指定している場合のみ利用できます。 <a href="/webdesign/training/">テックアカデミー</a>   hrefの指定方法その２ 同じページ内での位置指定をする事もできます。これは、html構文内で、#（id）を記述している場合に指定できます。 <a href="https://techacademy.jp/#training-top">テックアカデミー　※トップページの「トレーニング」部分へ遷移する</a>   hrefと、そのターゲット属性 リンクの行き先は、同じページタブで開くこともできますし、別のウィンドウにて遷移させる。という方法があります。 それが、「target属性」です。4種類ありますが、_blankが頻度が高く、それ以外は近年はあまり使用されていません。 _self／通常パターン。現在のウィンドウで開く指定。 _blank／別のウィンドウで開く指定。 _top／フレームセットは解除、単一のページのみが表示される指定。 _parent／リンク先のページは親フレームに表示される指定。   実際に書いてみよう <a href="https://techacademy.jp/webdesign-wordpress-set">テックアカデミーのウェブデザイン・WordPress講座</a> <a href="https://techacademy.jp/#training-top">テックアカデミー「トレーニング」へ</a> <a href="https://www.kiramex.com/" target="_blank" rel="noopener">キラメックス株式会社（外部サイト）</a> <a href="https://techacademy.jp/download/design.pdf">pdfファイル(XXXkb)。　※サンプルです</a> <a href="pdf/design.pdf">pdfファイルのダウンロードはこちら　※サンプルです</a> 今回は、リンク指定をするaタグを解説してみました。使い方を覚え、ページを作成してみましょう！！   監修してくれたメンター ゆかちん先生 フリーランスのクリエイティブディレクター。 制作会社、インハウス、スタートアップ企業などで、グラフィックデザイン・ウェブデザイン・アプリデザイン、ウェブディレクションなどに携わってきました。TechAcademyではWeb Designコース・ウェブディレクションコース・WordPressコースを担当しています。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

特定の場所に移動したい！HTMLでジャンプする方法【初心者向け】

今回はHTMLでジャンプする方法を説明していきます。 HTMLでジャンプするというのは、今見ているページから別の情報が掲載されているページに移動するという意味です。 リンクが指定されている部分をクリックすることで、別のページに移動させる必要があるときに利用します。 実務でもホームページを制作するWeb制作では、正しいページに正しいリンクを設定することが求められるため、ぜひ一緒に勉強しましょう。 目次 他ページにジャンプする方法 同一ページの特定の場所にジャンプする方法 実際に書いてみよう aタグ以外でページ移動をする方法 aタグを利用してボタンのような表示にする   他のページにジャンプする方法 他のページにジャンプするにはリンクを貼る必要があります。 リンクの貼り方は以下の通りです。 <a href="#">ここをクリックすると飛びます。</a> 上記のような記述で他のページへのジャンプが可能です。 「#」の部分に飛ぶ先のページを記述します。 そのようにすることでジャンプを実現できます。   大石ゆかり aタグ(アンカータグ)によって、別のページに移動できるんですね～。 田島悠介 そうだよ。 自分のサイトの違うページや外部のサイトへ移動できるんだよ。 また、そのページの特定の位置にも移動できるんだ。 大石ゆかり 同じページの中でも移動できるんですか？ 田島悠介 できるよ。 では、実際に見てみよう！   [PR] フロントエンドで副業する学習方法を動画で公開中同一ページの特定の場所にジャンプする方法 同一ページにジャンプする先を「アンカー」と言います。 アンカーの貼り方ですが、以下のようにします。 コード <a href="#index">テックアカデミー</a> <a id="index">ここはindexというidがついた場所です</a>   解説 <a href=”#index”>テックアカデミー</a>をクリックすると、<a id=”index”>ここはindexというidがついた場所です</a>の場所にジャンプします。 アンカー元を「#アンカー名」で設定し、アンカー先を「アンカー名」を設定しましょう。   大石ゆかり hrefは飛び先のURLですよね？ #(シャープ)がついていてlinkって名前が書いてあるだけですね。 田島悠介 ほとんど全てのタグにid属性をつけることができるんだ。 そのidにつけた値を指しているんだよ。 大石ゆかり 同じページ内で移動しなきゃいけないなんて、どんな時ですか？ 田島悠介 内容が長いとページの長さも長くなるので、そういう時にページ内ジャンプがあると便利かな。   実際に書いてみよう 実際に書いてみてWebブラウザーで見てください。 今回は異なるページへのリンクがあるので、HTMLは2つ作成します。 HTML -sample.html- <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <h1>別pageジャンプ</h1> <p> <a href="sample2.html">sample2へ</a> </p> <h1>page内ジャンプ</h1> <p>
HTML

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制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでページ遷移する方法を現役エンジニアが解説【初心者向け】