2種類のCookie☆🍪を理解する

Cookieについて

Cookieとは

Cookieとは、ユーザーのデバイス（ブラウザ）に保存される小さなテキストデータです。
データの内容は「閲覧履歴」「ユーザーのログイン情報」など、目的によって様々です、

Cookieを使うと何ができるんか

例①　ログイン状態を維持
例②　ユーザーのサイト内での行動データを収集
例③　ユーザーが興味のある広告が出す

つまりどういうことだってばよ！

クッキーを利用することで、ユーザーがデータの送信を意識することなく裏で情報をやりとりできるワケなんです。

「意識することなくデータのやりとり」だって！？

例えば「ログイン状態を維持」なら、一度ログインすれば次はログインせずとも勝手にログインしてくれますよね。
「ユーザーのサイト内での行動データを収集」なら、行動データを送ることを意識していないのにデータを送っています。
「ユーザーが興味のある広告が出す」なら、サイトに対して「こういう広告好きなので出してください！！」なんて言ってないワケです。

つまりCookieを利用することで、普段何も意識することなくログイン状態が維持されていたり、興味のある分野の広告が出たり...これらは裏でデータのやり取りがあるからってワケ。

闇のクッキー☆🍪取引よ。

例

例えばユーザーが
①https://iamnotarobot.jp
②https://iamnotarobot.jp/post-history
この順序でサイト
を移動したとします。

このとき、Cookieには「https://kanbun-shugendo.com から https://kanbun-shugendo.com/kanbunTest へ移動したよー」という情報をCookieに保存することができます。
(移動した情報自体はたぶんリクエスト内のLocationの情報を使ってるんじゃないかと思われ。そこら辺はワカラン。)

この保存されたCookieをサーバー側で取得することによって、このユーザーがサイト内でどんな行動をしたかのデータを集めることができます。

データの例
・ユーザーがよく閲覧するページ
・Webサイトの滞在時間
・閲覧したページの順番
などなど。いろいろあります。

ユーザーの動きを分析するためにCookieを使う例としては、Webサイトの分析ツールの「Googleアナリティクス」があります。
クッキーを使ってサイトの分析をしているそうです。

とにかく、Cookie🍪は「美味しい！！」という認識から脱却し、Cookie🍪は「ユーザーの端末側で情報を保持するデータ」だと認識しておけば一旦OKです！！！

Cookieの種類は？

クッキーは大きく分けて2種類存在していますので、今回はそれら2種類について紹介していきます。

理解することができればWeb開発において実装の幅が広がること間違いなしなので、ぜひ最後までゆっくりしていってくださいまし。

ということでまずは実例として、「ユーザーがサイトに訪れた時に、ユーザーのサイト内の行動履歴を取得する」ような例の話をします。

F12キーを押して表示されるデベロッパーツールの「アプリケーション」タブから実際にCookieを確認できます。

2種類のクッキー

①Session Cookie（ブラウザを閉じるまで有効な一時的なクッキー）
②Persistant Cookie（有効期限日まで永続するクッキー）

なんと2種類あります。

①Session Cookie（ブラウザを閉じるまで有効な一時的なクッキー）

サイトを訪れた時から保存が始まり、ブラウザを閉じると消去される一時的なクッキーです。

例えばこういうことです

ユーザーがhttps://iamnotarobot.jp へアクセス
↓
このときにCookieの保存がスタート
↓
ユーザーがサイト内を移動するたびにCookieにどんどんデータを更新していきます。
↓
ユーザーが飽きてブラウザを閉じます。
↓
ここでクッキーは消去されます。

これがザックリとしたSessionCookieの保存→削除までの流れです。

具体的な利用場面

①データ収集

細かいことはGoogle社員じゃないのでわかりませんが、Session Cookieでユーザーのふるまいを保存していることで、GoogleAnalyticsはサイトの表示回数や平均滞在時間などを分析することができるということです。

このデータを見たぼくは「もっとサイト訪れてくれてもいいよ（泣）」となるわけです。
これじゃクッキーも涙で湿っちゃうぜっ☆ｱｰｲ

②ショッピングカート

