Gulp」タグアーカイブ

ESLintによるJavaScriptコーディングルールの強制

前提

要素 バージョン 関連記事
node/npm 7.4.0/4.1.2 Debian8.7にMEAN開発環境を構築する
gulp 3.9.1 Babel+Gulpで始めるES6

概要

構文チェックツール”ESLint”を用いて、JavaScriptのコーディングルールを強制し、コード品質を高める。

また、gulpによってESLintの自動実行することで、リアルタイムにコードを検証する。

JavaScript構文チェックツールについて

JavaScript構文チェックツールとは、JavaScriptコード中に潜む、シンタックスエラーやバグの元となりえる構文を静的に解析して通知してくれるツールのこと。

例えば以下のJavaScriptコードは、JavaScriptの仕様上では正常に動作する。

var hoge = 3;
var fuga = function(a , b , a) {
console.log(a + b);
}
fuga(1 , 2 , 3)

しかし、上記コードは以下の問題を含んでいる

  • 変数hogeは使用されていない(1行目)
  • 関数fugaに使用されていない第三引数がある(2行目)
  • 関数fugaの第一引数と第三引数の名前が重複している(2行目)
  • インデントされるべき行でされていない(3行目)
  • セミコロンが挿入されていない(5行目)

このような、実行時のエラーとはならないが、潜在的なバグの原因となったり、可読性を損ねるようなコードが含まれている場合にそれを通知するのが構文チェックツールの役割だ。

ESLintについて

ESLintは、他の構文チェックツールと比べて以下の特徴を持っている

  • 全ての検証ルールについて、検証のON/OFFを選択できる
  • 独自の検証ルールを作成することができる
  • ルールごとのドキュメントが充実している

今回はNode環境上にESLintを導入し、推奨の設定に加えていくつかの検証ルールを追加でONにすることにする。

ESLintのインストール

本記事では、gulp上でESLintを利用するので、gulp-eslintをnpmでインストールすることで、依存先のeslintもまとめてインストールする。

npm install -D gulp-eslint

.eslintrc.jsonの作成

eslintの設定は、隠しファイルである.eslintrc.jsonに記述する。今回作成したeslintrcを以下に示す。

{
    "extends": ["eslint:recommended"],
    "plugins": [],
    "parserOptions": {},
    "env": {
      "browser": true,
      "es6": true
    },
    "globals": {},
    "rules": {
      "no-var": "error",
      "semi": "error",
      "block-spacing": "error",
      "indent": ["error" , 2],
      "no-mixed-spaces-and-tabs": "error",
      "no-multiple-empty-lines": ["error" , {"max": 1}],
      "no-trailing-spaces": "error",
      "space-infix-ops": "error",
      "dot-notation": "error",
      "eqeqeq": "error",
      "no-else-return": "error",
      "no-loop-func": "error",
      "arrow-parens": "error",
      "arrow-spacing": "error",
      "no-console": "warn",
      "no-undef": "off"
    }
}

eslintrcの主な構成は以下の通り

  • extendsでベースとなる設定を指定し、ここではeslintの推奨設定を継承する(2行目)
  • eslintの対象コードの実行環境を指定し、ここではブラウザ上で動作し、ES6を利用していることを記述する(5行目)
  • 追加ルールを指定する。ベースとなる推奨設定に含まれるルールを記述する必要はない(10行目)

ruleは{ルール名: 設定}の形式で記述する。基本的に設定は、以下の3択で指定し、場合によっては追加設定情報を配列で与える。

  • “error”: ルールに反している場合に警告を出力する(強調)
  • “warn”: ルールに反している場合に警告を出力する(控えめ)
  • “off”: 警告を出力しない

上記eslintrcに含まれるルールは以下の通り

