セッションとCookieとキャッシュって何が違うの？

# はじめに

IT業界にいると、

「セッションが切れた〜！」「セッションをクリアしよう〜！」「Cookieが切れた〜！」「Cookieに保存して〜！」「キャッシュに残ってる〜！」「キャッシュをクリアしよう〜！」

みたいなエンジニアの声を耳にすること、多いですよね。自分もよく耳にします。

<br>
しかし、セッション、Cookie、キャッシュの違い、ちゃんと説明できますでしょうか？


恥ずかしながら自分は、スラスラと説明ができませんでした・・・

なんとなく、「Webサイトの情報を記憶しておくもの」みたいなイメージはありますが、具体的に説明しろと言われると言葉に詰まってしまいます。

<br>
そこで今回は、セッション、Cookie、キャッシュの違いについて調べ、記事にすることにしました！！

# 結論

先にざっくり結論を述べると、

セッション
→複数リクエストを同一ユーザとみなすこと

Cookie
→Webサイトへのアクセス情報を記憶するテキストファイル（セッションを実現するための手段）

キャッシュ
→アクセスしたWebページのページ情報（ファイル）を、ブラウザに一時保存しておく仕組み

<br>
という感じです。

<br>
以下で詳しく説明します！

# セッションとは？

セッションとは、「クライアントとサーバー間で一定期間続く一連の通信や操作のこと」だそうです。

もう少し分かりやすく噛み砕くと、「複数リクエストを同一ユーザと認識させることができる期間」です。

### Webページの仕組み

セッションを理解するために、まずはWebページの仕組みを説明します。

Webページはhttpプロトコルを使用してクライアントとサーバ間の通信を行いますが、httpはステートレスになっています。

ステートレスとは、"サーバーへのアクセスが全て新規のアクセスとみなされる"という性質のことです。
例えば、あるユーザが同じブラウザで複数回リクエストをしても、サーバからすると同じユーザと認識できません。

![B2AA2066-7982-4233-B83F-372FA37BF815_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817219/d3a2dad3-3d57-bd97-de9b-6375edde8d03.jpeg)


つまりステートレスの下では、
例えば、ブラウザでSNSにログインをした後、別のページを訪れ、再度SNSのページにアクセスすると、ログイン情報が切れてしまします。

不便ですよね・・・

そこで

「複数リクエストを同一ユーザと認識させることができる期間」＝ セッション

を確立することで、ログイン情報を保ったまま再アクセスが可能になります！
<br>

でも、「ステートレスの下でどうやって確立するの？」と思いますよね。

そこでセッションの仕組みについて説明します。

### セッションの仕組み

セッションは、セッションIDを、クライアントとサーバ間でやり取りすることで確立します。
セッションIDとは、初回リクエスト時にサーバが発行するランダムなIDになります。

サーバで発行されたセッションIDが、Cookieにのせられて、ブラウザに送られ、2回目以降のリクエスト時には、ブラウザからサーバーにCookieが渡されます。
そして、サーバはCookie内のセッションIDを取り出し、ユーザ情報を取得するわけです。

### そもそもCookieとは？
上記の通り、CookieにはセッションIDのような情報を載せることができます。
Cookieの実態は、ユーザがWebページにアクセスしたときにサーバ上で作成されるテキストファイルだそうです。

Cookieの中には、セッションIDの他にも、アクセス日時、訪問回数、ECサイトのカート内の情報など、さまざまな情報を記載することができ、Cookieはサーバで作成された後、ブラウザに送られて保存されます。

なお、Cookieのテキストファイルの中身は以下のように、「Name（項目）」と「Value（値）」の組み合わせでできています。（中身はぼかしてあります）

![BzE30tH6bUpePGy1727783320_1727783500.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817219/fa5e789a-d062-f2fb-989f-9b0b824bc1d4.jpeg)

このCookieにセッションIDを記載し、クライアントとサーバ間でCookieをやり取りすることで、セッションを確立することができます。

