自動保存は不意のクラッシュ対策には有効ですが、大幅なCSS書き換えが失敗した際に元に戻す用途には向きません。GB CoderはIndexedDBを活用したスナップショット機能を備えており、名前を付けたチェックポイントの保存、差分比較、ワンクリック復元が行えます。

1. 自動保存とは異なる「意図的なチェックポイント」の重要性

自動保存は壊れたコードも忠実に保存します。大きな構造変更に挑む前には、いつでも戻れるスナップショットを残すことが不可欠です。

2. プロジェクトバーからのスナップショット作成

Ctrl+Shift+Sまたは「スナップショット作成」をクリックし、「Tailwind移行前」などの名前を付けます。仮想ファイルツリー全体がIndexedDBにタイムスタンプ付きで記録されます。

3. Monaco差分エディタによる履歴の視覚的比較

スナップショット一覧から復元ポイントを選択すると、差分ビューアが開きます。追加箇所は緑、削除箇所は赤で並列表示され、変更点を一目で把握できます。

// Structure of a snapshot record stored in IndexedDB
{
  "snapshotId": "snap-1729420800000",
  "projectId": "proj-default",
  "label": "Working Form Validation State",
  "createdAt": "2026-10-20T10:40:00.000Z",
  "filesCount": 5,
  "sizeBytes": 14280,
  "fileManifest": ["index.html", "style.css", "script.js"]
}

4. ワンクリックでの安全なロールバック実行

試行錯誤がうまくいかなかった場合、「スナップショットを復元」を押すだけで当時の状態に戻せます。復元前には現状の自動バックアップが作成されるため安全です。