ルール名 ルール内容 異常系 正常系
no-var varの使用を禁止 var hoge let hoge
semi セミコロンの省略を禁止 let hoge let hoge;
block-spacing 単一行ブロックで内側スペースの挿入を強制 if(hoge) {fuga();} if(hoge) { fuga(); }
indent(2) インデントをスペース2字の強制
no-mixed-spaces-and-tabs タブとスペースのインデントの混在を禁止
no-multiple-empty-lines(1) 2行以上連続した空行を禁止
no-trailing-spaces 行の末尾へのスペースの付与を禁止
space-infix-ops 演算子の前後にスペースを強制 a=b+c; a = b + c;
dot-notation ドット表記可能な場合にドット表記を強制 hoge[‘fuga’] hoge.fuga
eqeqeq ==の使用を禁止 a == b a === b
no-else-return else文での不要なreturnを禁止
no-loop-func ループ内で関数を定義することを禁止
arrow-parens アロー関数の特定フォーマットを強制 (a) => a * 2; a => a * 2
arrow-spacing アロー関数の矢印の前後にスペースを強制 a=>a * 2; a => a * 2
no-console console.logの禁止
no-undef 宣言されていない変数の使用を禁止

※ no-consoleはデバッグでは使用したいため、errorではなくwarningに設定
※ no-undefは、外部ライブラリで宣言された変数を利用することがあるのでoffに設定

gulpfileを編集

var gulp = require('gulp'),
    eslint = require('gulp-eslint');

gulp.task('eslint' , function() {
  return gulp.src('app/scripts/*.js')
    .pipe(eslint())
    .pipe(eslint.format())
});

gulp.task('watch' , function() {
  gulp.watch('app/scripts/*.js' , ['eslint']);
});

gulp.task('default' , ['babel' , 'eslint' , 'watch']);

上記gulpfileにて、gulp実行時及びapp/scripts/*.jsに変更が生じた場合に、eslintを実行し、errorかwarningが発生した場合に警告を出力する。

デモ

画面左側でJavaScriptのコーディングを行い、画面右側でESLintを実行するgulpが動いている。
デモ内では、初めに「varの使用を禁止」「セミコロンの使用を強制」「参照されない変数の宣言禁止」に引っかかるコードを記述し、ESLintに指摘を受けながらそれを修正している


(クリックで拡大)

所感

  • 自分の中でコーディングルールを定めでも、それを実行できてないことも少なくない。ESLintを導入すると大リーグボール養成ギブスを付けているかのような感覚でコーディングすることになり、初めは息苦しくも感じるが、それが自然とできるようになってくると、コーディングスタイルの一貫性が取れるようになり良いコードを無意識で書けるようになると思う。
  • 例によってgulpとの相性は最高に良い。デモのように画面を分割してリアルタイムで検証できるのは、まるで統合開発環境を使ってるようで気持ちが良い
  • 今回始めてgifアニメーションを撮ってみたが、結果的にテイク10ぐらいかかった。何故録画してるとタイポが増えるのだろうか。撮影は大変だが、百聞は一見に如かずなので今後も無駄にテキスト増やすよりもデモを用意するようにしよう

参考

ES6のファイルを自動で結合してミニファイする

前提

要素 バージョン 関連記事
node/npm 7.4.0/4.1.2 Debian8.7にMEAN開発環境を構築する
gulp 3.9.1 Babel+Gulpで始めるES6

概要

JavaScriptの次世代仕様ES6で記述された複数のJavaScirptファイルを、一つのファイルに結合し、ミニファイルする作業を自動化する。

ES6及びタスクを自動化させるgulpについては関連記事で触れているので割愛する。

JavaScriptファイルの結合について

HTTPでは基本的に1リクエスト1ファイルとなるため、クライント側で利用するJavaScriptファイルがN個あればN回余分にリクエストを発行することになってしまう。これは些細な違いとは言え、オーバーヘッドが積もりパフォーマンスの低下に繋がることもある。

そこで、複数のJavaScriptファイルを1ファイルに結合することで、JavaScriptファイルのリクエスト回数を1回に抑えることができる。

しかし、ファイルを一つにすることで、全てのファイルのスクリプトが集約するため、そのファイルの容量が増大してしまうデメリットがある。これについては、後述するミニファイの技術を用いることで緩和することができる。

JavaScriptファイルのミニファイについて

通常、プログラマがスクリプトを記述する際は、可読性などから、以下のように冗長的なコーディングを行う
– 適切な空白や改行
– 理解しやすい識別子
– コメント

しかし、これらは処理系にとっては無意味な要素であり、処理系の負担やファイルの容量を無駄に増やしてしまう。

そこで、以下の例のように、処理系にとって不要の情報を極限まで削る(ミニファイ)ことで、ファイルの容量を削減し、パフォーマンスを向上させることができる。

ミニファイ前

/* 2数の和を戻す関数 */
var getSum = function(number1 , number2) {
  return number1 + number2; // 計算結果を戻す
};

