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

こんにちは、Ryohei（@ityryohei）です！

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

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

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

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

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

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でリファラを取得する方法のご紹介でした！