### Cookieを使用したセッション確立の流れ
以下は、AさんがSNSにログインした時の例です。

＜初回ログイン時＞
1. ブラウザにてAさんが自身のIDとPWで初回ログイン。
2. ログインに成功するとサーバにてユーザ情報（Aさん）に紐づくセッションIDとCookieが生成される。
3. データストアにセッションIDとユーザの組み合わせが保存される。 
4. サーバはCookieにセッションID（＋その他情報）を記載し、ブラウザに送信し、ブラウザはCookieを保存する。

![281C60AA-4FBB-4625-ABEC-773487510A15_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817219/e62cd684-588b-d6e1-3ed1-521b636063bf.jpeg)

＜次回ログイン時＞
5. AさんがSNSのページにアクセスすると、ブラウザがCookieをサーバに渡す。
6. サーバは、Cookie内のセッションIDをデータストアに問い合わせ、ユーザを識別する。
7. Aさんとして自動ログインし、ページを生成する。

![5FBBF375-DD97-489A-8DD6-24132749B4E4_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817219/1dcd5523-f95d-08ef-4e37-188c32ad62e8.jpeg)

このようにして、セッションが確立され、ステートレスの下でも、複数リクエストを同一ユーザからのものと認識させることができます。


### セッションのまとめ
上記のように、セッションはCookieとかなり関係しています。

セッションは目的。Cookieはセッションを確立するための手段。と考えるのが良いかと思います！

# キャッシュとは？

キャッシュとは、アクセスしたWebページのページ情報を、ブラウザに一時保存しておく仕組みのことだそうです。

これだけ聞くと、Cookieと一緒やん！と思いますが、

Cookieは”Webページへのアクセスの内容”をテキストファイルに保存するのに対し、キャッシュは”Webページに関するファイルそのもの”をブラウザに保存します。

以下は、Yahoo! JAPANのトップページに初回アクセスした時のダウンロードファイルの一部です。

Sizeカラムを見てみると、実際に数KBのファイルが複数ダウンロードされていることが分かります。

ダウンロードしたこれらのファイルをもとにページが生成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817219/3055d6d1-afaa-7c37-27c0-9e2ffc5b5091.png)


次に一度ページを離れ、再度Yahoo! JAPANのトップページにアクセスしてみます。

すると、Sizeカラムにて、先ほど数KBでダウンロードされていた複数のファイルの内いくつかが、”disk cache”や”memory cache”となっていることが分かります。

これは、キャッシュとしてブラウザに保存されたファイルがそのまま使われているということです！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817219/d75ee382-b176-9902-eb26-9d27a3e60414.png)


上記のようにキャッシュを使用することで、同一Webページに複数回アクセスした際に、その都度ファイルをダウンロードしなくても、キャッシュに保存したファイルを使用して画面を表示できます！

サーバからファイルをダウンロードする時間より、ブラウザにキャッシュされたファイルを読み込む時間のほうが短いため、Webページの表示スピードの向上を実現できます！

また、通信量も節約できます！

<br>
しかし、サーバ側のファイルが更新されたにも関わらず、キャッシュのデータを使用してしまうと、古い内容が表示される場合があります。

そのような場合に備えて、ユーザはブラウザのスーパーリロードを行ったり、開発者は違うファイル名でデプロイしたりと、対策をする必要があります。

また、キャッシュの増加は、端末の動作を重くする可能性があるため、キャッシュの保存量に上限を設けるか、定期的にキャッシュクリアをするなどして、対策することも大切です。

# 最後に

セッションとCookieとキャッシュについて説明しましたが、ご理解いただけましたでしょうか！

感覚としては、Cookieとセッションは関連性が高く、キャッシュはちょっと別物な感じがしました。

今回、自分なりに調べてみましたが、間違っている点や補足情報あればコメントにて教えていただけると幸いです。

最後までお読みいただきありがとうございました！！！