ミニファイ後

var getSum=function(b,a){return b+a};

ファイル結合とミニファイの自動化

ここでは、複数ファイルに分割して記述されたES6のコードを、タスクランナーツールgulpを用いて、以下の手順でファイルを変換する

  1. gulp-concatで一つのES6ファイルに結合する
  2. gulp-babelでES5ファイルに変換する
  3. gulp-uglifyでミニファイする

必要なnpmモジュールをインストール

node/npm/gulpインストール後、追加で下記のモジュールをインストールする

$ npm install --save-dev gulp-concat
$ npm install --save-dev gulp-uglify
$ npm install --save-dev gulp-rename

gulp-renameについては後述

gulpによる自動変換

gulpfile.js

var gulp = require('gulp'),
    concat = require("gulp-concat"),
    uglify = require("gulp-uglify"),
    babel = require('gulp-babel'),
    rename = require('gulp-rename');

gulp.task('js' , function() {
  gulp.src('scripts/*.js')
    .pipe(concat('main.js'))
    .pipe(babel({presets: ['es2015']}))
    .pipe(uglify())
    .pipe(rename('main.min.js'))
    .pipe(gulp.dest('build/'));
});

gulp.task('watch' , function() {
  gulp.watch('scripts/*.js' , ['js']);
});

gulp.task('default' , ['js' , 'watch']);

上記gulpfileは、gulp実行時及びscriptsディレクトリ内のjsファイルに変更があった場合に、jsタスクを実行する。

jsタスクは、scriptsディレクトリ内のjsファイルをconcatモジュールで結合し、babelモジュールでES5に変換後、uglifyモジュールでミニファイしている。

uglifyモジュールは、JavaScriptファイルをミニファイする機能を持っているが、それを別名で保存する機能を持っていない。そこで。renameモジュールを前項で別途インストールしておいたので、それを用いてファイル名を変換する。

実行例を以下に示す

実行前

hoge.js

/* カウンタを備えたモジュール */
let myModule = (function() {
  let n = 0;
  return {
    add: () => n++,
    get: () => n,
  };
})();

fuga.js

/* 2数の和を求める関数 */
let myFunction = (numberA , numberB) => numberA + numberB;

実行後

main.min.js

"use strict";var myModule=function(){var c=0;return{add:function b(){return c++},get:function a(){return c}}}();var myFunction=function myFunction(b,a){return b+a};

処理系にとっては等価であるが、グット軽量化できたことがわかる

所感

  • AngularJSなどのJavaScriptフレームワークを用いていると、MVC分離のためにファイル数がどんどん増えていってしまうので、やはりこういった結合・ミニファイの技術は必須だ
  • ミニファイされたコードを用いて動作確認を行うと、バグが発生した際にブラウザでコードを確認しづらい問題がある
    — これについては、ミニファイ前のファイルも生成することで、開発中はミニファイ前を使用する運用にすれば解決する
  • ファイルが増えてもスクリプトをロードするタグを追加する必要がないので楽になる
  • JavaScriptファイル間で複雑な依存関係がある場合は、別途依存対策を取る必要がありそう
  • 当たり前だが、この技術はJavaScriptだけじゃなくCSSでも適用できるはず
    — 複数のLESSファイルを一つに結合し、CSSに変換してミニファイ

参考

LESSを用いたCSSの効率化とGulpによる自動コンパイル

前提

前提となる環境は以下の通り。

ツール バージョン
node 7.4.0
npm 4.1.2
gulp 3.9.1

上記環境のインストールについては下記参照
Debian8.7にMEAN開発環境を構築する
Babel+Gulpで始めるES6

LESSとは

CSSをロジカルに記述できるメタ言語。通常のCSSを拡張する形で、主に以下の機能が利用できるようになる。作成したLESSファイルは、LESSコンパイラを通してCSSに変換して利用する。

  • 変数代入
  • 階層構造化
  • 条件分岐
  • ミックスイン
  • 継承
  • 豊富な標準関数

