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

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

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

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

 

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

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

 

 

 

ページ遷移とは

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

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

JavaScriptでページ遷移する方法

JavaScriptでページ遷移するには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」タブを選択します。

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

まずは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講座を開催しています。

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