SourceMap(ソースマップ)

Webサイトを見たり開発している中で、という拡張子のファイルを目にした事がありますでしょうか? これはSourceMap(ソースマップ)と呼ばれるファイルとなります。 当ページでは、SourceMapの概要説明に加え、実際にSourceMapを作成&使用する手順について具体的に紹介しています。
 

ソースマップの概要

ソースマップSource Map)は、Web開発において圧縮されたコードと元のコードの対応表の役割をするファイルのことです。
開発したソースコードをそのままWebサイトで読み込むとデータ量が多くて読み込み速度が遅くなる場合があるため、JavaScriptなどのソースコードは圧縮バージョンのものを読み込むことが一般的です。 しかし、圧縮したソースコードを利用した場合、変数名が1文字に変換されたり改行が除去されたりして、開発者がデバッグしにくいという欠点があります。
ソースコード圧縮前後のデメリット
 
ソースマップは、ブラウザに表示される圧縮したコードと元のコードとを関連付けることで、デバッグを容易にする役割があります。 エラーが発生した際などに変換後の難解なコードではなく、読みやすい元のコード上で問題を特定することができるようになります。
ソースマップを作成するメリット

ソースマップの作り方と利用方法

以降では実際にデモサイトを立ち上げ、ソースマップを作成する手順および使用する手順を紹介します。

ソースマップのデモサイトの作成手順

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のソースコードが見れるようになります。
エラーメッセージなどが圧縮ファイル内の行ではなく、元のソースコードの行番号を指し示すため、問題箇所を特定しやすくデバッグが容易となります。

参考