LESS.jsによる動的なコンパイル

LESSは、基本的にコンパイラを用いてデプロイ前に静的に変換するが、コンパイル環境を持たずとも、LESS.jsを用いることでWebブラウザ上で動的にCSSに変換することができる。

LESS.jsはCDNから利用できるので、該当のHTMLページでそれをロードし、それより上でLESSのファイルをCSSと同じようにロードする。下記にその例を示す。

<html>
<head>
  <link rel="stylesheet/less" type="text/css" href="hoge.less">  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.2.0/less.min.js"></script>  
</head>
<body>
</body>
</html>

これで、LESS.jsは読み込まれた時点でリソースに存在するlessファイルをcssに変換する。非常にお手軽ではあるが、ブラウザに変換を任せてしまうこと、コード量が多くなってしまうことから、デプロイ時には静的変換をかけるようにし、LESS.jsの使用は開発中に限ったほうが良いと思われる。

lessコンパイラのインストール

本記事の前提の項で触れているとおり、gulp(3.9.1)が使える状態から始まっているので、ここではgulpでlessを利用するためのパッケージをインストールする

$ sudo npm install -D gulp-less

インストールされたバージョンを確認

$ npm ls gulp-less
degulog@1.0.0 /home/vagrant/less-test
└── gulp-less@3.3.0

gulpにタスクを定義

ここでは、app/styles/style.lessに変更を検知したら、それをcssに変換し、app/styles/build/style.cssに保存するタスクを記述する。

gulpfile.js

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

gulp.task('less' , function() {
  gulp.src('app/styles/style.less')
      .pipe(less())
      .pipe(gulp.dest('app/styles/build/'));
});

gulp.task('watch' , function() {
  gulp.watch('app/styles/style.less' , ['less']);
});

gulp.task('default' , ['less' , 'watch']);

これで、gulpコマンド実行時と、実行中にファイルが書き換わった際に自動でコンパイルしてくれるのでコーダーは一切意識すること無くLESSだけを記述することができる。

LESS構文例

ここからは、LESSの主な機能について特に意味のない極シンプルなコード例を示す。コードは、変換前のlessファイル、変換後のcssファイルの順で掲載する。

変数の利用

@変数名: 値
の形式で宣言できる。単純な計算や文字列展開も可能。

変換前

@header1: 18px;
@header2: @header1 - 4;
@imgdir: "/img";
h1 {
  font-size: @header1;
}
h2 {
  font-size: @header2;
}
.content {
  background-image: url("@{imgdir}/bg1");
}

変換後

h1 {
  font-size: 18px;
}
h2 {
  font-size: 14px;
}
.content {
  background-image: url("/img/bg1");
}

階層構造化

ある要素の子要素にのみスタイルを振ると行った場合に有効。もう冗長にしか見えないコードを書く必要がない。

変換前

h1 {
  font-size: 18px;
  a {
    text-decoration: none;
  }
}

変換後

h1 {
  font-size: 18px;
}
h1 a {
  text-decoration: none;
}

条件分岐

変数の値を元に、スタイルの設定を分岐させる

変換前

@width: 400px;

.content when (@width <= 400px) {
  font-size: 12px;
}
.content when (@width > 400px) {
  font-size: 14px;
}

変換後

.content {
  font-size: 12px;
}

ミックスイン(関数)

イメージは関数呼び出し?宣言済みのスタイルを取り込むことができる。

変換前

.my-header(@font-size: 16px) {
  text-align: center;
  font-size: @font-size;
}
h1 {
  .my-header();
}
h2 {
  .my-header(14px);
}

変換後

h1 {
  text-align: center;
  font-size: 16px;
}
h2 {
  text-align: center;
  font-size: 14px;
}

継承

ミックスインと似ているが、生成されるCSSを見ると分かる通り、こちらのほうがコード量が少なく、親子関係もわかりやすくなる。

変換前

.my-header {
  text-align: center;
}
h1 {
  &:extend(.my-header);
  color: red;
}
h2 {
  &:extend(.my-header);
  color: blue;
}

変換後

