gulp-sourcemapsを使って拡張言語でChromeのデベロッパーツールを活用してみる

/

導入

Webデザインなどフロントエンドの開発を行う際に個人的に必ず使うツールとしてSassなどの拡張言語とChromeのデベロッパーツールがあります。
両者とも非常に便利で重宝するのがですが、コンパイルが必要な拡張言語とデベロッパーツールはそのまま使うと上手く機能が噛み合わない部分があり、知りたい情報が正しく表示されないのでSourcemapsを使ってこのギャップを埋めてやることで2つのツールがスムーズに利用出来るようになります。

具体的にはSourcemapsを使ってコンパイル前のファイルとコンパイル後のファイルを関連付け、デベロッパーツールにコンパイル前の情報を表示出来るようにします。
その作業をコンパイル毎に一々実行するとなると非常に面倒ですが、gulpを使えば一連の処理の流れでコンパイルとSourcemapsを同時に利用することが出来るためgulpを利用してのSourcemapsを実行していきます。

実行環境

ubuntu16.04LTS
Chromium Ver.53
gulp 3.9.1

gulp

タスクランナー。フロントエンド開発に使うライブラリのスクリプト処理を自動化できるツール。
gulpを使ったフロントエンド開発 導入編

gulp-sourcemaps

gulpでSourcemapsを実行出来るライブラリ。
gulp-sourcemaps/Github

インストール

$ npm install --save-dev gulp-soucemaps

Chrome Developer Tool

デベロッパーツールはChromeでWebページのデバッグなどを行うための機能でHTMLのセレクタ毎に適用されているCSSやJavaScriptのコンソール出力などを確認することが出来ます。

デベロッパーツールの起動方法はChromeの右上のアイコンをクリックして開いたメニューから「その他のツール」> 「デベロッパーツール」を選択するか、キーボードからF12もしくはCtrl-Shift-I(セレクタの検索)を入力します。
デベロッパーツール/Gadgets API

デベロッパーツールの設定

ChromeでSourcemapsを使うためにはデベロッパーツールの設定が必要です。
設定は行うにはデベロッパーツールを開きウィンドウの右上にある設定のアイコンをクリックしてメニューを開き、そこから Settings > Preferences > Sources と進み「Enable JavaScript source maps」と「Enable CSS source maps」をそれぞれチェックします。

Sourcemaps

SourcemapsはデベロッパーツールでStyleSheetとJavaScriptの拡張言語のデバッグを実行出来るようにしてくれるのでそれぞれの動作を検証していきます。

StyleSheet

今回のスタイルシートでのSoucemapsの動作の検証にはSassを利用します。

初心者向けSass入門/koltatt

Sourcemapsを使わない場合

動作の比較のためにまずはSourcemapsを使わない場合のデベロッパーツールの挙動を確認してみます。

Sassなどの拡張言語を使う場合にHTMLは拡張言語のファイルを直接読み込む事は出来ないため、ファイルにコンパイルを実行し変換されたCSSファイルを読み込みます。そのためSourcemapsを使わずにデベロッパーツールでHTMLセレクタに適応されているスタイルシートを確認した場合にはCSSファイルの該当箇所の情報が表示されます。

