どこかのWebサイトを開いたときに、
「cookieを使用していますか？」という表示とともに、受け入れるか否かを選択するボタンが出てきますよね。
この焼き菓子とは違う「クッキー」とは何でしょうか？
今日は、クッキーとJavaScriptについて解説します。
クッキー（cookie）とは？
クッキーとは、ブラウザに保存される小さなデータのことです。
クッキーのデータは、ブラウザとWebサーバーの間で送受信されます。
主にECサイトやSNSサイトなどで、ユーザーのログイン情報を管理するために使われています。
クッキーは基本的にはブラウザとWebサーバーの間でデータをやり取りするためのものですが、JavaScriptから読み取りと書き込みを行うこともできます。
クッキーの具体的な使用例
では、クッキーは実際にどんな場面で使われているのでしょうか。
① ログイン状態の保持
ECサイトやSNSで、一度ログインするとブラウザを閉じてもログイン状態が維持されることがあります。
これは「ログインしている」という情報をクッキーに保存しているためです。
② ショッピングカートの中身を保存
ネットショップで商品をカートに入れたまま別のページに移動しても、カートの中身が消えないですよね。
これもクッキーに情報を保存している代表的な例です。
③ 表示設定や言語設定の保存
「ダークモード」「日本語表示」など、ユーザーごとの設定を覚えておくためにもクッキーが使われます。
次回アクセスしたときも同じ設定が適用されるのは、クッキーのおかげです。
JavaScriptでクッキーを使うと何ができる？
JavaScriptからクッキーを扱えるようになると、次のようなことが可能になります。
・初回アクセスかどうかを判定する
・「次回から表示しない」チェックボックスの状態を保存する
・ユーザーの簡単な設定情報を保持する
例えば「このメッセージは一度だけ表示したい」といった処理は、クッキーを使うと簡単に実現できます。
どうやってJavaScriptでクッキーを扱うの？
JavaScriptではクッキーを読み・書き・削除するコードを書きます。
ただし、標準のJavaScriptでクッキーを扱う場合には、複雑な処理を何行も書く必要があります。
そこで便利なのが、js-cookieというライブラリ※です。
js-cookieを使うと、
・クッキーの保存
・クッキーの取得
・クッキーの削除
といった操作を、シンプルなコードで書けるようになります。
細かい手順は省略しますが、
「クッキーはJavaScriptから操作できて、ライブラリ※を使えば簡単になる」
という点を押さえておけばOKです。
※ライブラリとは：
定型的なのに面倒な処理を肩代わりしてくれる、プログラミングの労力を軽減する補助プログラムのことです。
まとめ
・クッキーとは、ブラウザに保存される小さなデータ
・ログイン状態の保持や設定の保存などに使われる
・クッキーはJavaScriptから読み書きできる
・js-cookieなどのライブラリを使うと便利
クッキーは、「Webサイトがユーザーを覚えておく仕組み」として理解すると、イメージしやすいです。
参考文献
確かな力が身につくJavaScript「超」入門 第2版 狩野祐東著