JavaScriptの開発環境を構築するにあたり、以下の必須項目についての概要をまとめてみた。
必須要素
- ES6
- webpack
- ESLint
各要素の概要
ES6
正式名称はECMAScript2015（ES2015）。通称ECMAScript6（ES6）。
ECMA Internationalによって標準化されたJavaScriptであり、これまでJavaScriptでは不便であったオブジェクト指向プログラミングが、直感的に行えるようになった。
ES6で新たに提供された主な仕様
- class命名の導入で、Java/C#ライクなクラス定義が可能に
- import/export命令によるコードのモジュール化をサポート
- 関数構文の改善（アロー関数、引数のデフォルト値、可変長変数など）
- let/const命令による値の列挙
- イテレーター/ジェネレーターにより列挙可能なオブジェクトの操作が可能に
- 組み込みオブジェクトの拡充（Promise、Map/Set、Proxyなど）
- String/Number/Arrayなど、既存の組み込みオブジェクトも機能を拡張
ただし、すべてのブラウザーが対応しているわけではないので、Babelのようなトランスコンパイラーが不可欠。
webpack
ウェブコンテンツを構成するファイルをまとめるツール。モジュールバンドラ。
- モジュールバンドラ
複数のモジュールを1つにまとめたファイルを出力するツール。代表的なものとして、Browserify、RequireJS、webpackがある。
複数のJavaScriptファイルをまとめることで様々な利点がある。
1. 機能ごとにファイルを分割できる（作業の効率化）
2. 外部モジュールを利用できる
3. リクエスト数を減らすことが出来る
HTTP/1.1接続ではブラウザとウェブサーバーの同時接続数が限られるため、１つのファイルにまとめることで転送時間を短縮できる
4. 依存関係を解決したファイルを出力できる
JavaScriptの他にも、CSSや画像もバンドルできたり、ローカルサーバーの起動まで包括的な制作環境としての機能まである。
ESLint
JavaScriptのための静的検証ツール。コード一貫性の保持やバグの発見などをおこなう。同様のツールにJSLint、JSHint、JSCSなどがある。
特徴
- すべての検証ルールを自由にon/offできる
- カスタムルールを作ることができる
- 豊富なビルトインルールに加えて、多数のプラグインが公開されている
- ES6、ES7、JSXを標準サポート
- Babel と連携することで、仕様策定中の新しい構文や Flow 型注釈にも対応できる
- 迅速に開始できるように、推奨ルールだけでなくサードパーティの設定利用が可能
- Sublime、Vim、JetBrainsの製品およびVisual Studio Codeなどの、複数のエディタやIDEとの統合が可能