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接続ではブラウザとウェブサーバーの同時接続数が限られるため、1つのファイルにまとめることで転送時間を短縮できる
4. 依存関係を解決したファイルを出力できる

JavaScriptの他にも、CSSや画像もバンドルできたり、ローカルサーバーの起動まで包括的な制作環境としての機能まである。

ESLint

JavaScriptのための静的検証ツール。コード一貫性の保持やバグの発見などをおこなう。同様のツールにJSLint、JSHint、JSCSなどがある。

特徴

  • すべての検証ルールを自由にon/offできる
  • カスタムルールを作ることができる
  • 豊富なビルトインルールに加えて、多数のプラグインが公開されている
  • ES6、ES7、JSXを標準サポート
  • Babel と連携することで、仕様策定中の新しい構文や Flow 型注釈にも対応できる
  • 迅速に開始できるように、推奨ルールだけでなくサードパーティの設定利用が可能
  • Sublime、Vim、JetBrainsの製品およびVisual Studio Codeなどの、複数のエディタやIDEとの統合が可能