【学習ログ】MDN JavaScript チュートリアル (16 回目)

はじめに

学習したもの

MDN JavaScript コーナー
┃
┗ チュートリアル
　 ┣ 完全な初心者向け
　 ┃
　 ┣ 中級者向け
　 ┃ ┣ クライアントサイド Web API
　 ┃ ┃ ┣ Web API の紹介
　 ┃ ┃ ┣ 文章の操作
　 ┃ ┃ ┣ サーバからのデータ取得
　 ┃ ┃ ┣ サードパーティ API
　 ┃ ┃ ┣ 絵を描く
　 ┃ ┃ ┣ 動画と音声の API
　 ┃ ┃ ┗ クライアント側でのデータ保存（本日の学習箇所）
　 ┃ ┃
　 ┃ ┣ JavaScript 「再」入門
　 ┃ ┣ JavaScript のデータ構造
　 ┃ ┣ 等価比較と同一性
　 ┃ ┗ クロージャ
　 ┃
　 ┗ 上級者向け

概要

チュートリアルで習った事の概要は下記の通りです。

クライアント側でのデータ保存

アプリケーション・データを保存するためのクライアント側のストレージ API の使い方を学習する。

ノート・メモ

クライアント側でのデータ保存
- クライアント側での保存は、クライアント上に (つまりユーザーのマシン上に) データを保存して必要なときにそのデータを取得できるようにしてくれる、いくつかの JavaScript API から構成されています。
旧式な方法: クッキー
- クライアント側での保存という考え方には、長い歴史があります。ウェブの初期から、ウェブサイト上でのユーザー体験を個別化するための情報を記憶するべく、サイトはクッキーを使ってきました。そうしたクッキーは、ウェブ上で一般的に使われるクライアント側での保存の、最初期の形式です。
その古さゆえに、クッキーには、技術的にもユーザー体験の観点からも厄介ごとをもたらす、多くの問題があります。
- 初回のサイト訪問時に、欧州在住者は、自分についてのデータを保存するためのクッキーを自分が使うことになるかどうかを知らせてくるメッセージを見せられる羽目になるのです。(EU クッキー指令による)
- 上記の問題以外にも、時代遅れである事・複数のセキュリティ問題・複雑なデータを保持できない事があげられる。
- 数多くの問題点と現在はより良い・よりモダンな方法がある事からクッキーはチュートリアルでは取り上げないとのこと。
- クッキーにある唯一の利点は、極めて古いブラウザーでもサポートされているということです。そのため、すでに廃れたブラウザー (Internet Explorer 8 またはそれ以前のバージョンなど) をサポートすることをプロジェクトが要求している場合には、依然としてクッキーが有用かもしれません。
新しい方法
- Web Storage API は、名前とそれに対応する値とからなる小規模なデータ項目を保存したり取り出したりするための、とても簡潔な構文を提供しています。これは、ユーザーの名前、ユーザーがログインしているかどうか、画面の背景にどの色を使うべきか、といったような、何らかの単純なデータを記憶するだけでよい場合に有用です。
- IndexedDB API は、複雑なデータを保存するための完全なデータベース・システムをブラウザーに提供しています。これは、顧客レコードの完全な集合から、音声ファイルまたは動画ファイルのような複雑なデータ型にいたるまでの、種々の物事に対して使えます。
Web Storage API
- (文字列や数などに限定された) データからなる単純な名前／値のペアを保存し、必要なときにその値を取り出します。
- ウェブストレージ・データのすべては、ブラウザー内部の二つのオブジェクト的な構造体の中に含まれます。つまり、sessionStorage と localStorage の中です。
- sessionStorage は、ブラウザーが開いている限り、データを存続させます (ブラウザーを閉じるとデータは失われます)。
- localStorage は、ブラウザーを閉じて、それから再びブラウザーを開いた後でさえも、データを存続させます。
IndexedDB API
- ブラウザーで利用可能であり、複雑で関係性のあるデータを保存できる、完全なデータベース・システムです。そしてそのデータの型は、文字列または数値のような単純な値に限定されません。動画や静止画像、そして、その他のものもほとんどすべて、IndexedDB インスタンスに保存できます。
- IndexedDB の使用は、ウェブストレージ API の使用よりも遥かに複雑です。
サービスワーカー
- ただ単に置いてあって、特定のオリジン (ウェブサイト、または、あるドメインにあるウェブサイトの一部) に対して、そこにブラウザでアクセスした際に登録される、JavaScript ファイルのことです。
- 登録されれば、サービスワーカーは、当該オリジンで利用可能なページを制御できます。サービスワーカーは、ロードされたページとネットワークとの間に位置して、当該オリジン宛のネットワーク要求を横取りすることにより、こうした制御を行います。
- サービスワーカーが要求を横取りすると、その要求に対して望むことは何でも行えます。典型例では、ネットワーク応答をオフラインに保存しており、その後、要求に応じて、ネットワークからの応答の代わりに、保存してあるそれらの応答を提供しています。これによって事実上、ウェブサイトを完全にオフラインで機能させることが可能になります。
キャッシュ API
- クライアント側での保存のもう一つの仕組みですが、これにはちょっとした相違点があります。キャッシュ API は HTTP 応答を保存するように設計されているのです。そのため、サービスワーカーと一緒に使うと、とてもうまく機能します。

分かった事

Web Storage API(localStorage)の簡単な使い方が分かった気がします。

分からなかった事

IndexedDB , サービスワーカー, キャッシュ API について、内容が今の私には高度すぎて分からなかったです。

まとめ

全体的に高度な内容になっており、すごく難しかったです。（どんどん自信がなくなる）

次のチャプター「JavaScript 「再」入門」以降は、JavaScript の基礎部分を詳細に見ていく事になるようです。

最後までご覧頂きありがとうございました。

フロントエンド学習記(仮題)

主にフロントエンドについて学習した事を記録・メモしていきます。