今回はJavaScriptのCookie（クッキー）を使ってアクセス回数をカウントする方法を紹介します。
Cookieでアクセス回数をカウントする方法
以下のようなコードを書きます。
const cookies = document.cookie; // クッキーを全部取得
const cookiesArray = cookies.split('; '); // 'キー=値'の形で分割して配列に入れる
for (const cookie of cookiesArray) {
const cookieArray = cookie.split('='); // キーと値をさらに分割して配列に入れる
// 初回アクセスなら（countというクッキーがないなら）
if (cookieArray[0] !== 'count') {
document.cookie = 'count=1; path=/';
console.log('1回目のアクセスです');
}
// 2回目以降のアクセスなら
if (cookieArray[0] === 'count') {
let accessCount = parseInt(cookieArray[1]); // countの値を整数値へ変換
accessCount++;
document.cookie = 'count=' + accessCount + '; path=/';
console.log(accessCount + '回目のアクセスです');
}
}
上記のコードでやっていることは、
- Cookieを全部バラバラにする
- バラバラにしたCookieを全部チェックし、Cookieに
'count'という値がなければ初回アクセスと判定して'count=1'という値を入れる。 - Cookieに
'count'という値があれば数値の部分を抜き出し、＋1してセットする。
という感じです。詳しく見てきます。
コードの解説
Cookieはkey=value; key=value; ...という1つの文字列の形になっているので、まずkey=value;ごとに分割していきます。
split()は文字列を特定の文字列で分割して配列にする関数です。const cookiesArray = cookies.split('; ');とすることでCookieが'key=value';の形に分割されてcookiesArrayという配列に格納されます。
なお、区切り文字は「; （セミコロン＋半角スペース）」なので気をつけてください。console.log(document.cookie)をするとセミコロンの後ろに地味に半角スペースがあるのがわかります。盲点。
次にfor...ofでループ処理をかけ、key=value;という形の各要素をconst cookieArray = cookie.split('=');でさらにkeyとvalueで分割します。これでcookieArrayには[0]にkey、[1]にvalueが入っていることになります。
そうしたらcookieArray[0]をチェックし、 'count'というキーがない（＝初回アクセス時）なら'count=1'というCookieをセットします。
'count'というキーがある（＝初回アクセスじゃない）ならcookieArray[1]（＝カウント回数）を抜き出し、parseInt()で整数値へ変換します。あとはカウントを＋1してCookieにセットしなおせば完了です。
Cookieの分割処理あたりが若干わかりにくい部分もあると思うのでconsole.log()しながら見ていくとイメージがつかみやすいです。
path=/とは？
Cookieに指定してあるpath=/の部分がわからない人もいると思うので簡単に解説します。
path=でURLを指定するとそのURLだけCookieを適用させる事ができます。例えばpath=/hogeとすると「/hoge」というURLでのみこのCookieを追加できます。
アクセス回数はサイト内の全ページでチェックしたいのでpath=/としておくことでサイト内全体でCookieが適用されるようにしてあります。
Cookieを削除する
Cookieを削除するにはその値にmax-age=0と書きます。動作検証などに使うといいでしょう。
// Cookieを削除
document.cookie = 'count=1; max-age=0';
// キーのみの指定でも削除できる
document.cookie = 'count=; max-age=0';
より簡単にCookieを扱いたいなら
より簡単にCookieを扱いたいならjQueryでCookieを扱える「jquery.cookie.js」というjQueryプラグインがあるので調べてみるといいかもしれません。ただし、これはかなり前に開発中止になっているので使う際はよく検討しましょう。
jQueryではないですが、JavaScriptでより簡単にCookieを扱う方法として「js-cookie」というものもあります。こちらはJavaScriptですが使い勝手がjQueryみたいな感じでかなり簡単にCookieの操作ができます。使うならこっちのほうがおすすめですね。
Cookieの扱いが面倒ならこういったものを使うものアリかもしれません。
初回アクセスかどうかをチェックする方法は？
「初回アクセスかどうかだけチェックできればいい」という人は別記事にやり方をまとめたのでこちらをご覧ください。アクセス回数をカウントするよりもずっと処理がラクです。
＞＞JavaScriptのCookieを使って初回アクセスかどうかチェックする方法
まとめ
Cookieでアクセス回数をカウントする方法は調べてもなかなかわかりやすい記事が出てこなかったので書いてみました。
自分で書いといてなんですが、もうちょっといいコードが書けるんじゃないかなって気がします。より良いコードにできそうなら後で直します。
参考記事
