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

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

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

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

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(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] JavaScript・jQueryで挫折しない学習方法を動画で公開中

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を使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

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