.my-header,
h1,
h2 {
  text-align: center;
}
h1 {
  color: red;
}
h2 {
  color: blue;
}

豊富な関数

LESSには様々な関数が用意されている。以下はその1例で、@base-colorを元に、それより10%明るい色を計算して設定してくれる

変換前

@base-color: #aa1111;
h1 {
  color: lighten(@base-color , 10%);
}

変換後

h1 {
  color: #d81616;
}

所感

  • 個人的には、階層構造化できる点が一番大きい。CSSでいつも冗長な記述をしている気がしてならなかったので
  • Node環境を用意できなくてもJavaScriptファイルをロードするだけでLESSが使えるというのは大きい。これならデザイナーさんなども手軽に利用できる
  • 最近学習した技術と比較しても、覚えることが非常に少なくそれでいてパワフルな生産性を生み出せるコスパの良い技術だと思った。従来のCSSに対して上位互換を持っている分、既存のCSSをそのまま使いつつ一部分だけLESSで拡張すると行ったこともできるので、導入コストは非常に小さいと思われる

参考

Babel+Gulpで始めるES6

前提

本記事の内容は以下の環境で行った

  • Debian 8.7
  • nodejs 7.4.0
  • npm 4.1.2

概要

本記事では以下について紹介する

  • JavaScriptの次世代仕様であるES6について
  • Babelを用いたES6コードの変換
  • Gulpを用いたBabelの自動実行

ES6(ECMAScript6またはECMAScript2015)

2015年に策定されたJavaScriptの新仕様。JavaScriptに主に以下のような言語仕様を追加した、次世代のJavaScriptと呼べるもの。

  • classベースによるオブジェクト指向
  • アロー関数
  • ブロックスコープを持つ変数/定数の定義
  • 文字列内での変数展開
  • 分割代入
  • 汎用的な非同期処理

など、他言語の良いところをドンドン取り入れて、現代的になったもの。
なお、ES6についてはご存知の方も多いと思うため、詳細は割愛するので必要に応じてググってください。

ES6の問題点

ES6はあくまでW3Cが策定した標準仕様に過ぎず、それを実装するのは各ブラウザベンダである。
そのため、ブラウザによって実装されている機能、されていない機能がバラバラで、特にモバイル系のブラウザと例によってIEは全体的にES6の対応ができていない。

よって、2017年現在でもES6のコードをそのまま使うのはあまり現実出来ではない問題がある。

Babelとは

そこで登場するのが、Babelというツールである。BabelはES6を含んだJavaScriptコードを、ES5以前(基本的に全てのブラウザで動くコード)に変換してくれるツールだ。

Babelを導入することで、フロントエンジニアは最先端のJavaScriptコードを記述しながら、ビルド時には旧コードに変換してブラウザで実行することで、ES6の問題点を解決することができる。

Babelのインストール

node環境であればBabelのインストールは以下のコマンドでインストールすることができる。

$ sudo npm install babel-cli -g
$ sudo npm install --save-dev babel-preset-es2015 -g

Babelの実行

下記のコードは、ES6の機能のうち幾つかを使用した、特に意味のないコードである。ちなみにこのコードでは、ES6のクラス構文、文字列内での変数展開、アロー関数、ブロックスコープを使っている。

class Human {
  constructor(name) {
    this.name = name;
  }
  greeting() {
    console.log(`Hello, My name is ${this.name}`);
  }
}

let createHuman = (name) => new Human(name);

createHuman('sasaki').greeting();

上記のコード(hoge.js)をbabelを用いて変換する。babelでは、特に指定が無い場合変換結果を標準出力するので、fuga.jsに出力する。

$ babel hoge.js --presets es2015 > fuga.js

変換されたコード(fuga.js)が以下である。

'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Human = function () {
  function Human(name) {
    _classCallCheck(this, Human);

    this.name = name;
  }

  _createClass(Human, [{
    key: 'greeting',
    value: function greeting() {
      console.log('Hello, My name is ' + this.name);
    }
  }]);

  return Human;
}();

var createHuman = function createHuman(name) {
  return new Human(name);
};

createHuman('sasaki').greeting();

