【JavaScript】リファラを取得してURLの内容で処理を分岐する方法2020.02.08JavaScriptBこんにちは、ryohei(@ityryohei)です!本記事では、JavaScriptでリファラを取得して、取得したURLに含まれる文字列によって処理を分岐する方法をご紹介しています。今回実現したいことざっくりと下記のような内容になります。PHPやjQueryではなく、すべて純粋な「JavaScript」で実装します。ユーザーのリファラを取得するリファラに特定の文字列が含まれるか検証する検証結果によって処理を分岐する今回私がこの処理が必要になったのは、サイトを表示する際に初回のみ掲載情報があったからです。外部からの流入であればある要素を表示し、内部の回遊であれば非表示にする、という感じです。最初はCookieの使用も考えましたが、リファラだけでも問題なさそうだったので、今回はそのように実装しています。似たような処理を実装される場合に参考にしていただければ幸いです。本記事の内容リファラを取得するリファラに文字列が含まれるか検証するリファラのURLで処理を分岐する最後にでは、解説していきます。リファラを取得する「JavaScript」ではリファラを取得するためのプロパティが用意されています。下記を一行追記するだけでユーザーのリファラを取得することができます。document.referrer;せっかくなので現在閲覧してくれている方のリファラを取得してみたいと思います。alert(document.referrer);});リファラを取得する上のボタンをクリックするとリファラが記載されたアラートが表示されます。数行で簡単に取得することができましたね!続いて取得したリファラに特定の文字列が含まれるか検証する方法をご紹介していきたいと思います。リファラに文字列が含まれるか検証するJavaScriptで文字列を検証するプロパティはいくつかあると思いますが、本記事では「match」を使った方法で解説していきます。「match」は引数に指定した文字列が含まれていた場合は「true」となり配列を返します。引数には正規表現を使用することができます。下記のサンプルでは、取得したリファラのURLを検証して「example」という文字列が含まれているか確認しています。検証結果は「result」という変数に代入して保持しています。ref.match(/example/)もし「matchの検証結果が真だった場合は下記、ような配列が返ってきます。偽の場合は「null」が返ります。undefined]では「match」を使用してリファラで取得したURLに特定も文字列が含まれるかを検証後、結果によって処理を分岐するスクリプトを作成していきます。リファラのURLで処理を分岐する方法は簡単です。これまでご紹介してきた内容にif文で条件分岐を作成します。}};もし「match」で検証した結果、ヒットした文字列を使用して分岐したい場合は、下記のように記述することでヒットした文字列を取得することができます。example最後にいかがでしたでしょうか。JavaScriptでリファラを取得して何か処理をする、というスクリプトはあまり使用することはないかもしれないですが、知っていると将来的に役に立つことがありますので、「そういえばあの方法でリファラ取得できたな~」と頭の片隅にでもおいてもらえれば幸いです。Webエンジニアご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が普段業務をする中で得た知識をアウトプットする場として2015年から運営しています。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が普段業務をする中で得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。