今更ながらcookie🍪って何？

![DTNJ_COOKIE-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1029483/55f7d751-b0b0-2a3b-6b0e-c9a7873787fa.jpeg)


こんにちは、たにーです。

今回は、cookieについてです。

「、、、クッキー🍪 ですか？？？(笑)」
はい。本気で最初聞いた時は、頭に🍪 が出てきました(笑)

cookieを知ったきっかけは、チーム開発での雑談と、railsチュートリアルでです。
（ログイン機能実装の場面で出てきました。）

なので、今回は、
cookieが何者なのか、実際にどんな役割を果たしているのかを纏めてみます。

#cookie(クッキー)とは？

クッキー（Cookie）とは、
**Webサイトにアクセスしたユーザーに関する情報を保存する仕組み**を意味します。
そのおかげで、あるページから別のページに移動した時にもユーザー情報などが破棄されず、
再びページを訪れた際でもそれらのユーザー情報が引き継がれます。

#具体的に言うと？？？
cookieを何かに例えるなら、**「会員証」**と言われています。
具体例を挙げるならば、下記がおそらく該当するかと思います。
<br>

###ログイン状態の保持(TwitterやFacebookなどのSNS)

TwitterやInstagramなどのSNS、ログインが必要な各種サービスを考えてみてください。
一度IDとパスワード（アイパス）を入力してしまえば、しばらくしてからアクセスしても、
ログイン状態は保持されていて、いちいちログイン情報を入力する必要はありません。
これは、cookieにログイン情報が記載されているおかげです。


