【JavaScript】リファラを取得する

こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptでリファラ(ユーザーが直前に表示していたページのURI)を取得する方法をご紹介しています。

JavaScriptでリファラを取得するにはどうすればいんだろう?

上記の疑問にお答えします。

では、解説していきます。

document.referrerでリファラを取得する

JavaScriptでは、documentreferrerプロパティでリファラを取得することができます。指定方法は下記の通りです。

document.referrer;

コンソール等に出力する場合は下記のように記述します。

console.log(document.referrer);

リファラが存在する場合はURIを返し、存在しない場合は空文字を返します。

そもそもリファラとは?

リファラというのは、対象のページをリンクしていたページ(ユーザーが直前に表示していたページ)のURIです。(URIについてはこちらをご参照ください。)

例えば、下記のような順番でリンクからアクセスしたとします。⓵にはブックマークやURLを入力するなどして直接アクセスがしたと仮定します。

  • ⓵https://into-the-program.com
  • ⓶https://into-the-program.com/category/javascript/

⓶の時点でdocument.referrerリファラを出力すると⓵のURLが返しますが、⓵の時点ではリファラ(直前に表示していたページ)が存在しないため、空文字を返します。そのためリファラの値を使って処理を組む際は、リファラがないケースを念頭に置いて処理を組んだ方が良さそうですね。

iframeで使用する場合の注意点

こちらは補足になりますが、iframe内におけるdocument.referrerの値は、親のwindow.location.hrefの値が設定されます。直前のページではなく親が対象となっているので、その点ご注意いただければと思います。

最後に

今回、JavaScriptでリファラを取得するにあたってMDNをぼーっと眺めていたところ、documentのページにたどり着きました。documentの解説ページには今まで知らなかったプロパティやメソッドが沢山あって、知らなかった機能を知っていくうちに、自然とテンションが上がっている自分がいました。

知識欲というものは何歳になっても尽きないようなので、日常がマンネリ化していたら、知らないことに没頭して新しい刺激を得るのもいいかもしれませんね。

以上、JavaScriptでリファラを取得する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