body {
  width: 1200px;
  margin: 50px 200px;
  background: #fff; }
  body p {
    font-size: 12px; }
  body h1 {
    font-size: 20px;
    line-height: 1.4; }

20161017_01

Sourcemapsを利用した場合

実際にHTMLが読みこんでいるのはCSSファイルなのでデベロッパーツール上でもCSSファイルの情報が表示されるのは当然なのですが、Sassを使う場合にはコードの書き手はSassのファイルの方にコードを書き込んでいるので、このままではデベロッパーツールによって表示されるデータの一部が参考にならないものになってしまいます。

var gulp        = require('gulp');
var sass        = require('gulp-sass');
var sourcemaps  = require('gulp-sourcemaps');

gulp.task('sass', function() {
  gulp.src('src/*.scss')
  .pipe(sourcemaps.init())
    .pipe(sass())
  .pipe(sourcemaps.write())
  .pipe(gulp.dest('dist/'));
});

そこで上記のgulpスクリプトのようにSassのコンパイルの際にSourcemapsを実行する事でCSSファイルにコンパイルの元となったSassのファイルの情報を書き込み、コンパイル前後のファイルを関連付けデベロッパーツール上でSassの情報が表示されるようにします。

body {
  width: 1200px;
  margin: 50px 200px;
  background: #fff;
  p {
    font-size: 12px;
  }
  h1 {
    font-size: 20px;
    line-height: 1.4;
  }
}

20161017_02

こうした処理を行うことデベロッパーツールに表示される内容が実際に記述しているコードのものと一致するためデバッグを素早く行うことが出来るようになります。

JavaScript

SourcemapsはJavaScriptでも利用することが出来るためTypeScriptを使って動作を検証していきます。またSourcemapsはコンパイルが必要なシンタックスシュガーだけでなくMinifyに対しても威力を発揮するのでそちらも同時に検証していきます。

TypeScript

Microsoftの開発したJavascriptの拡張言語。
名前の表す通りJavascriptで静的な型付けが利用出来るようになるため大規模プロジェクトなどで利用されています。

TypeScript.org

$ npm install --save-dev gulp-typescript typescript gulp-ugligy


gullp-typescript/Github

gulp-uglify

gulp-uglifyはJavaScriptにMinifyと呼ばれるファイルサイズを縮小するための処理を実行してくれるライブラリです。

gulp-uglify/Github

var gulp        = require('gulp');
var sourcemaps  = require('gulp-sourcemaps');
var uglify      = require('gulp-uglify');
var ts          = require('gulp-typescript');

gulp.task('ts', function() {
  gulp.src('src/main.ts')
  .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(ts())
    .pipe(uglify())
  .pipe(sourcemaps.write('./maps'))
  .pipe(gulp.dest('dist/'));
});

function add(i: number,j: number,) {
    return i + j;
}

var num1 = 10;
var num2 = 20;

console.log(add(num1,num2));

Minify

一般的に良いとされるWebページを作成する際に考えなければならない要素の一つとしてWebページの表示速度がありますが、表示速度を改善する方法としてスタイルシートやスクリプトなどの外部ファイルのサイズを小さくする事で読み込み速度を速くするというものがあります。

単純にWebページの表示速度だけを考えば改行やインデントなどの要素はコンピューターにとって不要な情報なため、それらを使わずに一行で全てのコードを書いてしまえばファイルを軽量化させる事が出来ます。しかし実際にソースコードをそのようにして書いた場合には人間にとって非常に扱いづらいものとなるため生産効率や可読性が著しく下がってしまいます。
そのためコードを書く際には改行などを使用して人間にとって扱いやすくしたファイルを使い、そのファイルに後から改行などを取り除く処理を実行しサイズを小さくしたものをHTMLファイルに読み込ませるという手順を取ります。
このサイズを小さくする処理をMinifyと呼びます。

この方法をであればソースコードの可読性とページの読み込み速度を両立させる事が可能になりますが、デベロッパーツールでJavaScriptのエラーメッセージなどを確認する際に全てのエラーがソースファイルの一行目で発生する事になるためデバッグ時に不都合が生じてしまいます。

20161017_02

MinifyしたファイルへSourcempasを実行する

gulp-sourcemapsはTypeScriptだけだなくgulp-uglifyにも対応しているためMinifyを実行した後のファイルでもgulpのタスクが実行される前のソースコードの情報を表示させる事が出来ます。

20161017_04

Sourcemapsを適応したファイルをデベロッパーツールで確認するとconsole.log()の書かれている場所がmain.tsに書かれている内容で表示されているのが解ります。

スタイルシートと比較してJavaScriptの場合は思い通りの動作を行ってくれないという事態が発生しやすく、また変数や文字列などそのプログラム特有の名前が多く使わるためエラーの原因を特定するための手間は大きくなります。
エラーの原因を突き止めるために論理的にコードをさかのぼらなければならない事に加えて、Sourcemapsを使わずにMinifyを利用した場合には折に触れて発生するエラーが全てファイルの1行目で発生する事になります。何百を超えるコードの場合にはそんな状態でのデベロッパーツールを使ってのデバッグ作業は現実的ではないためJavaScriptで拡張言語やMinifyを使った開発を行う場合にはSourcemapsほぼ必須だと言っても良いと思います。

Mapファイルの出力

gulp-sourcemapsでは特に指定をしなければ出力後のファイルにSourcemapsの情報が書き込まれますがgulpのタスクでパスを指定すれば/maps/style.css.mapのようにMapの情報を独立したファイルに分割して出力する事も出来ます。

gulp.task('sass', function() {
  gulp.src('src/*.scss')
  .pipe(sourcemaps.init())
    .pipe(sass())
  //Mapファイルの出力の指定
  .pipe(sourcemaps.write('./maps'))
  .pipe(gulp.dest('dist/'));
});

まとめ

現在のフロントエンド開発ではSassなどの拡張言語やChromeのデベロッパーツールなどのブラウザの開発支援ツールは両方とも必須だという場合も多いと思いますが、この2つをそのまま同時に使うと機能が衝突して折角の効果が発揮されないのでSourcemapsも組み合わせて使うことで真価を発揮出来るようにしてやります。

Sourcemaps一見地味な機能ですが拡張言語とデベロッパーツールの使用頻度考えると利用価値の高い技術です。特にJavaScriptの拡張言語を使うケースの場合にはプロジェクトの規模がある程度以上だと考えられるので、その分デバッグ作業の量も多くデベロッパーツールとSourcemaps無しで開発を行うなど考えら得ないという人もいるのではないかと思います。

フロントエンド開発では当分の間拡張言語が活躍しそうですが、その事を考えるとSourcemapsが必要な環境もまだまだ続きそうなので個人的にgulpを使っている人にとって導入する優先順位の高いライブラリの一つだと思います。