サーバサイドエンジニアのためのフロントエンド入門 〜環境編〜

フロントエンドの移り変わりが激しすぎてついていけない。 というサーバサイドエンジニア向けのフロントエンドの概要です。 より深い話題については他を当たってください。。

node とは

近年のフロントエンド開発は node が無くては始まりません。 説明の必要もないとは思いますが、Chrome の JavaScript エンジン V8 をブラウザではなくサーバーサイドで動作するようにした 「サーバーサイド JavaScript 環境」です。

ノンブロッキングI/Oとイベントループの採用により C10K 問題に対応したことでサーバーサイド JavaScript 環境として話題となりました。 最近では サーバサイド JavaScript というより、ツールやアプリケーションの汎用実行基盤として広く利用されるようになっています。

CommonJS とは

JavaScript エンジンをサーバサイドやツールの実行エンジンとして使うには、標準入出力やモジュールなど、そもそも色々なものが不足していました。 もともとブラウザの中で動いていたので当然ですね。

そこで、これら不足する機能を標準API仕様として策定しようというプロジェクト(または仕様)が「CommonJS」になります。

例えばブラウザから外部のjsファイルを読み込むには HTML に script タグで定義しますが、ブラウザが無い環境でモジュールを読み込むには別の仕組みが必要になります。

node では、require() という APIを通してモジュールの読み込みを行います。 こんな感じですね。

var circle = require('./circle.js');

ブラウザでも同じ様に require() を使えるようにしたのが Browserify だったり webpack だったりします(ビルドプロセスの中で依存解決するなど実現方法に違いはありますが)。

require によるモジュールの読み込みは CommonJS 仕様で定義されてはいるものの、その他の仕様が決まりきっていなかったり、CommonJS コミュニティが活発ではなくなっていたり、node 側も CommonJS 仕様の準拠を意識しなくなったりと、CommonJS 側が発言権を持って統制していく流れには残念ながらなっていません。。

汎用実行環境として、標準API仕様を策定する流れがある ということだけ押さえておけば問題ないと思います。

node を nodebrew でインストールする

なには無くとも、node をインストールしないと始まりません。

Windows の場合は公式サイトからインストーラ落として入れれば良いと思います。

OSX の場合は、brew で入れれても良いです。

$ brew install node

が、node のバージョン依存で困ることが多いので、nodebrew を使う方が安心です。 nodebrew は node のバージョン切り替えツールで、brew からインストールできます。

$ brew update
$ brew install nodebrew

インストールしたら、.bash_profile に以下を追加後、$ source ~/.bash_profile として設定を反映します。

export PATH=$HOME/.nodebrew/current/bin:$PATH

nodebrew が入ったら、nodebrew から node をインストールできます。

$ nodebrew install-binary stable

インストールするバージョンは以下のように指定することができます。

$ nodebrew install-binary latest # latest version
$ nodebrew install-binary stable # stable version
$ nodebrew install-binary v0.10.x # v0.10 latest

nodebrew use <version> にて使用するバージョンを指定します。インストールされているバージョンを見るには nodebrew list を使います。 stable を利用するように設定しましょう。

$ nodebrew use stable

node が入ったかバージョンを確認しておきましょう。

$ node -v

念のため、nodebrew で管理を開始するにはインストール済みの node は消しておく必要があるので注意してください。

npm とは

node をインストールすれば、同時に npm も入ります。 Java で言う maven とか gradle、Python で言う pip のようなパッケージ管理ツールです。

npmには大量のパッケージが登録されています。maven のセントラルリポジトリのようなものですね。

npm では package.json というファイルでパッケージの管理を定義します。 pom.xml とか build.gradle と同じようなものですが、json 形式で設定を記載します。

package.json は npm init コマンドで簡単に作成できます。(後で glup を使うので) 以下のようなフォルダを作成して実行してみましょう。

$ mkdir example-gulp
$ cd example-gulp
$ npm init

