JavaScriptソースマップは、ミニファイされたJavaScriptファイルのシンボルや位置を元のソースコードに戻す重要な役割を果たします。デベロッパーツールでミニファイされたコードをデバッグすると、ソースマップによって元のTypeScriptの変数名やフォーマットが表示されます。この記事では、ソースマップの内部構造や形式、エンコーディングメカニズムについて詳しく解説し、どのようにデブツールがこれらを使って本番コードと開発者向けソースの間のギャップを埋めるかを探ります。ソースマップは、TypeScriptからJavaScriptへのトランスパイリング、モジュールのバンドル、コードのミニファイといった現代的なビルドプロセスの各段階で、元のコードとの関連を維持します。ソースマップファイルはJSON形式で記述され、生成ファイル名、元のファイルパス、元の識別子、そして各トークンの位置を示すマッピングデータを含みます。特に、マッピングフィールドはミニファイされたファイル内の各キャラクターの位置を元のファイル内の位置に関連付ける重要な役割を果たします。これにより、デバッグ時のセッションが効率的になるのです。