【JavaScript】Cookieを使って初回アクセスを判別する方法

RELEASE / 2023.11.23 UPDATE / 2023.11.26

JavaScript

初回アクセス

WEBサイトの制作を行っていると時々、「初回だけ表示したい」という要望があります。

クーポンを表示したい
初回のみ警告文を表示したい

等々、利用箇所は多岐にわたります。
今回はJavaScriptのCookie（クッキー）を使ってサイト訪問時に初回アクセスかどうかを判定する方法を解説します。

この記事の目次を表示

1 Cookieで使って初回アクセスを判別する方法

Cookieで使って初回アクセスを判別する方法

// 初回アクセス時
if (document.cookie.indexOf('visited=yes') === -1) {
 document.cookie = 'access=yes path=/';
 conlose.log('初回のアクセスです');
}else{
 // 2回目以降のアクセス
 conlose.log('2回目以降のアクセスです');
}

たったこれだけです。

コード解説

ブラウザに保存されているCookieを取得する処理がdocument.cookieです。
indexOf()関数を使うことで指定の文字列が変数に格納されているか確認することが出来ます。
指定の文字列が含まれている場合、指定の文字列の開始位置を取得します。文字列がなかった場合は-1が返るので、これを利用して文字列自体が含まれているかどうかを確認できます。

if (document.cookie.indexOf('visited=yes') === -1) {でCookieの中にvisited=yesの文字列が格納されているか確認します。
初回アクセス時は指定の文字列は格納されていないので-1が返り値として返ってきます。
初回アクセス時の処理として
document.cookie = 'access=yes path=/';でCookieに値を格納します。
これで2回目以降はCookieの中にvisited=yesは格納されているので2回目以降の処理を行います。

Cookieはkey=value;という形に1つの値になっているので=の前後に半角スペースなどは入れないように気を付けましょう。

path=/とは？

特定のディレクトリのみCookieを適応したい場合、pathにURLを指定することが可能です。
'visited=yes; path=/campaign'とすることで、「/campaign」のみにCookieを追加することが可能です。

初回アクセスかどうかはサイト内全体でチェックしたいのでpath=/としておくことでサイト内全体でCookieが適用されるようにしてあります。

【例】初回アクセス時だけポップアップを表示する方法

HTML

まずは以下のようなHTMLとCSSを用意します。HTMLとCSSは適宜調整してください。

<div class="first-popup">
 <div class="first-popup__inner">
  <div class="first-popup__title">初回限定クーポン</div>
  <div class="first-popup__body">
   <p class="first-popup__text">当サイトにアクセスいただきありがとうございます。<br>
   初回限定30%OFFクーポンをプレゼントさせていただきます。
　 </p>
   <div class="first-popup__limit">2022年6月30日まで</div>
  </div>
  <div class="first-popup__close">×</div>
 </div>
</div>

CSS

.first-popup{
 left: 0;
 top: 0;
 right: 0;
 bottom: 0;
 width: 100%;
 height: 100%;
 background: rgba(0,0,0,.5);
 position: fixed;
 display: flex;
 align-items: center;
 justify-content: center;
}
.first-popup__inner{
 width: 500px;
 height: 200px;
 padding: 35px;
 border-radius: 15px;
 background: #fff;
 box-shadow: 0 0 15px rgba(0,0,0,.1),0 5px 10px rgba(0,0,0,.25);
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 position: relative;
}
.first-popup__title{
 width: 100%;
 margin-bottom: 5px;
 padding-top: 15px;
 padding-bottom: 15px;
 line-height: 1;
 background: #eee;
 text-align: center;
 font-weight: bold;
}
.first-popup__body{
 text-align: center;
}
.first-popup__text{
 text-align: center;
}
.first-popup__limit{
 padding: 5px 15px;
 border-top: 1px dashed #ccc;
 border-bottom: 1px dashed #ccc;
 color: #dc5a45;
 display: inline-block;
 text-align: center;
}
.first-popup__close{
 width: 40px;
 height: 40px;
 border-radius: 50%;
 z-index: 6000;
 right: -20px;
 top: -20px;
 position: absolute;
 color: #fff;
 font-weight: bold;
 background: #333;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 transition: .2s all ease;
 box-shadow: 0 0 2px rgba(0,0,0,.1),0 5px 5px rgba(0,0,0,.25);
}
.first-popup__close:hover{
 opacity: .6;
}

JavaScript

$(function(){
  // 初回アクセス時
  if (document.cookie.indexOf('visited=yes') === -1) {
    document.cookie = 'access=yes path=/';
    //conlose.log('初回のアクセスです');
  }else{
    // 2回目以降のアクセス
    //conlose.log('2回目以降のアクセスです');
    $(".first-popup").css({"display":"none"});
  }
  
  // クーポンを消す
  $(".first-popup__close").on("click",function(){
    $(".first-popup").stop().fadeOut();
  });
});

2回目以降のアクセスの時だけ、$(".first-popup").css({"display":"none"});を記載します。
これにより2回目以降はクーポンエリアはページ読み込み時、強制的にdisplay:none;になります。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

以上で初回アクセスと2回目以降のアクセスで処理を切り分けるプログラムの完成です。
こちらの記事は以下の記事を参考にしています。