ソースマップとは

はじめに

業務でソースマップの設定をすることがあり、何ですかそれ状態だったので調べました。

ソースマップって何？

コンパイル前のコードとコンパイル後のコードの対応関係を表したファイル。

フロントエンド開発においては、Vue.jsなどのフレームワーク特有のファイルがJSにコンパイルされたり、コードがminify（圧縮）されたりしていて、ビルドされたコードは開発時に記述したコードとは似ても似つかないものになります。
そのため、コンパイル後のコードを見ても、どこでエラーが起きているかといったことが特定しづらくなっているのです。

ソースマップを使うことで、コンパイル前の、開発時に記述したコードがコンソールなどに表示されるようになり、コードを追いやすくなります。
開発用のツールの一種ということですね。

試してみる

create-vueで作成できる基本的なVueプロジェクトでソースマップの働きを確認しみてみます。
ビルドツールはViteです！

↓こんなサイトです。

デフォルトの設定

まずは普通にビルドしてみます。

以下のファイルが生成されました。

• index.html
• assets/index-CUkVw1a.js
• assets/index-TXLObeWa.css

これをvite preview（ローカルでビルドをプレビューできるViteの機能）してみます。

ビルドされたファイルがそのままデバッグツールのソースタブに表示されました。

minifyされていてとても読みづらい（読めない）ことがわかると思います。

ソースマップを生成してみる

vite.config.tsに以下の内容を追記して、ビルド時にソースマップが生成されるようにします。

vite.config.ts

...
export default defineConfig({
    ...
    // 追記
    build:{
        sourcemap: true
    }
})

ビルドしたら、前回のビルド成果物に加えて、assets/index-CUkVw1a.js.mapが生成されています。

previewしてみましょう。

srcディレクトリ（とnode_modulesディレクトリ）が追加され、コンパイル前のコードがみれるようになっていました！

「ソースマップを読み込みました」というメッセージも表示されます。

mapファイルの中身はjson形式になっています。file, sources, sourcesContent, namesといったプロパティがあり、これらのデータをもとに元のソースコードを復元しているようです。

またコンパイルされたJSファイルの末尾に

//# sourceMappingURL=index-CUkVfw1a.js.map

という行が挿入されていて、この行を編集するとコンパイル前のソースコードが見られなくなったので、このコメントでJSファイルとソースマップファイルの対応づけをしているのだと思います。

おわりに

ソースマップを有効にしているとデプロイ先でもコンパイル前のソースコードが見られるようになってしまうので、あまり設定する機会はないかもしれません。（自分はSentryでソースコードを表示させるために使いました）
必要な場合のみ適切に使っていきましょう！