【手元で試せます】Javascriptにおけるhref遷移の方法

はじめに

Javascriptにおける画面遷移方法について紹介しています。

画面遷移というのは、クリック時に別のURLに遷移することであり、href属性を使用することで実現することができます。

基本的には

href=”遷移先のURL”

のように遷移先のURLを記述してあげる（例えばhttps://google.comを指定すればGoogleのページに遷移するということ）ことで実現させることができます。

これからいくつかhrefを使った遷移方法を、手元で動かせる方式で提供しますので、実際に動かしながら動作を確認していただければと思います。

実装例

aタグを使用した方法

See the Pen by atsushiIMG (@atsushiimg) on CodePen.

動作の流れ

「クリックで画面遷移」というリンクをクリックすることで、hrefに指定されたURL（今回はこのブログのトップ）に移動します。

その際にtarget=”_blank”を指定していることで、ブラウザの別タブでブログトップのサイトが開かれるようになります。

手元で試して欲しいこと

• hrefのURLを”https://goole.com”, “https://yahoo.co.jp”など自分の好きなものに変えてみましょう
• target属性を削除してみた時の動きを見てみましょう

buttonタグを使用した方法

See the Pen hrefNo2 by atsushiIMG (@atsushiimg) on CodePen.

動作の流れ

『クリックで画面遷移』のボタンがクリックされた時、buttonタグのonClick属性が発火し、clickHandler関数が呼び出されます。

その関数はインラインスクリプトで定義されており、window.openの第一引数にて遷移先されているURLに遷移されます。

また、window.openの第二引数に”_blank”が設定されていることで別タブで開かれることになります。

手元で試して欲しいこと

• window.open(“URL,” “_blank”)をwindow.location.href(“URL”)に変えてみる（画面遷移を実現できます）

最後に

今回はhrefによる画面遷移の方法をいくつか提示しました。

また最近の流行りのReactで画面遷移を実現する方法も別で紹介しているので良かったらみていってください。