博士

やあ、ロボ子！今日はソースマップについて話すのじゃ。

ロボ子

ソースマップですか。コンパイルされたJavaScriptファイルと元のソースコードを繋ぐものですよね。

博士

その通り！ソースマップは、ブラウザの開発者ツールでminifyされたJavaScriptをデバッグする時に、元のソースコードを表示してくれる優れものなのじゃ。

ロボ子

なるほど。TypeScriptのビルドパイプラインで、トランスパイル、バンドル、minifyといった各段階でソースマップが元のコードへの接続を保持するんですね。

博士

そうじゃ！ソースマップは、TypeScriptからJavaScriptへの変換、複数のモジュールを1つのファイルに結合、そして本番環境向けにコードを圧縮するminify、これらの各段階で元のコードとの繋がりを保つ役割があるのじゃ。

ロボ子

ソースマップファイルはJSON形式で、拡張子は`.js.map`なんですね。`version`, `file`, `sourceRoot`, `sources`, `sourcesContent`, `names`, `mappings`といったフィールドがあるんですね。

博士

`version`はソースマップのバージョンで、今は常に3じゃ。`file`は対応する生成されたファイル名、`sourceRoot`はソースURLのプレフィックスじゃな。そして、`sources`は元になったソースファイルのパスの配列、`sourcesContent`は元のソースコードそのもの、`names`は変数名や関数名などの識別子の配列じゃ。

ロボ子

そして、一番重要なのが`mappings`ですね。生成されたJavaScriptファイルの各トークンと、元のソースファイル内の対応する位置との間の位置マッピングを含むと。

博士

そう！`mappings`は、元のソースファイルのファイルパス、行と列、変数/関数名を追跡するのじゃ。VLQ（Variable Length Quantity）エンコーディングとBase64文字を使って圧縮されているのがミソじゃな。

ロボ子

VLQエンコーディングは、できるだけ少ないバイト数で数値を表す効率的な方法なんですね。符号ビットのエンコード、5ビットグループへの分割、Base64への変換というステップがあるんですね。

博士

その通り！VLQエンコーディングは、位置の差分をエンコードすることで、ソースマップのサイズを小さく保つのに役立つのじゃ。

ロボ子

`mappings`の構造は、コンマとセミコロンで区切られたセグメントのシリーズで、セミコロンは改行として機能し、生成されたファイル内の行番号を決定するんですね。

博士

そうじゃ！各セグメントは、生成されたファイル内の位置からソースファイル内の位置へのマッピングを表すのじゃ。セグメントは、生成された列のみ、または生成された列、ソースファイルインデックス、ソース行、ソース列、名前インデックスを含むことができるのじゃ。

ロボ子

ソースマップって、本当にすごい技術ですね。これがないと、minifyされたコードのデバッグは悪夢になりそうです。

博士

じゃろ？ソースマップは、ウェブ開発者にとってなくてはならないものなのじゃ！ところでロボ子、VLQエンコーディングって、まるで忍者のように情報を隠蔽しているみたいじゃな。

ロボ子

確かに、そうかもしれませんね。でも、忍者は隠れるのが得意ですが、VLQエンコーディングは圧縮するのが得意、という違いがありますね。

博士

うむ、座布団一枚！