今回はJavaScriptのCookie（クッキー）を使ってサイト訪問時に初回アクセスかどうかを判定する方法を解説します。
Cookieで初回アクセスかどうかチェックする方法
以下のようなコードでokです。
// 初回アクセス時
if (document.cookie.indexOf('visited=yes') === -1) {
document.cookie = 'visited=yes path=/';
console.log('初回のアクセスです');
} else {
// 2回目以降のアクセス
console.log('2回目以降のアクセスです');
}
上記のコードでやっていることは、
- Cookieに
'visited=yes'という値があるかを確認し、なかったら初回アクセスと判定してCookieに'visited=yes'という値を入れる（初回アクセスの時点では'visited=yes'という値は存在しない）。 - Cookieに
'visited=yes'があれば2回目以降のアクセスと判定し別の処理を行う。
という感じです。path=/に関しては後述します。
Cookieは全部取り出すとkey=value; key=value; ...という1つの文字列の形になっています。key=value;までが1つのCookieの値です。
コードの解説
現在のCookieの値を取得するにはdocument.cookieと書きます。これでCookieが全部取得できます。
indexOf()は文字列の中から特定の文字列の開始位置を取得します。文字列がなかった場合は-1が返るので、これを利用して文字列自体が含まれているかどうかを確認できます。
初回アクセス時は当然Cookieに'visited=yes'という値は含まれていないので初回アクセス時の処理を通ります。この処理の中でCookieに'visited=yes'という値を追加します。
2回目以降のアクセスではCookieに'visited=yes'という値が存在するので2回目以降の処理を通ります。
これだけです。意外とシンプルですね。
なお、Cookieはkey=value;という形が1つの値になっているので=の前後に半角スペースなどは入れないようしましょう。
path=/とは？
特定のURLだけCookieを適用したい場合pathにURLを指定することができます。'visited=yes; path=/news'と書くと「/news」というURLのみCookieを追加できるといった具合です。
初回アクセスかどうかはサイト内全体でチェックしたいのでpath=/としておくことでサイト内全体でCookieが適用されるようにしてあります。
Cookieを削除する
Cookieを削除するにはその値にmax-age=0と書きます。動作検証などに使いましょう。
// Cookieを削除
document.cookie = 'visited=yes; max-age=0';
// キーのみの指定でも削除できる
document.cookie = 'visited=; max-age=0';
アクセス回数をカウントする方法は？
「初回アクセスかどうかだけじゃなく、アクセス回数をカウントしたい！」という人は別記事にやり方を解説したのでこちらをご覧ください。
＞＞JavaScriptのCookieを使ってアクセス回数をカウントする方法
まとめ
要は特定のCookieがなければ初回アクセス、あれば2回目以降のアクセスというだけなのでそこまで難しいことはしていません。
Cookieをあまり扱ったことがないという人はあまり慣れていないかもしれないのでこれを機に色々と触ってみると理解が深まると思います。