![ダウンロード (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1029483/73fce462-fb3b-58e5-f26c-53ef1f9c2bda.png)

###買物カゴの中身の維持(ZOZOなどのECサイトでのカート情報など)

多くのショッピングサイトでは、ユーザーのIDやカートの情報をcookieで保存しています。
これにより、一回サイトを離れてしまったユーザーがまたサイトを訪れた時に、
毎回IDを打ち込んだり商品をカートに入れ直したりすることなく、スムーズにショッピングの続きができます。
これもSNS同様に、cookieにその履歴情報が記載されているからです。
![ダウンロード (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1029483/fcd47115-0b92-6c72-aa27-da2c112c686d.png)


よくよく考えてみると、
私たちの生活において常日頃からcookieを使用している事がわかります。
最近は、通販で物を買うことも増えたので余計にですね。

#cookieの起源

cookieを開発したのは、ルー・モントゥリ(Lou Montulli)という人物。彼はMIT（マサチューセッツ工科大学）の「Innovators under 35（35歳以下のイノベーター35人）」に選ばれた人物であり、90年代のアメリカのIT業界で大活躍したとのこと。

90年代初頭には現在のWWW（ワールド・ワイド・ウェブ）の技術のもととなるWebブラウザLynxを開発したり、ウェブページを作るのに必要なHTML言語の発展に貢献。1994年にネットスケープ社のエンジニアになったモントゥリは商用ウェブアプリケーションの開発を担当し、そこでcookieを開発。

はじめはネットスケープ社のウェブサイトを訪れたユーザーが、すでに訪問したことがあるかどうかを識別するのにcookieが使われていましたが、その後より詳細なユーザー情報が取得できるように発展。


#cookieの由来

調べてみると、cookieの語源は「マジッククッキー」であると言われているそう。マジッククッキーとは、中に秘密のメッセージが入ったクッキーのこと。
秘密のメッセージを入れるというところが、ユーザーの情報をやり取りする役割と重なり、cookieと名づけられたとのこと。

![GettyImages-506878030-e4beb95a66e84b34bce8bc0ff7b940a8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1029483/128d0724-7998-845b-74ab-1b6d745a8454.jpeg)


ほう、、、と納得しました(笑)

#cookieの仕組み

次は、cookieの仕組みです。
わかりやすい画像がありましたので、引用させていただきます。

「cookie」の仕組みは、
WEBサーバーからユーザーが使用しているWEBブラウサに送信される、ユーザーがのデータを保管しておくためのファイルです。

![cokkie_仕組み画像.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1029483/27006861-67ba-c0e7-9d7a-6c8f9892bfba.jpeg)
引用：https://sem-journal.com/design/cookie/

上記の図の流れのように、
2回目にwebサイトにアクセスした際に、前回発行されたcookieファイル(=そのユーザーの詳細情報が記録されている)があるため、
すんなりログインが出来たり、買い物の続きができるようになります。


#cookieのメリット

ユーザー目線とWEBマーケター目線から。

##ユーザー目線でのメリット👪

###Webサイトを快適に閲覧できる

これは言わずとも先ほど具体例をあげた、SNSなどのログイン情報保持がそうですね。
何度、IDやパスワードを入れずに住むのは、私たちにとってストレスフリーです。

###検索結果のパーソナライズ

Google検索を利用していると、「同じキーワードで検索したときに自分と他の人の検索結果が異なる」ことがあります。
これは、Cookieを利用してパーソナライズド検索が行われているからです。
サイトを訪問した履歴が記録されるので、「以前も訪問していたこのWebサイトを探しているのかもしれない」と判断され、
検索結果に影響を与えるのです。そのため、より早く目的のサイトを見つけ出すことができます。

##Webマーケター目線でのメリット💻

###アクセス状況を解析できる
ページの遷移やセッション数などの細かいユーザー分析を出来ます。

###リターゲティング広告・ターゲティング広告に活用できる
広告配信という観点からも、自社サイトに訪れたことがあるかどうかをCookieに保存された情報をもとに判断することができます。
この情報を使うことでリターゲティング広告の配信が可能になり、自社サイト以外のページを見ているユーザーに対して、的確に広告を表示することができます。

###提供する情報を変えられる
提供する情報を出し分けることができます。例えば、始めてサイト訪問したユーザーに対しては、「はじめてまして」というごあいさつを表示し、
2回目以降のユーザーに対しては「いつもありがとうございます」という文章を表示することも可能です。
ECショップであれば、女性と想定されるユーザーに女性向けの商品、
男性と想定されるユーザーに男性向けの商品をレコメンドするという使い方もできます。

#cookieのデメリット🚨

こちらは、ユーザー目線のみですが、

###ユーザー情報が漏洩してしまう可能性もある

パソコンを共有している、インターネットカフェや学校等で、または他人のパソコンでID・パスワードを利用したときは注意が必要です。
パソコンに保存されているクッキー情報を使って、誰かがなりすましてサイトを利用できてしまうからです。

とはいえ、心配する必要はありません。Cookieのセキュリティは、基本的に、
ウェブサイトとブラウザに任せておけばOKです。実際にCookieの暗号化機能がハッカーからあなたを守ってくれるので問題ない。

#確認方法🔎

WEBサイト上で、右クリックし、検証をクリック。
![スクリーンショット 2021-03-28 17.00.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1029483/e0ca8d7f-d6a6-1bc4-c721-3ab625ebf47b.png)
ディペローツールが開きます。

![スクリーンショット 2021-03-28 17.00.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1029483/2c0e7295-e1b3-8ad1-f715-44eba7095e61.png)

次に、上段に並んでる**application**を選択。
左側にいくつかありますが、探してみるとcookiesが有ます。
ここで、cookiesの確認が出来ます。

![スクリーンショット 2021-03-28 16.36.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1029483/9a2c94ce-1317-e66b-bea3-f21b00d00f64.png)

#cookiesの動きを確認する。

なにかのECサイトに訪問しログインする前と想定します。
その時のcookiesは、先ほどと同じ状態です。

![スクリーンショット 2021-03-28 16.36.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1029483/9a2c94ce-1317-e66b-bea3-f21b00d00f64.png)

実際に、新規会員登録すると想定しましょう。
登録完了が済み、無事ログイン出来た際にもう一度cookiesを確認しましょう。

![スクリーンショット 2021-03-28 17.06.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1029483/92e36179-5cd0-e207-3654-641ccd8a5ff3.png)

あえて、行を選択し、わかりやすくしていますが、
その部分が先ほど無かった部分で、ログインしたことによって追加されました。

**それが、cookiesによってユーザーのログイン情報が保存された証拠になります。**
これによって、再度本ECサイトを訪問しても、スムーズにログインや、前回の続きでお買い物が出来たりします。

#削除方法

削除も簡単に出来ます。
ログインしているwebサイトにて同様にディペローツールを開き、同じ画面までいきましょう。
![スクリーンショット 2021-03-28 17.06.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1029483/92e36179-5cd0-e207-3654-641ccd8a5ff3.png)

この画面に行き着いたら、nameのところを探しましょう。
今回、このサイトは「NaganoCake」なので、青色の部分が該当しているcookiesになります。

そこを右クリックすると、「delete」とあるので、押すと削除出来ます。これで完了です。

---
まだまだ、cookieの知識が浅いです。
実際、実務においてどこまでcookieを考慮してやっているのかもわかりませんが。
セキュリティー面は、考えなくてはいけない部分だと思うので引き続き勉強しないとですね。


以上、たにーでした。

#参考文献

https://railstutorial.jp/

https://qiita.com/coe401_/items/ad7dc2f3e319c5beaf40

https://www.onemarketing.jp/knowledge/word/cookie

https://saruwakakun.com/it/web/cookie-cache

https://sem-journal.com/design/cookie/