Class構文がprototype構文に変換されている所が非常に複雑でわかりづらいが、アロー関数を使用していた部分がfunctionに書き換えられていることは一目瞭然だろう。
全体的にコードの内容及びレイアウトが複雑になってしまうが、変換後のコードはプログラマが読み書きすることは無いので、可読性などは不要である。

変換の前後で実行結果が変わらないことを以下に示す。

$ node hoge.js
Hello, My name is sasaki
$ node fuga.js
Hello, My name is sasaki

Gulpとは

前項で、Babelコマンドを用いてES6のコードを変換できることはわかった。しかし、フロント開発をする際に、コードを修正する度にBabelコマンドを実行するというのは現実的ではない。

そこで、タスクランナーツールのGulpを用いて、Babelの実行を自動化する。Gulpなどのタスクランナーとは、特定のタイミングで特定のタスクを処理してくれるツールのことで、Gruntなどが有名である。

今回は、比較的新しく、タスクの記述が簡単なGulpを導入し、JavaScriptコードが更新される度にBabelを自動実行するタスクをGulpで記述する。

Gulpのインストール

Gulp本体と、GulpからBabelを実行するモジュールをインストールする。

$ npm install --global gulp
$ sudo npm install --save-dev gulp-babel

タスクの記述

Gulpでは、gulpfile.jsというファイルに、JavaScriptの形式でタスクを記述する。Gulp自体については、本記事ではあまり紹介しないので、気になる方は参考ページを参照してください。

今回作成したgulpfileを以下に示す。

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

gulp.task('babel' , function() {
  gulp.src('app/scripts/*.js')
      .pipe(babel({presets: ['es2015']}))
      .pipe(gulp.dest('app/scripts/build/'));
});

gulp.task('watch' , function() {
  gulp.watch('app/scripts/*.js' , ['babel']);
});

gulp.task('default' , ['babel' , 'watch']);

ザックリ説明すると、このgulpfileでは、次のようなタスクを実行する。

「app/scripts/内のjsファイルが更新されたら、Babelで変換してapp/scripts/build/にファイルを作成する」

gulpの実行

今回作成したgulpfileには、ファイル監視のタスクを含めているため、バックグラウンドで動作させたままにするのが望ましい。

$ gulp &

gulpがバックグラウンドで動いている間に、該当のJavaScriptファイルを編集し、保存をした瞬間に、以下のようにgulpがタスクを実行する。

[06:45:19] Starting 'babel'...
[06:45:19] Finished 'babel' after 2.86 ms
[06:45:19] Starting 'babel'...
[06:45:19] Finished 'babel' after 2.3 ms

タスクがきちんと実行され、app/scripts/buildディレクトリの方に変換後のファイルが自動で作成される。ご覧のとおり、1ファイルの変換で系5ミリ秒ほどしかかからないため、プログラマはそれを意識すること無く開発を行うことができる。

なお、本記事とは直接関連は無いが、Gruntとそのプラグインを導入することで、以下のようなことも可能になる。

  • 複数のJavaScriptファイルを1ファイルに結合
  • 結合したファイルをミニファイ
  • ブラウザを再読込

モダンなフロント開発ではJavaScriptのコード量、ファイル数が多くなってくるため、1ファイルにまとめてミニファイすることは必須とも言える。

所感

今回、BabelやGulpを導入した根本的な目的は、ES6でJavaScriptを記述することである。そのため、本項ではES6に関する所感をまとめる。

  • prototypeベースとかいう個人的にまったく受け付けないオブジェクト指向を書かずに済むのは本当に助かる
  • JavaScriptは関数が第一級オブジェクトであるため、頻繁に関数定義を行うので、アロー関数はコードの記述量を大幅に減らせて助かる
  • ブロックスコープに寄って、例えばfor文内だけで有効な変数を宣言できるのは大きい。
  • 文字列内で変数を使いたい時に、チマチマ + を使っていたのが辛かったので今更ながら実装されてよかった。

以上より、今後もES6を使える場面では率先して使いたいし、周りにも布教してBabel,Gulpを用いたモダンな開発を取り入れていきたい。

参考

もうはじめよう、ES6~ECMAScript6の基本構文まとめ(JavaScript)
Babelで始める!モダンJavaScript開発
ドットインストール gulp入門 (全12回)