MAP ファイル形式とは？
.map ファイルは、圧縮またはコンパイルされた出力（バンドルされた .js ファイルやコンパイルされた CSS スタイルシート）を、人間が読める元のソースコードに紐付けるプレーンテキストの JSON ドキュメントです。webpack、Vite、esbuild、TypeScript コンパイラ（tsc）などのビルドツールは、出力と同時に .map ファイルを自動的に生成します。
この形式は 2011年頃に Source Map Revision 3 として標準化され、現在は主要なすべての JavaScript および CSS ビルドパイプラインで普遍的にサポートされています。ソースマップは、それが記述するファイルの隣に配置されます（app.js は app.js.map を生成し、styles.css は styles.css.map を生成します）。圧縮されたファイルは、末尾のコメントを介してそれを参照します：//# sourceMappingURL=app.js.map（CSS の場合は /*# sourceMappingURL=styles.css.map */）。
すべてのソースマップの核心は mappings フィールドです。これは、出力内の各文字位置から元のソースの対応する行と列への変換をセグメントごとに記録する、コンパクトな Base64 VLQ エンコード文字列です。その他のフィールドには、元のファイルパス（sources）、オプションでソーステキスト全文（sourcesContent）、およびシンボル名（names）が含まれます。
Chrome DevTools、Firefox Developer Tools、Safari Web Inspector などのブラウザデベロッパーツールは、.map ファイルを透過的に消費します。開発者は、ブラウザが圧縮された出力を実行している場合でも、TypeScript や SCSS でブレークポイントを設定し、元のコードをステップ実行できます。.map ファイルはデベロッパーツールが開いているときにのみ取得されるため、通常のブラウジングにオーバーヘッドは発生しません。
セキュリティと安全性
リスク： LOWソースマップはパッシブな JSON であり、コードを実行しないため、開いても無害です。本当の懸念は開発者にとってのプライバシー/セキュリティです。本番環境に送られたソースマップは、デベロッパーツールを開くすべての人に、元の圧縮されていないソースコード（場合によってはコメント、ファイルパス、または sourcesContent）を公開する可能性があります。多くのチームは、この理由から公開サーバー上の .map ファイルを意図的に削除またはブロックしています。ライブサイトで予期しない .map ファイルを見つけた場合、それは修正すべき情報漏洩の問題である可能性があります。
形式の詳細
概要- MapInfo GIS データ (.map + .tab) - MapInfo テーブルのバイナリジオメトリストア。単独ではなく、対になる .tab を介して QGIS や MapInfo Pro で開かれます。
- ゲームレベルマップ - id Tech / Quake / Source / Radiant エディタからのプレーンテキストのレベルジオメトリ。プレイ用にバイナリレベル（例: .bsp）にコンパイルされます。
- リンカー / デバッグマップ - クラッシュのデバッグのためにコンパイラ/リンカーによって出力される、シンボルアドレスとメモリレイアウトのプレーンテキストリスト。
MAP ファイルを開くプログラム
Windows3 apps
Browser DevTools (Chrome / Edge / Firefox)
標準搭載 ページを読み込み、デベロッパーツールを開きます。ブラウザは圧縮されたファイルの隣にある .map を取得し、元のソースを自動的に表示します。これがソースマップが «使用» される主な方法です。
Notepad++ (built-in / any text editor)
オープンソース .map をテキストとして開き、それがソースマップ（'"version":3' を含む JSON）であることを確認し、そのソースリストを検査します。 
macOS2 apps
Browser DevTools (Safari / Chrome / Firefox)
標準搭載 ページでデベロッパーツールを開きます。ブラウザは自動的に .map を適用して元のソースを表示します。 
Linux2 apps
技術的詳細
詳細仕様| 形式タイプ | プレーンテキスト JSON (UTF-8); バイナリマジックバイトなし |
| 仕様 | Source Map Revision 3 (v3) |
| MIMEタイプ | application/json |
| マッピングのエンコード | Base64 VLQ (Variable-Length Quantity) - すべての出力セグメントの行と列のオフセットをエンコード |
| 必須のJSONフィールド | version (3である必要があります), sources (元のファイルパスの配列), mappings (VLQエンコードされた文字列) |
| オプションのJSONフィールド | sourcesContent (埋め込まれた元のテキスト), names (シンボルリスト), sourceRoot (すべてのソースのパスプレフィックス) |
| 命名規則 | 出力ファイル名に .map を付加: app.js → app.js.map, styles.css → styles.css.map |
| ソースリンクコメント (JS) | //# sourceMappingURL=filename.js.map - 圧縮されたファイルの最終行に追加 |
| ソースリンクコメント (CSS) | /*# sourceMappingURL=filename.css.map */ - コンパイルされたスタイルシートに追加 |
| 代表的なジェネレーター | webpack, Vite, esbuild, TypeScript compiler (tsc), Dart Sass, Rollup, Parcel |
| 消費元 | ブラウザデベロッパーツール: Chrome DevTools, Firefox Developer Tools, Safari Web Inspector, Edge DevTools |
| マッピング精度 | 列レベル: 各 VLQ セグメントが単一の出力列をソースの行と列にマッピング |
| ファイルサイズ | 通常、圧縮された出力の 2〜10倍。sourcesContent が埋め込まれるとさらに増加 |
| HTTP配信の代替案 | X-SourceMap レスポンスヘッダー (非推奨。インラインコメントが推奨される方法) |
| デベロッパーツールの有効化 | ブラウザのデベロッパーツールが開いているときにのみ取得され、通常のページ読み込み時にはリクエストされない |
| リリース日 | Source Map format v3 (~2011); ubiquitous with modern JS/CSS build tooling |
| オープンスタンダード | はい · ロイヤリティフリー |
| 仕様書 | sourcemaps.info |
MAP の変換
コミュニティ Q&A
ユーザーからの質問まだ質問はありません。MAP ファイルについて最初の質問をしてみましょう。
