WEB

エンジニアがいい感じにフロントエンド開発を爆速化できる環境構築の手順

エンジニアがいい感じにフロントエンド開発を爆速化できる環境構築の手順

今年もHTML5 Minutesに登壇してきました。こんにちは、先生です。

当日は「フロントエンド開発スピードをあげるための環境を作ってみた話」をしてきました。

今回はその環境を使ってみるまでの手順を書いていきたいと思います。

必要なものをインストール

  • NodeJS
  • Gulp
  • WebPack
  • Bower
  • PhantomJS

NodeJSとGulpのインストールは過去の記事「Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ」をご覧ください。

WebPackのインストール

WebPackはさまざまな形式のモジュールを静的なファイルにまとめて出力してくれるツールで、拡張性が高く最近好んで使っています。

インストールはnpmを使って簡単にできます。

npm install webpack -g

※ macはsudoをつけて実行します。

Bowerのインストール

フロントエンドで使用するライブラリには、一番充実しているBowerを利用しています。またnpmは開発に必要なパッケージ管理に特化させたかったので、分けるという狙いもあります。

こちらもnpmで簡単にインストールできます。

npm install bower -g

※ macはsudoをつけて実行します。

PhantomJSのインストール

Karma/Jasmineでユニットテストを実行させるのに使用しています。毎回ブラウザが立ち上がるのではなく、裏側でテストをこっそりやってくれる幽霊のような存在です。ヘッドレスブラウザと呼ばれます。

npmが便利ですね。

npm install phantomjs -g

※ macはsudoをつけて実行します。

環境の構築

必要な環境が整ったところでテンプレートを導入します。
下記URLのリポジトリから、ファイルをクローンするかダウンロードしてきます。

それらのファイルを適当なディレクトリに展開してください。

環境の初期化

ターミナル/コマンドラインを起動して、cdで作成したディレクトリへ移動します。
そして以下のコマンドを実行します。少し時間がかかるので、お菓子でも食べながら待ちましょう。

npm i && bower i
gulp build

開発開始

すべての処理が終わったら開発環境構築は完了です。app/pcディレクトで開発を開始します。

gulp

 

spディレクトリを開発対象とする場合は、

gulp -d=sp

-dオプションにディレクトリ名を指定すると、ディレクトリ名を開発ディレクトリとしてファイルの監視が行われます。

EJSで共通マークアップ部分を使い回し

<%include common/header %>

保存すると1つのHTMLにして出力されるとともに、HTMLのバリデーションチェックが実行されます。

 

例えばdivタグの閉じ忘れなどがあった場合には以下のように表示されます。

[10:38:41] [L33:C1] Tag must be paired, Missing: [ </div> ] (tag-pair)

33行目が閉じられていなかったようです。

スプライト画像をつくろう

source/app/pc/sprite/ディレクトリに、作りたいスプライトのディレクトリを作ります。今回はiconsというスプライトを作ってみるとします。

souce/app/pc/sprite/icons

 

iconsディレクトリにバラバラのアイコンを入れます。

souce/app/pc/sprite/icons/setting.png
souce/app/pc/sprite/icons/logo.png
souce/app/pc/sprite/icons/twitter.png
souce/app/pc/sprite/icons/facebook.png

 

そしてコマンドを実行します。

gulp sprite

するとscss/spriteに_icon.scssとimages/にicon.pngが出来上がります。

 

スプライトを使う場合は_icon.scssを@importで読み込み、

<a class="icons setting"></a>

などと「ディレクトリ名 ファイル名」とclassに書くだけで表示させることができます。

SASSを使ってCSSを作る

SASSの使い方や応用については過去の記事があるので参考にしてみてください。

この環境ではgulpタスク実行中にSCSSファイルを変更すれば、CSSが自動で書き出されるようになっています。
また、Autoprefixerが入っているので、ベンダープレフィックス(-webkit-)の記述は不要です。こちらも自動的に付与されるようになっています。

JavaScriptを結合しよう

この環境ではJavaScriptをモジュールごとに細分化し、requireを使って1つに結合することができます。

例えばHogeというクラスがあるHoge.jsを作ってあるものとします。

modules/Hoge.js

function Hoge(){};
Hoge.prototype = {
    init: function() {
    }
}
module.exports = Hoge;

module.exportsに値を渡すことで、外部でrequireされたときにその値を渡すことができるようになります。

 

続いてHogeを利用したいJSを作ります。

var Hoge = require('./modules/Hoge');
// ↑外部のJSを読み込み

var hoge = new Hoge();

require(パス)とすることで、module.exportsした値を取ることができます。

このrequireは同じスクリプトの場合、何度書いても1つにまとめられるため、同じHogeを別のJSでrequireしても最終的には1つしか書き出されないようになっています。

ムダも省けるし、このJSでどのモジュールを使っているかすぐわかるようになりますね。

ユニットテスト

testディレクトリに**Spec.jsを作ると、Karma/Jasmineでユニットテストが実行できます。ユニットテストについてはまた別の記事で紹介できればと思います。

書き出し先やオプションの設定

config.jsに書き出し先のパスやオプションの設定が書かれています。パスを書く際には%type%という記述をすると、-dオプションで入力されたディレクトリに置き換わるようになっています。

現在の環境にあわせて出力先を変えたいときに使ってください。

最後にリリース作業

ひと通り開発が終わったらリリースです。
以下のコマンドを実行します。

gulp build -min
gulp build -d=sp -min

-minオプションをつけると、JSとCSSを圧縮してファイルを書き出します。

app/public/以下に、圧縮されたJSやらCSSやら画像やらを含んだファイルが生成されます。これでパフォーマンスも簡単に向上させられます。

FTPでアップロードや納品データを作る際はこのpublic以下のファイルを使えば即終了です。CIを使っている場合も、public以下のものを公開ディレクトリに移すか、publicディレクトリをそのまま公開ディレクトリにしてしまえば終わりですね。

まとめ

これだけでもかなりの作業が短縮されます。altJSは好みのものを使った方が良いと思うので、特に入れていません。

最近なにかと変化の激しいフロントエンド界隈ですので効率化をどんどん進めていきたいと思います。

ぜひカスタマイズして自分なりのテンプレートを作ってみてください。

 

【LIGのフロントエンドエンジニア先生】

フロントエンド開発を裏から支えるデバッグアプリケーション4選

Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ

業務で安心して使える厳選AngularJSモジュール8選+α

ECMAScript6で書こう!WebPackとES6-loaderで環境を作り、ES6を先取り体験する方法

AngularJSで作成したシングルページアプリケーションをGoogleアナリティクスでトラッキングさせる方法

この記事を書いた人

先生
先生 最高技術責任者 2014年入社
CTOの林です。フロントエンドを専門とし、AngularJSのコミュニティをはじめ、様々な勉強会に顔を出しています。効率化マニアでGrunt,Gulpをはじめ、プロジェクト進行やサーバーサイド、インフラ周りの効率化を目指し日々活動しています。