【そーすまっぷ】
ソースマップ とは？
最終更新:
💡 変換後のコードから元のコードへ、デバッグの道しるべ
変換後のコードの位置と、元のソースコードの位置の対応を記録するデータ。トランスパイルやミニファイをしたコードのデバッグで、元のコードの場所を参照するために使う。
📌 このページのポイント
ひよこ ソースマップって何のためにあるの？
ペンギン先生 TypeScriptをJavaScriptに変換したり、コードを小さくまとめたりすると、元の場所が分かりにくくなるよね。ソースマップは位置の対応表で、DevToolsが元のコードを示す手がかりになるんだ。
ひよこ 元のコードをブラウザが実行し直すの？
ペンギン先生 実行するのは変換後のコードのままだよ。対応表を使ってエラーの場所を元のファイルに結び付け、ブレークポイントなどの調査を助けるんだ。すべての変換で正確な対応が得られるとは限らないね。
ひよこ 対応表はどこにあるの？
ペンギン先生 ひよこ 本番環境で公開してもいいの？
ペンギン先生 公開したソースマップに元のコードが含まれていたり、その取得先が分かったりする場合があるよ。デバッグに必要な範囲と公開する情報を確認しよう。外部に出したくない情報を含むなら、取得先も含めて公開しない構成にする必要があるね。
ひよこ 元のコードが表示されないときは？
ペンギン先生 変換ツールが対応表を生成しているか、DevToolsの設定が有効か、ファイルを取得できるかを確認するよ。実行中のコードと対応表の版が違うと位置もずれるから、同じビルドのものかを確かめるのが大事だね。
まとめ：ざっくりこれだけ覚えればOK！
「ソースマップ」って出てきたら「変換後のコードを元のコードに紐づける地図」と思えればだいたいOK！
📖 おまけ：英語の意味
「Source Map」 ＝ ソースの地図
💬 変換後のコードから元のソースコードへの地図（マップ）という意味だよ