SourceMap（ソースマップ）
Webサイトを見たり開発している中で、という拡張子のファイルを目にした事がありますでしょうか？
これはSourceMap（ソースマップ）と呼ばれるファイルとなります。
当ページでは、SourceMapの概要説明に加え、実際にSourceMapを作成&使用する手順について具体的に紹介しています。
ソースマップの概要ソースマップの作り方と利用方法ソースマップのデモサイトの作成手順開発環境構築プロジェクトの作成JavaScriptを圧縮したファイルの作成実行ブラウザの開発ツールでソースマップを読み込んでみる参考
ソースマップの概要
ソースマップ（Source Map）は、Web開発において圧縮されたコードと元のコードの対応表の役割をするファイルのことです。
開発したソースコードをそのままWebサイトで読み込むとデータ量が多くて読み込み速度が遅くなる場合があるため、JavaScriptなどのソースコードは圧縮バージョンのものを読み込むことが一般的です。
しかし、圧縮したソースコードを利用した場合、変数名が１文字に変換されたり改行が除去されたりして、開発者がデバッグしにくいという欠点があります。
ソースマップは、ブラウザに表示される圧縮したコードと元のコードとを関連付けることで、デバッグを容易にする役割があります。
エラーが発生した際などに変換後の難解なコードではなく、読みやすい元のコード上で問題を特定することができるようになります。
ソースマップの作り方と利用方法
以降では実際にデモサイトを立ち上げ、ソースマップを作成する手順および使用する手順を紹介します。
ソースマップのデモサイトの作成手順
Node.jsでソースマップのデモサイトを作成する手順を説明していきます。
開発環境構築
Node.jsでWebサイトを構築するのが初めての方は、nodeコマンドとnpmコマンドを扱えるようにします。
Node.jsの公式サイトへアクセスし、サイト内の上メニュー「Download」を開くと各環境ごとのインストール手順が確認できるので従えば良いです。
プロジェクトの作成
ターミナルを開いて以下のコマンドを入力します。
新しいディレクトリ「source-map-demo」を作成し、プロジェクトを初期化します。
以下のコマンドで必要なパッケージをインストールします。
パッケージは簡単にWebサーバを構築するために、パッケージはJavaScriptを圧縮してソースマップを生成するために使用します。
JavaScriptを圧縮したファイルの作成
通常のjavaScriptファイル「original.js」から、圧縮バージョンの「minified.js」およびソースマップを生成する手順を示します。
まず、srcフォルダを新規作成し、その配下にoriginal.jsというファイルを作成します。
以下のソースコードをコピペしてください。
original.js
次にUglifyJSを使ってJavaScriptを圧縮し、ソースマップを生成します。
ルートディレクトリに distフォルダを作成後、以下のコマンドを実行してください。
変数名も一文字に圧縮するために、 オプションを使用します。
上記のコマンドを実行した結果、minified.js（圧縮されたJavaScriptファイル）と minified.js.map（ソースマップ）が生成されます。
minified.js（original.jsの変数名が1文字に短縮され、改行も削除されている）:
minified.js.map:
実行
簡単なWebサーバーを構築して、圧縮されたJavaScript「minified.js」をブラウザで確認できるようにします。
というファイルを作成し、以下のコードをコピペしてください。
server.js
ターミナルで以下のコマンドを実行してサーバーを起動します。
ブラウザで にアクセスすることでデモサイトを閲覧できます。
ブラウザの開発ツールでソースマップを読み込んでみる
ソースマップを読み込むにはChromeやFirefoxなどのブラウザにあるツールを利用します。
ここではChromeを例にし使い方を説明していきます。
Chromeからデモサイトにアクセスして画面を右クリックし、「Inspect（検証）」を選択してデベロッパーツールを開きます。
「Sources」タブよりminified.jsを開き、右クリックして表示されるメニュー「Add source map」を選択します。
ソースマップのURL（このデモ環境では「http://localhost:3000/minified.js.map」）を指定します。
以下のスクショのように、original.jsのソースコードが見れるようになります。
エラーメッセージなどが圧縮ファイル内の行ではなく、元のソースコードの行番号を指し示すため、問題箇所を特定しやすくデバッグが容易となります。