最近は少しずつCTO業務に取りかかれるようになってきました。やっぱり夏は忙しくなりそうです。こんにちは、先生です。
以前「エンジニアがいい感じにフロントエンド開発を爆速化できる環境構築の手順」という記事でフロントエンドの開発環境を作ったものを紹介しましたが、やはり変化の流れが激しく、この環境も少しずつ変化していきました。
今日は新しくなった環境をご紹介します。このまま使ってもいいですし、一部を取り入れてもいいと思います。
おさらい「爆速化できる環境」とは？
フロントエンド開発（コーディング）を早く終えるための環境で、以下のような機能を持ったテンプレートです。
- 外部テンプレート（EJS）
- SASS
- HTMLバリデーション
- ユニットテスト
- スプライト画像&SCSS生成
- スタイルガイド生成
- JS/CSSの圧縮
- ES5で書ける（ES5非対応ブラウザへの自動対応）
- LiveReload（ファイルを更新するとブラウザも更新される）
これによってブラウザでの確認を早くしつつ、JSも効率よくモジュールごとに分けるなどして、見通しも良くなるテンプレートでした。詳しくは「エンジニアがいい感じにフロントエンド開発を爆速化できる環境構築の手順」をご覧ください。現在はこれが少しずつ変化して、下記の機能が追加されました。
- JSバリデーション
- ES6で書ける（ES5非対応ブラウザへの自動対応）
- Mocha & PowerAssert
- LiveReload（ファイルを更新するとブラウザも更新される）
ではさっそく環境を作りながら、新しく追加された機能や変更になった部分をそれぞれ紹介していきます。
環境準備
動作に必要な環境を整えます。
以前の環境が動作している場合はインストールの必要はありません。
- NodeJS
https://nodejs.org/ - Gulp
http://gulpjs.com/
NodeJSとGulpのインストールについては以下の記事をご覧ください。
Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ
先生
前のバージョンではWebpackやPhantomJS、Bowerが必要になっていましたが、現在はNodeとGulpだけで動作するように変更されました。やはり初期の準備は簡単な方が良いですよね。
※ NodeやGulpのバージョンが古い場合に動作しないことがありますので、バージョンアップをお願いします。
執筆時の最新バージョンはこちらです。
- Node – 0.12.7
- Gulp – 3.9.0
Bowerを外した理由
リニューアルに伴ってBowerを依存から外しました。
モダンなライブラリやフレームワークがBowerで提供されていないことがあり、npmとBowerの二重管理となるケースが発生したためです。しかしながら、引き続きBowerを使うこともできるようにはしています。
- Bower
http://bower.io/
テンプレートの設置
必要な環境が整ったところでテンプレートを導入します。下記URLのリポジトリからファイルをクローンするかダウンロードします。
- frontainer/frontplate
https://github.com/frontainer/frontplate
適当なディレクトリに展開してください。
環境の初期化
ターミナル/コマンドラインを起動して、cdで作成したディレクトリへ移動します。今回はDocument/templateに展開しました。
そして以下のコマンドを実行します。
cd Document/template npm run start環境の構築と必要なファイルのダウンロードが始まります。少し時間がかかるので、またお菓子でも食べながら待つことにしましょう。
開発開始
すべての処理が終わったら開発環境構築は完了です。
もし権限を持ってるユーザーで実行してくれと言われた場合はsudoを付けて実行するか、書き込み権限があるかなど確認してみてください。以下のコマンドを実行すると、Webサーバーが起動してブラウザに表示されます。
gulp
開発はsrc/以下で行います。もしsrc/spを作って、そこで開発を行う場合は以下のようなコマンドを実行します。gulp -sp
gulpのあとに-ディレクトリ名とオプションを追加することで、指定したディレクトリを開発ディレクトリにすることができます。※ 以前のバージョンでは-d=ディレクトリ名となっていたのでご注意ください。
新しい部分
今回追加した新しい部分はこちらです。
ES6で書けるJavaScript
以前はWebpackのみでしたが、今回からBabelを導入してES6で書けるようになっています。例えばHogeというクラスを作った場合は以下のようになります。
modules/Hoge.js
class Hoge { constructor() { this.sampleFunc('newされました'); } sampleFunc(val) { alert(val); } }; export default Hoge;
利用したいJSでは以下のように記述します。import Hoge from './modules/Hoge'; // ↑外部のJSを読み込み var hoge = new Hoge();import 名称 from（パス）とすることで、export defaultした値を取ることができます。
ES6の記述に関してはBabelのページを参考にしてみてください。
糖衣構文ではありますがクラスが使えたり、constやlet、アロー関数が使えたりするので、ちょっとした不便が解消されます。
記述もシンプルになり書く量も少し減るので、慣れるとES4や5で書く方が辛くなってくるでしょう。
JSの書き方をチェックするESLint
エンジニア間で大きく記述ルールが異なると、引き継ぎやヘルプのときに理解するのに時間がかかってしまいます。
そこでESLintを導入すると、ソースレベルでのミスを減らしたり、ある程度のルールを揃えたりすることができます。
またconsoleやalertがあると警告を出すことができるので、デバッグ用で入れたconsoleが残りっぱなしになるのを減らしてくれます。
ESLintの設定はテンプレート直下にある.eslintrcで変更することができます。
中身はJSONデータです。frontplateでは比較的ゆるめの設定になっているので、実際に使いながら設定を詰めていくと良いと思います。
- ESLint Rules
http://eslint.org/docs/rules/
テストフレームワークの変更
testディレクトリに**Spec.jsを作ると、ユニットテストが実行できます。
今回の変更でJasmineからMocha+PowerAssert、モックテストのためにsinon.jsという構成になっています。
PowerAssertのレポートがとても読みやすいので、テストが失敗したときの原因把握がしやすいです。例えば雑なテストですが、わざと失敗させると以下のように表示されます。
PhantomJS 1.9.8 (Mac OS X 0.0.0) hoge init FAILED AssertionError: # /Users/HayashiYuichi/Documents/project/frontplate/node_modules/eslint-loader/index.js!/Users/HayashiYuichi/Documents/project/frontplate/src/pc/test/hogeSpec.js:7 assert(value === 10) | | 5 false [number] 10 => 10 [number] value => 5 at /Users/HayashiYuichi/Documents/project/frontplate/node_modules/power-assert/build/power-assert.js:1609 at decoratedAssert (/Users/HayashiYuichi/Documents/project/frontplate/node_modules/power-assert/build/power-assert.js:1530) at powerAssert (/Users/HayashiYuichi/Documents/project/frontplate/node_modules/power-assert/build/power-assert.js:1435) at /Users/HayashiYuichi/Documents/project/frontplate/src/pc/test/hogeSpec.js:56valueの中に5が入っているので、結果falseになっているというのがわかると思います。このように整形されてどこが異なっているのか見てすぐわかるのが、PowerAssertの素晴らしいところです。
- PowerAssert
https://github.com/power-assert-js/power-assert - Mocha
http://mochajs.org/ - Sinon.jS
http://sinonjs.org/
リリースコマンド
ひと通り開発が終わったらリリースです。以下のコマンドを実行します。
gulp production以前はgulp build -minとしていましたが、min以外の対応が増えてきたり、拡張してCIでデプロイという形も出てきたりしたのでproductionにまとめました。
このコマンドを実装するとpublic/pc以下にJSやCSSが圧縮されたファイルを出力するので、これをサーバーにアップするなどしてください。
Todo
CSSのLintも入れたかったのですが、scss-lintはRubyが必要になるので、依存環境が増えるのはなぁ、と思って今は導入していません。いずれは何らかのLintを入れたいと思ってます。
- scss-lint
https://github.com/brigade/scss-lint
WordPress案件を得意としている弊社としては、WordPressを絡めたテンプレートも作りたいなぁと思っています。これはまだ構想レベルですが……。
まとめ
前回の記事から約5ヶ月経ち、テンプレートの変更についてご紹介しました。
ES6は正式に採択されたこともあり、今後さらに広まっていくと思っています。気軽に使ってみたい、勉強してみたいという方にも使っていただければと思います。
なお、ライセンスはMITでgulpのタスクだけ抜き出して使っていただいてもOKです。StarやPRはいつでも歓迎しています。
- frontainer/frontplate
https://github.com/frontainer/frontplate
最後に
株式会社LIGではこのようなテンプレートや開発環境効率化に興味のあるフロントエンドエンジニアを募集しています。
興味のある方は以下のページよりお声がけください！
- JavaScriptが好きで企画から作りたいフロントエンドエンジニアを募集
https://www.wantedly.com/projects/17270 - ［インターン/アルバイト］フロントエンドエンジニアをウォンテッド！
https://www.wantedly.com/projects/8025
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
