用語集 › 💻 プログラミング › ソースマップ
【そーすまっぷ】

ソースマップ とは？

💡 変換後のコードから元のコードへ、デバッグの道しるべ
📌 このページのポイント
ソースマップのしくみ 元のコード app.ts (TypeScript) 行番号・変数名が そのまま残っている 読みやすい ✓ 変換 変換後のコード app.js (minified) 変数名は短縮 改行も削除 読みにくい ✗ ソースマップ app.js.map 変換前 ↔ 変換後 の行・列の 対応表 ブラウザ DevTools ソースマップを読み込んで、元のTypeScriptコードを表示 ブレークポイントも元のコードの行番号で設定可能
ソースマップのイメージ
ひよこ ひよこ

ソースマップって何のためにあるの？

ペンギン先生 ペンギン先生

TypeScriptやミニファイしたJavaScriptをデバッグするとき、変換後のコードだと読みにくいよね。ソースマップがあれば、ブラウザのDevToolsで元のコードを見ながらデバッグできるんだよ

ひよこ ひよこ

どうやって対応関係を記録してるの？

ペンギン先生 ペンギン先生

.mapファイルの中にBase64 VLQエンコードされた対応表が入ってるんだ。変換後のコードの何行目何列目が、元のコードの何行目何列目に対応するかを記録してるよ

ひよこ ひよこ

本番環境でも使って大丈夫なの？

ペンギン先生 ペンギン先生

ソースマップを公開すると元のコードが見えてしまうから、本番では非公開にするのが一般的だね。Sentryのようなエラー監視ツールにだけアップロードして、エラー発生時に元のコードの行番号を特定する使い方が多いよ

ひよこ ひよこ

ソースマップが壊れたらどうなるの？

ペンギン先生 ペンギン先生

DevToolsで表示される行番号がズレたり、ブレークポイントが効かなくなったりする。ビルドツールのバージョンアップで壊れることもあるから、CIでソースマップの有効性をチェックするのも大事だよ

ペンギン
まとめ：ざっくりこれだけ覚えればOK！
「ソースマップ」って出てきたら「変換後のコードを元のコードに紐づける地図」と思えればだいたいOK！
📖 おまけ：英語の意味
「Source Map」 ＝ ソースの地図
💬 変換後のコードから元のソースコードへの地図（マップ）という意味だよ
🔗 あわせて読みたい
← 用語集にもどる