初学者向けにCookieの概念と使い方を説明してみる

#はじめに
本稿は初学者向けにCookieの概念から実際の使い方までを解説した記事になります。

Cookieが何のために存在して、どのように使うのかといったことをざっくり理解して頂ければ幸いです。

実際の使い方だけ学びたい方は、[2 実際のCookieの使用方法](#2-実際のcookieの使用方法)から読んでください。

#目次
[1 Cookieとは](#1-cookieとは)
[1.1 そもそもCookieって何のためにあるの？](#11-そもそもcookieって何のためにあるの)
[1.2 セッションとの違い](#12-セッションとの違い)
[1.2.1 保存先](#121-保存先) 
[1.2.2 有効期間](#122-有効期間)

[2 実際のCookieの使用方法](#2-実際のcookieの使用方法)
[2.1 Cookieを保存する](#21-cookieを保存する)
[2.2 Cookieを呼び出す](#22-cookieを呼び出す) 
[2.3 設定したCoookieを確認する](#23-設定したcookieを確認する)

#1 Cookieとは
ここでは、そもそもCookieとはなんぞや？という話をします。

#1.1 そもそもCookieって何のためにあるの？
Cookieを説明するにあたって、まずWebブラウザとサーバー間の通信について触れます。
まず、Webブラウザとサーバー間でデータをやり取りするために使われる<b>HTTPプロトコル（通信の手続き）はステートレス</b>という状態です。

つまり、<b>Webページを表示しているサーバーは前のページからの続きなのか関連したアクセスなのか以前の状態を全く覚えていない</b>ということです。（HTTPプロトコルはステートレスであるという説明は難しいと思うので、最低限ここだけ分かっていれば良いです）

SNSを例に出すと、「ログインする」「自分のマイページに入る」「誰かの投稿を見る」といったような一連の機能があると思いますが、ステートレスな状態では「誰がログインしているか」「誰のマイページなのか」「誰の投稿を表示するのか」といったところが判別できないのです。

そのステートレスな状態を管理するために生まれた技術のひとつが<b>Cookie</b>です。
SNSの例で言うと、「ログインしているのは○○さん」「表示すべきマイページは○○さん」「○○さんの投稿を表示する」といった情報をCookieを使って保存しています。
サイトにアクセスする際にこれらの情報を呼び出すことによって、それぞれのユーザーがそれぞれの画面でSNSを利用することができます。

そして、<b>Cookieが保存する情報はWebサーバーが発行し、Webブラウザ上に保存される</b>という特徴を持っています。(ちなみに保存する技術名だけでなく、保存される情報のことも一般的にCookieと呼びます。）
ブラウザは同じサイトにアクセスする際にはそのCookieをWebサーバーに送信し、
Webサーバーはブラウザからのリクエスト毎にCookieが保存した情報を参照することができます。


<b>実はCookieの用途はこれだけではないのですが、紹介しきれないので割愛します
知りたい方は以下ドキュメントを参照してください</b>
[MDNのHTTP Cookieのドキュメント](https://developer.mozilla.org/ja/docs/Web/HTTP/Cookies)


参考:
[【PHP超入門】Cookieとセッションについて](https://qiita.com/7968/items/ce03feb17c8eaa6e4672)
     [Cookieとセッションをちゃんと理解する](https://qiita.com/hththt/items/07136ad74127999df271)
[「Cookie」と「セッション」と「セッションCookie」の違い](https://ips.nekotype.com/2441/)

#1.2 セッションとの違い
少し話は脱線しますが、一時的に情報を保存する技術ということで類似点があるセッションとの違いについても触れておきます。

大きな違いとしては2つあります。
保存先と有効期間です。
#1.2.1 保存先
先ほどCookie内の情報の保存先について、
<b>Webサーバーが発行し、Webブラウザ上に保存される</b>と書きましたが、
これに対してセッションは、Webサーバーに保存されます。
#1.2.2 有効期間
Cookieが情報を保持できる期間は任意で設定できるのに対し、
セッションはブラウザを閉じるまでしか保持できません。

参考:[11.3 セッションの仕組みを理解しよう](https://kanda-it-school-kensyu.com/php-basic-contents/pb_ch11/pb_1103/)

#2 実際のCookieの使用方法
Cookieの概念を説明したところで、実際のコードの書き方を解説します。
(ここではPHPを使用して説明します）
##2.1 Cookieを保存する
Cookieを保存するには`setcookie()`を使用します。
`setcookie（’キー’,’保存したい値’,’有効期限’）`
第3引数を設定しないことも可能ですが、ブラウザを閉じると消えてしまいます。
(第4引数以降は省略します。知りたい方は下記のドキュメントを参照してください。)
参考:[MDNのsetcookieのドキュメント](https://www.php.net/manual/ja/function.setcookie.php)

以下の例ではキーを`animal`,保存したい値を`panda`,有効期限を保存時から24時間(60*60*24秒)後に設定しています。

```php
<?php
//ここでCookieに情報を入れる
setcookie('animal','panda',time()+60*60*24);

//time関数 time()は現在時刻(単位/秒)を指します。
?>

//実際に動作させるのであれば、HTMLのコードはこの下に書きます。(省略）
```
<b>このsetcookie()を動作させる順番は、必ず文字列が出力される前に動作させないといけません。
（エラーが出ます。）</b>


#2.2 Cookieを呼び出す
Cookieを呼び出すには`$_COOKIE[]`を使用します。
`$_COOKIE['キー']`
引数でキーを指定することで、対応した保存した値を呼び出すことができます。
（先ほどの例で言うと、キーに`animal`を指定すると`panda`を呼び出すことができます。
先ほど保存したCookieを呼び出して、出力をしてみます。

入力

```php
//HTMLは省略
<?php
//キー：animal 保存した値:panda
  echo 'Cookieの中身は：'.$_COOKIE['animal'].'です';
?>
```

出力

```
//キー：animal 保存した値:panda
Cookieの中身は：pandaです
```

#2.3 設定したCookieを確認する
設定したCookieを確認するには、各ブラウザの開発者ツールを使います。
ブラウザによって確認方法が違うので、下記リンクを参照してください。
[主要ブラウザCookieの確認方法まとめ](https://qiita.com/pipi0813/items/93e60c605f89f93e49fb)