色々と聞かれますが全てデフォルトのままリターンで大丈夫です。 カレントディレクトリに package.json が出来ます。

{
  "name": "example-gulp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

package.json の中には、"scripts" という項目があります。この中の test という項目があり、メッセージを出力して終了するスクリプトとなっています。 npm run test とすることでこのスクリプトを実行できます。npm-scripts を使い、 UglifyJS でファイルの圧縮・最適化を行うといったビルド処理を書くといったことができます。

npm-scripts とは別に、タスクランナーの Grunt や gulp といったツールを使い、ビルド処理の自動化を行うこともできます。 Java で例えると、npm-scripts が ant、Grunt が Maven、gulp が Gradle といったイメージでしょうか。

ここでは gulp を使うこととして以下に説明していきます。

gulp とは

近年のフロントエンド開発は、Saas のコンパイルしたり、Babel を トランスパイルしたり、画像圧縮したりと、たくさんやることがあるのでビルドの自動化が必須な状況です。

gulp はストリーミング・ビルド・システム と言われ、ストリームとしてビルドなどの各処理を定義できます。 タスクの中でいろいろなプラグインをストリームとして組み合わせて処理をつなげることでビルド操作を行います。

同じようなツールである Grunt との大きな違いは、gulp は並列で処理を行えビルド時間が短縮できる点と、タスク定義が Javascript でシンプルに書ける点があります(Grunt は json 形式でタスクを定義するため、定義ファイルが肥大化する傾向がある)。 maven と gradle の関係に似てますね。

gulp の定義ファイル gulpfile.js は以下のようなものになります。

var gulp = require('gulp'); 
var jshint = require('gulp-jshint');

gulp.task('jshint', function() {
  gulp.src('./src/scripts/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

npm で gulp をインストールする

npm を使ってインストールします(OSXの場合は sudo を付けます)。

$ sudo npm install gulp --save-dev

--save-dev を指定すると、npm の package.json に依存性が追記されます。

-g フラグを付けると、グローバルにインストールされます。 今回は指定していないため、カレントに node_modules というフォルダが作られ、その中に gulp がインストールされます。

こんな感じになります。

.
├── dist
├── node_modules
│   └── gulp

package.json には、以下のように gulp の依存が追記されます。

{
  // ・・・
  "devDependencies": {
    "gulp": "^3.9.1"
  }
}

--save-dev を指定することで、devDependencies として依存するモジュールが package.json に追加されます。 package.json があれば別の環境で npm install とすることで依存するライブラリが一括でインストールできるようになります。

--save とすると package.json の dependencies という項目に追記されます。 devDependencies が開発環境としての依存モジュールであるのに対して、dependencies は パッケージやプロジェクトの実行のために必要な依存モジュールを定義するのがお作法となります。

--save-dev は -D、--save は -S と短縮できます。

gulp タスクを作成して実行する

gulp タスクは gulpfile.js というファイルに定義していきます。

コンソールにログ出力するだけのタスクを定義してみましょう。

var gulp = require('gulp');

gulp.task('default', function() {
  console.log('Hello.');
});

実行は以下のように行います。

$ ./node_modules/.bin/gulp

[00:00:00] Using gulpfile ~/XXXXX/example-gulp/gulpfile.js
[00:00:00] Starting 'default'...
Hello.
[00:00:00] Finished 'default' after 159 μs

gulp をグローバルインストールしていた場合には

$ gulp

だけで大丈夫です。

package.json に npm-scripts として 以下のように gulp の定義をしておけば、$ npm run gulp で実行することもできます。

{
  // ・・・
  "scripts": {
    "gulp": "gulp",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

まとめ

今回は gulp の導入までとなります。

次回から gulp を使った各種ビルド処理について見ていきます。

blog1.mammb.com

フロントエンドエンジニアのための現在とこれからの必須知識

Getting Started with Gulp (English Edition)