Session Cookieでカート内の情報を保持することができます。
ただし、この場合はブラウザを落としたら当然カート内の商品はすべて消えます。
カートが転んで商品全部ぶちまけちゃった！！やり直しジャン！！みたいでちょっとカワイイ（異常性癖）

③ログイン情報

ログイン済みであるという情報をSession Cookieに持たせておくこともできます。
利用場面としては例えばユーザーがアカウントのマイページを開くとします。
その際に、Session Cookieの有無をサーバー側で確認し、「あ、こいつログイン済みのクッキーもっとるからマイページ表示させたろ」とか「こいつログインしてないのにマイページに来ようとしとる。一旦ログイン画面行かせよ」とかできます。

実際にSession Cookieを体験したいなら…

こちらでブラウザを再読み込みしまくってください。そうすると画面に表示されている「訪れた回数」が1ずつ増えます。
この回数はSession Cookieで管理しているので、ブラウザを落とすことで0になります。

ちなみに三重大学の回し者ではないです👍

②Persistant Cookie（有効期限日まで永続するクッキー）

Session Cookieとは対照的に、ブラウザを閉じても保存されます。ただし、このCookieには必ず有効期限が設定されており、その有効期限内に更新が行われなければ削除されます。
なお、こちらのCookieも保存されるタイミングは、Session Cookieと同じで「サイトを訪れた時」です。

具体的な利用場面

①ログイン状態の保持

「過去1週間以内にユーザーがログインをしているのならば、IDとパスワードの入力はせずにログインができる」という仕組みを実装できます。
これはブラウザを閉じてもクッキーを保持できるからなせる業ですね。
ただし、Persistent Cookieの情報を何らかの手段で抜き取られた場合、このCookieを利用して悪い人がログインできます。
Persistent Cookieだとワンチャンこういうことが起きます。
反対にSession Cookieだとブラウザを閉じたときにCookieが削除されるので、Session Cookie
の方がユーザー情報を保持するには安全ということになります。

②ライトモード・ナイトモードの設定の保持

TwitterとかYoutubeをブラウザで見る場合に、ライトモード・ナイトモードの設定はブラウザを閉じても保持されています。もしかしたらDBで管理しているかもしれませんが、これはPersistent Cookieを使うことでも実装できます。

③あなたへのおすすめ

例えばSNS系のWebサイトではユーザーの個別ページに訪れることがあります。
その際に、訪れたユーザーの情報をPersistent Cookieに保存して長期間のデータを集めることで、ユーザーの好みにあったおすすめユーザーを提案するといった仕組みが作れます。
よくサイトの広告に「なんで俺の好きな物の広告がでるん！？」みたいなことあると思いますが、Persistent Cookieで保存したデータを分析をしているそうです。

反対に、Session Cookieだったらすぐデータが消えてしまうので、長期間のデータ収集はできません。

それぞれのメリットデメリット

①Session Cookie（ブラウザを閉じるまで有効な一時的なクッキー）

メリット

①ユーザーのデバイスのデータを圧迫しない点

　ブラウザにデータを保存するということは、当然容量が必要です。それは各ユーザーが持つコンピューターやデバイスに依存します。Session Cookieの場合はブラウザを閉じた時点で削除されるので、ユーザーのデバイスの容量を圧迫しないのがメリットです。

圧迫いうても基本的には軽容量やけん、そげん気にせんでよかよ。

②ユーザー情報を安全に扱える点

※「安全」というのは「Persistent Cookieより安全」という意味です。

Session Cookieはユーザーがブラウザを閉じたら保存しているCookieは削除されるので比較的安全に利用できます。

デメリット

①ユーザーの情報を長く保持できない

②Persistant Cookie（有効期限日まで永続するクッキー）

メリット：

①ユーザーの情報を長く保持できる

デメリット

①ブラウザを閉じても削除されないので、ちょっとセキュリティ的に良くないこともあり
　※HTTPS通信だけでクッキーを送信するという設定もできる

もっといろいろあると思いますが、その辺はエライ人に聞いてください

まとめ

どっちも一長一短。アーイ。うにょうにょうにょうにょうにょうにょうにょうにょ。