今回は、SourceMapについて調べたことを概要程度にまとめてみたいと思います。
事の発端
文字コード関連のJavaScriptライブラリ「encoding.js」を読み込んで動作確認をしていたときに、サーバーのアクセスログに謎のリクエストが発生していることに気づきました。以下がその関係ある部分のアクセスログの抜粋です。
2つあるログの内、上のログは「encoding.min.js」というファイルへのアクセスで、このファイルはJavaScriptライブラリそのものです。これは、htmlファイルにscriptタグを書いて読み込みを指示しているので想定通りです。
しかし、下のログは「encoding.min.js.map」というファイルにアクセスしていますが、そのようなファイルは置いていないので、404エラーとなっています。また、そもそもhtmlファイルに上記ファイルの読み込みを指示していないのに、なぜこのリクエストがされているのか分かりませんでした。
SourceMapとは？
「SourceMap」と呼ばれる仕組みがあります。
最近のJavaScriptのプログラムは、リリースする際にはコンパイルや難読化、minify化などを実施してファイルを変換することが多いと思います。
JavaScriptにエラーなどが発生した場合は、その変換後のJavaScriptファイルを元にデバッグすることになりますが、コンパイルや難読化したソースはデバッグには適していません。
そんな時に使えるのが、「SourceMap」と呼ばれるファイルです。これは、コンパイル前とコンパイル後のファイルの対応関係を示したファイルのことで、この情報をブラウザのデバッガーに渡してあげることで、デバッガーが対応するファイルを自動的に表示してくれるようになります。
事の発端で紹介した謎のファイル「encoding.min.js.map」は、SourceMapであり、ブラウザがSourceMapファイルを取得するためのリクエストであったということみたいです。
実際にSourceMapありとなしで確認してみる
それでは、実際にSourceMapありとなしで挙動がどう変わるか見てみたいと思います。今回は、minify化したファイル（encoding.min.js）とそうでないファイル（encoding.js）がそれぞれ存在する前提で、確認していきたいと思います。
まずは、SourceMapなしでライブラリのソース部分（ある関数）をデバッグで見てみます。
詳細は割愛しますが、「convert」関数の処理の中でデバッグ停止しているのが上記キャプチャになります。少し処理を見てみると分かりますが、変数名が一文字（o, eなど）になっていて分かりづらいと思います。このようにminify化したファイル（encoding.min.js）ではデバッグするのはとても大変です。
次に、上記ライブラリのSourceMapを置いてから再度確認してみましょう。いかがでしょうか。minify化する前のファイルがデバッグで表示されています。このようにSourceMapによって便利にデバッグの作業を行うことができるようになります。
その他
SouceMapファイルへのリクエストは、サーバーのアクセスログに記載されているので実際にリクエストされているはずなのですが、Google Chromeの開発者ツールのNetworkタブには表示されていませんでした。
これは仕様なのかもしれませんが、個人的には表示して欲しいなと思いました。リクエストしてることは確かなので。。。
また、SourceMapのパスはコンパイル後のファイル（encoding.min.js）に記載されているようです。この情報をブラウザがチェックして、SourceMapファイルを探しているようですね。
また、このSourceMapを仮に自分で生成したいとなった場合は、どうすれば良いかというと何かしらのツールを使う必要があるようです。今回はその手順等は割愛させていただきます。
おわりに
いかがでしょうか。今回は、SourceMapの概要について簡単に調べてみました。何も知らなかったので、このような仕組みがあることを知れて良かったなと思います。
今回は、この辺で失礼いたします。最後までお読みいただきありがとうございました。
