SourceMap¶
なぜ SourceMap が必要なのか？¶
かつては、HTML、CSS、JavaScript のみで Web アプリケーションを構築し、そのままのファイルをネットワークにデプロイしていました。
現在では、より複雑な Web アプリケーションを構築するため、開発ワークフローでさまざまなツールを使用することがあります。例えば：
-
JavaScript フレームワーク：Angular、React、Vue、Svelte
-
高級プログラミング言語：TypeScript、Dart、CoffeeScript
-
...
これらのツールでは、コードをブラウザが理解できる標準的な HTML、JavaScript、CSS に変換するためのビルドプロセスが必要です。また、パフォーマンスを最適化するために、コードを圧縮（例：Terser を使用した縮小や難読化）したり、ファイルを結合してサイズを削減し、Web ページの効率を高めることが一般的です。
例えば、ビルドツールを使用すると、次の TypeScript ファイルを 1 行の JavaScript に変換して圧縮できます。
/* A TypeScript demo: example.ts */
document.querySelector('button')?.addEventListener('click', () => {
const num: number = Math.floor(Math.random() * 101);
const greet: string = 'Hello';
(document.querySelector('p') as HTMLParagraphElement).innerText = `${greet}, you
console.log(num);
});
/* A compressed JavaScript version of the TypeScript demo: example.min.js */
document.querySelector("button")?.addEventListener("click",(()=>{const e=Math.floor
ソースマップの生成方法¶
ソースマップは、ファイル名が .map で終わるファイル（例：example.min.js.map や styles.css.map）です。ほとんどのビルドツールでソースマップを生成できます（例：Vite、webpack、Rollup、Parcel、esbuild など）。一部のツールではデフォルトでソースマップが含まれますが、他のツールでは生成に追加の設定が必要な場合があります。
/* Example configuration: vite.config.js */
/* https://vitejs.dev/config/ */
export default defineConfig({
build: {
sourcemap: true, // enable production source maps
},
css: {
devSourcemap: true // enable CSS source maps during development
}
})
ソースマップを理解する¶
ソースマップファイルには、コンパイル後のコードが元のコードにどのようにマッピングされるかに関する重要な情報が含まれており、開発者は容易にデバッグできるようになります。以下はソースマップの例です。
{
"mappings": "AAAAA,SAASC,cAAc,WAAWC, ...",
"sources": ["src/script.ts"],
"sourcesContent": ["document.querySelector('button')..."],
"names": ["document","querySelector", ...],
"version": 3,
"file": "example.min.js.map"
}
ソースマップの最も重要な要素は mappings フィールドです。これは VLQ base 64 エンコード された文字列を使用して、コンパイル済みファイル内の行と位置を対応する元のファイルにマッピングします。source-map-visualization や ソースマップビジュアライザー などのソースマップ可視化ツールを使用して、このマッピングを視覚的に確認し、ファイルの可用性を検証できます。
例えば、可視化ツール source-map-visualization によって生成されたコードサンプルの可視化図です。
左側の 生成 列は圧縮されたコンテンツを示し、元 列は元のソースを示しています。
可視化ツールは、元 列の各行と、生成 列の対応するコードを色分けします。マッピング セクションは、デコードされたコードマッピングを示しています。例えば、エントリ 65 -> 2:2 は次のことを意味します。
- 生成されたコード：単語
constは圧縮コンテンツの位置 65 から始まります。 - 元のコード：単語
constは元のコンテンツの 2 行目、2 列目から始まります。
これにより、開発者は縮小されたコードと元のコードの関係を素早く特定でき、デバッグプロセスがよりスムーズになります。
ブラウザの開発者ツールはこれらのソースマップを適用し、ブラウザ上で直接デバッグの問題をより迅速に特定できるようにします。