はじめに
今回、駆け出しエンジニアが何度学んでもすぐに忘れるあるあるトップレベルのクッキーとセッションについて、アウトプットも兼ねて簡単にまとめてみました！
この記事を読んでわかることは、
それぞれの特徴、違いになります。
それぞれの具体例も挙げつつ短めにまとめましたので、時間のない方でも気軽に読んでください〜！
もくじ
1.🌟最初の理解
2.🍪クッキー（Cookie）とは
3.キャッシュとは
4.セッションとは
5.まとめ
🌟最初の理解
クッキー、セッション、キャッシュについて学ぶ前に理解しておくべきことは、
3つとも「情報を一時的に保存しておく機能」であるということです。
3つとも「効率的かつ速く、欲しい画面や情報をくれる」というメリットがあるということです。
また、これら3つは、情報の種類と保存場所が異なるだけです！
これを念頭に読んでいただければと思います。
🍪クッキーとは
・種類
「ユーザー情報」
最初の理解では、それぞれ情報の種類と保存場所が異なると書きましたが、クッキーは「ユーザー」の情報を保存してくれます。
・具体例
「Twitter・instagram」
私たちが日常生活で利用しているTwitterやinstagramでは、利用開始時や別の端末で同じアカウントを利用する際にログインを求められたと思います。
しかし、今日利用しているTwitterとinstagramでログインを求められていますか？？
ログインなんかいちいちしなくてもアプリを開けば自分のアカウントで友達の投稿一覧が表示されていますよね！
あれこそがまさにクッキー(Cookie)がユーザー情報(ユーザー名、メールアドレス、パスワード等)をブラウザに保存してくれているからなんです。
キャッシュとは
・種類
「HTMLやCSSなどのwebページ情報」
クッキーについて勉強すると、キャッシュと何が違うの??と思うことがあると思いますが、異なる点はやはり保存する情報の種類です。
クッキーは「ユーザー情報」というピンポイント部分を保存するのに対し、
キャッシュは「HTMLやCSSなどのwebページ」という全体的な表示部分を保存してくれます。
・具体例
「良く訪れるお気に入りのwebサイト(全てのwebサイト)」
みなさんも1日に1回は見にいくようなwebサイトがあるかもしれません。初めてそのサイトに訪れた時よりも、2回目3回目に訪れた時の方がそのサイトのテキストや画像の表示が早いなと感じたことがあると思います。
あれこそがまさにキャッシュがHTMLやCSSなどの情報をブラウザに保存してくれているからなんです。
セッションとは
・種類
「ユーザーのアクション情報」
ユーザー情報という点でクッキーと同じなためにパニックになりやすいですが、明確な違いがあります。
クッキーはユーザー名、メールアドレス、パスワードなどの「"誰が"」というユーザー情報を保存するのに対し、
セッションはログインしたユーザーがそのサイトで行った動作(アクション)などの「"何をした"」というユーザー情報を保存するということです。
こう考えると、ユーザー情報を扱うサイト(ログイン画面があるサイト)では必ずといっていいほどこのクッキーとセッションが機能している気がします。
だから、「"誰が"」「"何をした"」という「クッキー」と「セッション」は2つでセットとして取り上げられていたのですね！！
・具体例
「amazonのショッピングカート」
amazonで買い物をするとき、商品を選択したら一度ショッピングカートに入れると思います。しかし、カートに入れたあとすぐには購入せずにamazonのサイトを離れ、時間を置いてから同じくamazonのサイトに戻ってくると、ショッピングカートに商品が入ったままになっていることがあると思います。
あれはまさに、セッションが機能し、ログインしたユーザーが「"何をした"」かの情報(商品をカートに入れた)をサーバー側に保存してくれているからなんです。
まとめ
以下にそれぞれの特徴(保存データ情報の種類)と保存場所を表にまとめてみました！
| 保存情報の種類 | 保存場所 | |
|---|---|---|
| クッキー | ユーザー情報("誰が") | ブラウザ |
| キャッシュ | HTMLやCSS情報 | ブラウザ |
| セッション | ユーザー情報("何をした") | サーバー |
さいごに
混同しやすい３つをざっくりまとめてみましたがいかがでしたでしょうか。
私自身まだまだ未熟者すぎるので、間違っているところなどありましたら、コメントいただけましたら幸いです。
最後まで読んでいただきありがとうございました！！