JavaScript界隈のやたら複雑な環境について

なぜ複雑か

たぶんこの辺が理由だと思う

• とりあえずnpmモジュールにしたがる
• カスタマイズ性を求めるので、１つ１つの部品が細かい
• クロスブラウザ

とりあえずnpmモジュールにしたがる

• JavaScriptに関するものは、何でもかんでもnpmにしようとする
• クライアントサイドだけでなく、サーバサイドまで
• Apache、Javadoc、JUnit的なものや、構文チェック、makeコマンド、シェル処理までnpmモジュール化されてる

具体的にはこう

• Apache -> express
• Javadoc -> JSDoc
• JUnit -> Jasmine / Karma
• 構文チェック -> ESLint
• makeコマンド -> babel
• シェル処理 -> gulp or Grunt or Webpack

カスタマイズ性を求めるので、１つ１つの部品が細かい

• 特に構文チェックなど、個人の好みが出るものはpluginやconfigが沢山

{
  "eslint": "^3.19.0",
  "eslint-config-airbnb": "^14.1.0",
  "eslint-plugin-import": "^2.2.0",
  "eslint-plugin-jsx-a11y": "^4.0.0",
  "eslint-plugin-react": "^6.10.3"
}

• npmモジュールを組み合わせるためのモジュールとかもある

{
  "react": "^15.4.2",
  "react-redux": "^5.0.3",
  "redux": "^3.6.0"
}

クロスブラウザ

だいたいはInternet Explorerのせい(Edgeになってから少しマシ)
ES6をIEで動かすためにBabelが使われる
ChromeならBabelをつかわなくてもES6は動く

昔よくあった「Internet Explorer以外で開いてください」ページを回避するためのBabelだと思ってもらえれば

参考

【翻訳】 2016年にJavaScriptを学んでどう感じたか
http://kikuchi1201.hateblo.jp/entry/2016/10/26/172404