ローカル デバイス ストレージとクラウドベースのサーバー ストレージの両方で、適切なストレージ メカニズムを選択することが重要です。優れたストレージ エンジンは、情報の確実な保存、帯域幅の削減、応答性の向上を実現します。適切なストレージ キャッシュ戦略は、オフライン モバイルウェブ エクスペリエンスを実現するためのコア コンポーネントです。
この記事では、ストレージ API とサービスを評価するための基礎を簡単に説明します。その後、比較表と一般的なガイダンスを示します。近日中に、選択したストレージ トピックについてより深く理解するためのリソースを追加する予定です。
ストレージ分類
まず、ウェブアプリのデータ ストレージを分析できるディメンションについて説明します。後で、このフレームワークを使用して、ウェブ デベロッパーが利用できる多くのストレージ オプションを列挙して評価します。
データモデル
データ単位を保存するモデルによって、データが内部でどのように編成されるかが決まります。これは、ストレージ リクエストと取得リクエストの使いやすさ、費用、パフォーマンスに影響します。
構造化: SQL ベースのデータベース管理システムによく見られるように、事前定義されたフィールドを持つテーブルに保存されたデータは、クエリの種類が事前にわかっていない場合でも、柔軟で動的のクエリに適しています。ブラウザ内の構造化データストアの代表的な例が IndexedDB です。
Key/Value: Key/Value データストアと関連する NoSQL データベースは、一意のキーでインデックスされた非構造化データを保存および取得できます。Key-Value データストアは、インデックス付きの不透明なデータに一定時間でアクセスできるという点で、ハッシュテーブルに似ています。Key-Value データストアの代表的な例としては、ブラウザの Cache API やサーバー上の Apache Cassandra があります。
バイト ストリーム: このシンプルなモデルでは、データを可変長の不透明なバイト文字列として保存し、内部の組織化はアプリケーション レイヤに任せます。このモデルは、ファイル システムや階層的に編成されたその他のデータの blob に特に適しています。バイト ストリーム データストアの代表的な例として、ファイル システムやクラウド ストレージ サービスがあります。
永続性
ウェブアプリのストレージ方法は、データが永続化されるスコープに応じて分析できます。
セッションの永続性: このカテゴリのデータは、単一のウェブセッションまたはブラウザタブがアクティブである限り保持されます。セッション永続性のあるストレージ メカニズムの例として、Session Storage API があります。
デバイスの永続性: このカテゴリのデータは、特定のデバイス内のセッションやブラウザのタブ/ウィンドウ間で保持されます。デバイスの永続性を持つストレージ メカニズムの例として、Cache API があります。
グローバル永続性: このカテゴリのデータは、セッションとデバイス間で保持されます。そのため、最も堅牢なデータ永続性です。グローバル永続性のあるストレージ メカニズムの例として、Google Cloud Storage があります。
対応ブラウザ
デベロッパーは、問題ドメインに最適な API を選択する必要があります。ただし、標準化され、確立された API は、カスタム インターフェースや独自のインターフェースよりも優れているため、より長い期間使用でき、より広範にサポートされているという点も考慮する必要があります。また、幅広いナレッジベースと豊富なデベロッパー エコシステムも利用できます。
トランザクション
多くの場合、関連するストレージ オペレーションのコレクションがアトミックに成功または失敗することが重要です。従来、データベース管理システムでは、トランザクション モデルを使用してこの機能をサポートしていました。このモデルでは、関連する更新を任意の単位にグループ化できます。必ずしも必要ではありませんが、一部の問題ドメインでは便利な機能であり、場合によっては不可欠な機能です。
同期 / 非同期
一部のストレージ API は、ストレージ リクエストまたは取得リクエストが完了するまで、現在アクティブなスレッドをブロックするという意味で同期的です。これは、ストレージ リクエストが UI とメインスレッドを共有しているウェブブラウザでは特に負担になります。効率性とパフォーマンス上の理由から、非同期ストレージ API を使用することをおすすめします。
Chrome DevTools でストレージをデバッグする
Chrome DevTools を使用して任意のウェブ ストレージ API を検査してデバッグする方法については、次のドキュメントをご覧ください。ここで言及されていない API は、DevTools でサポートされていないか、該当しません。
複数のストレージ API を使用している場合は、DevTools の Clear Storage 機能をご確認ください。この機能を使用すると、ボタンを 1 回クリックするだけで複数の店舗を消去できます。詳細については、サービス ワーカー、ストレージ、データベース、キャッシュを消去するをご覧ください。
次のステップ
ここまで、ストレージ メカニズムについて考えるための関連する方法のいくつかを確認し、現在利用可能な最も一般的な API とサービスを比較しました。今後、関心のある 1 つ以上のトピックについて詳しく説明するコンテンツを追加する予定です。