Source Mapの基本 — 圧縮コードのデバッグ

Source Mapの仕組み

Source mapは、圧縮・コンパイルされたプロダクションコードと元のソースコードの間のマッピングを作成するJSONファイルです。デプロイされたコードが圧縮されていても、ブラウザのDevToolsで元のソースを表示・デバッグできるようにします。

Source Mapファイル

source mapファイル（.map）には以下が含まれます：

{
  "version": 3,
  "file": "app.min.js",
  "sourceRoot": "",
  "sources": ["src/app.ts", "src/utils.ts"],
  "names": ["calculateTotal", "items", "taxRate"],
  "mappings": "AAAA,SAAS,EAAO..."
}

主要なフィールド：

• version — 常に3（現在の仕様バージョン）。
• sources — 元のソースファイルパスの配列。
• names — 元の識別子名の配列（マングリング前）。
• mappings — 出力の各位置を元のソースの位置にマッピングするBase64 VLQエンコード文字列。

ブラウザがSource Mapを見つける方法

圧縮ファイルにはmapファイルを指すspecialコメントが含まれます：

// app.min.js
function a(t,e){return t*e}
//# sourceMappingURL=app.min.js.map

またはHTTPヘッダー経由：

SourceMap: /maps/app.min.js.map

DevToolsがこれを検出すると、mapファイルを取得し、表示用に元のソースを再構築します。

Source Mapの生成

すべての主要な圧縮ツールとバンドラーがsource mapを生成できます：

• Terser： --source-mapフラグまたはオプションでsourceMap: true
• webpack： devtool: 'source-map'（複数のモードあり）
• Vite： build.sourcemap: true
• esbuild： --sourcemapフラグ

セキュリティの考慮事項

Source mapは元のソースコードを公開します。プロダクションでは：

• コードがオープンソースでない限り、source mapを公開してデプロイしない。
• Hidden source mapを使用（webpackでdevtool: 'hidden-source-map'） — ファイルを生成するがsourceMappingURLコメントを省略。
• エラー追跡サービスにアップロード — Sentry、Datadog、Bugsnagはエラースタックトレースを復号するためにsource mapをプライベートに受け入れます。
• サーバー設定でアクセスを制限（内部IPまたは認証済みユーザーのみ許可）。

CSS用のSource Map

CSS圧縮ツールもsource mapを生成し、スタイルを検査する際にDevToolsが元のスタイルシートの場所（SCSS/Lessソースファイルを含む）を表示できるようにします。