普段はフロントエンドエンジニアとしてJavaScript/TypeScript/Aangular/GraphQLを
メインに開発業務を行なっています。
今回はCookieについて紹介していきたいと思います。
1. Cookieとは?
簡単に言うと、WebブラウザとWebサーバーのやり取りにおいて、ユーザーの状態などをクライアント側で維持、管理する方法のことを指します。
これだけだと分かりにくいかと思いますが、例えばショッピングサイトの場合、「商品を選ぶ」、「買い物かごに入れる。」、「購入する。」の一連の流れにおいて、私たちは繋がった動作として認識できますが、Webサーバーはそれぞれの動作を異なったものとして認識してしまいます。
商品を選んで買い物かごに入れたはずなのに、いざ購入しようとすると買い物かごに商品がはいっていないなんてことが起こってしまう訳です。
そのため、ユーザーの状態(ここでは、あるユーザーが商品を選んで買い物かごに入れたこと)を保持する仕組みを組み込んでいく必要があります。
2. なぜCookieは必要か?
なぜそのような仕組みをとる必要があるのかというと、HTTPがステートレスである為です。
HTTPとはWebブラウザとWebサーバー間でやり取りを行うプロトコルのことです。本来HTTPはステートレス(状態を持たない)なので、例えばログイン前とログイン後で表示内容を変えたいという処理を行いたい場合でも、ログインしたかどうかの区別がつきません。
1回目にやり取りをしたとしても、2回目以降そのやり取りを覚えていません。

一方で2回目以降のやり取りを覚えていることをステートフルを言います。

一見ステートフルの方が便利そうに見えますが、サーバーが一度に多くのクライアントとやり取りをしなければならなくなり、常にクライアントの状態を保持しようとするとサーバー側にとてつもなく負担が掛かってしまいます。

そのため、Cookieを利用して、WebブラウザとWebサーバー間でステートフルの仕組みを作り、ログイン状態の保持やショッピングサイトで買い物かごに入れた商品を購入するなどの動作を実現できるという訳です。
3. WebブラウザとWebサーバーのやり取り
Cookieは、接続してきたWebブラウザを識別するための情報として、Webサーバーが初回のHTTPレスポンス時にCookieを送ります。
Cookieを受け取ったWebブラウザはそれを保存しておき、Webサーバーに再度接続する際に、Cookieを送信することでWebサーバーは接続してきた相手を認識することができる様になります。これでHTTPをステートフルにして、ユーザーの状態を保持することができるという訳です。

4. 「Set-Cookie」ヘッダー
WebサーバーからのHTTPレスポンスで送られる「Set-Cookie」ヘッダーでは、オプションでCookieの有効期限を設定したり、HTTPSのみ利用してCookieを送信設定することが出来ます。
有効期限を設定しないと、CookieはWebブラウザが閉じられると同時に削除されます(セッションCookieとも呼びます)。
5.キャッシュとの違い
情報を保持するという意味ではキャッシュという方法もあげられます。
Cookieと区別がつきづらいかと思いますが、両者には保持する情報に明確な違いがあります。Cookieはパスワード、IDなどユーザーが入力した情報を保持するのに対して、キャッシュが保持するのは、読み込まれたサイトの情報です。キャッシュを利用することで、2回目以降そのサイトにアクセスした際に高速で読み込むことができるという訳です。
今回は以上となります。また別の機会にCookieのもう少し詳しい内容やセッションについても記事にしてけたらと思います。
ここまでお読み頂きありがとうございました。