いい感じにコーディングを爆速化できるフロントエンド開発環境をリニューアル

いい感じにコーディングを爆速化できるフロントエンド開発環境をリニューアル

先生

先生

最近は少しずつCTO業務に取りかかれるようになってきました。やっぱり夏は忙しくなりそうです。こんにちは、先生です。

以前「エンジニアがいい感じにフロントエンド開発を爆速化できる環境構築の手順」という記事でフロントエンドの開発環境を作ったものを紹介しましたが、やはり変化の流れが激しく、この環境も少しずつ変化していきました。

今日は新しくなった環境をご紹介します。このまま使ってもいいですし、一部を取り入れてもいいと思います。

おさらい「爆速化できる環境」とは?

フロントエンド開発(コーディング)を早く終えるための環境で、以下のような機能を持ったテンプレートです。

  • 外部テンプレート(EJS)
  • SASS
  • HTMLバリデーション
  • ユニットテスト
  • スプライト画像&SCSS生成
  • スタイルガイド生成
  • JS/CSSの圧縮
  • ES5で書ける(ES5非対応ブラウザへの自動対応)
  • LiveReload(ファイルを更新するとブラウザも更新される)

これによってブラウザでの確認を早くしつつ、JSも効率よくモジュールごとに分けるなどして、見通しも良くなるテンプレートでした。詳しくは「エンジニアがいい感じにフロントエンド開発を爆速化できる環境構築の手順」をご覧ください。現在はこれが少しずつ変化して、下記の機能が追加されました。

  • JSバリデーション
  • ES6で書ける(ES5非対応ブラウザへの自動対応)
  • Mocha & PowerAssert
  • LiveReload(ファイルを更新するとブラウザも更新される)

ではさっそく環境を作りながら、新しく追加された機能や変更になった部分をそれぞれ紹介していきます。

環境準備

動作に必要な環境を整えます。
以前の環境が動作している場合はインストールの必要はありません。

NodeJSとGulpのインストールについては以下の記事をご覧ください。

前のバージョンではWebpackやPhantomJS、Bowerが必要になっていましたが、現在はNodeとGulpだけで動作するように変更されました。やはり初期の準備は簡単な方が良いですよね。

※ NodeやGulpのバージョンが古い場合に動作しないことがありますので、バージョンアップをお願いします。
執筆時の最新バージョンはこちらです。

  • Node – 0.12.7
  • Gulp – 3.9.0

Bowerを外した理由

リニューアルに伴ってBowerを依存から外しました。
モダンなライブラリやフレームワークがBowerで提供されていないことがあり、npmとBowerの二重管理となるケースが発生したためです。しかしながら、引き続きBowerを使うこともできるようにはしています。

テンプレートの設置

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

適当なディレクトリに展開してください。

環境の初期化

ターミナル/コマンドラインを起動して、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では比較的ゆるめの設定になっているので、実際に使いながら設定を詰めていくと良いと思います。

テストフレームワークの変更

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:56

valueの中に5が入っているので、結果falseになっているというのがわかると思います。このように整形されてどこが異なっているのか見てすぐわかるのが、PowerAssertの素晴らしいところです。

リリースコマンド

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

gulp production

以前はgulp build -minとしていましたが、min以外の対応が増えてきたり、拡張してCIでデプロイという形も出てきたりしたのでproductionにまとめました。

このコマンドを実装するとpublic/pc以下にJSやCSSが圧縮されたファイルを出力するので、これをサーバーにアップするなどしてください。

Todo

CSSのLintも入れたかったのですが、scss-lintはRubyが必要になるので、依存環境が増えるのはなぁ、と思って今は導入していません。いずれは何らかのLintを入れたいと思ってます。

WordPress案件を得意としている弊社としては、WordPressを絡めたテンプレートも作りたいなぁと思っています。これはまだ構想レベルですが……。

まとめ

前回の記事から約5ヶ月経ち、テンプレートの変更についてご紹介しました。
ES6は正式に採択されたこともあり、今後さらに広まっていくと思っています。気軽に使ってみたい、勉強してみたいという方にも使っていただければと思います。

なお、ライセンスはMITでgulpのタスクだけ抜き出して使っていただいてもOKです。StarやPRはいつでも歓迎しています。

最後に

株式会社LIGではこのようなテンプレートや開発環境効率化に興味のあるフロントエンドエンジニアを募集しています。
興味のある方は以下のページよりお声がけください!

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

CTOの林です。フロントエンドを専門とし、AngularJSのコミュニティをはじめ、様々な勉強会に顔を出しています。効率化マニアでGrunt,Gulpをはじめ、プロジェクト進行やサーバーサイド、インフラ周りの効率化を目指し日々活動しています。 【役職紹介 / CTO】 Web制作にかかる内容を統括しています。プロジェクトを横断的に見渡し、技術的な見地からアドバイスなどを行い、ときには実制作のヘルプを行ったりしています。新人エンジニアの育成や、体外的な活動としてLIG全体のエンジニアのブランディングのため勉強会やイベントへの登壇・開催なども行っています。 【普段やっていること】 新規サービスの設計(UI,遷移,DB,APIなど)、エンジニアの育成及び環境整備、技術選定、Web制作ユニットの統括とプロジェクト進行を円滑にするための仕組みづくり、フロントエンド周りの実装、エンジニアリングの開発効率化、勉強会の登壇・主催など

このメンバーの記事をもっと読む