10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。

2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。

最初に結論を書いておくと、

『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』

という組み合わせが、いま僕の採用しているJavaScriptの環境です。

主要ライブラリは React

• A JavaScript library for building user interfaces | React

去年、一気に普及したReactは、今年に入っても絶好調です。他のライブラリや、Angular 2など、色々と騒がれていましたが、去年1年間で個人的に当面はReactに完全決着したと思っています。数年前は、jQueryが使えないとフロントの仕事は難しいと言われていましたが、これからはReactが使えないとフロントの仕事は難しいと言われることになるでしょう。

Reactはブラウザで動作するアプリケーション以外にも、React Nativeによるモバイルアプリ開発も行えますので、今後ますます成長していきそうです。

アプリケーションフレームワークは Redux

• Redux: Predictable state container for JavaScript apps

Reactで本格的にアプリケーションを開発する場合はフレームワークが必要です。Reactの普及にともなって、Fluxや、Fluxxorなど様々なフレームワークが乱立しましたが、現在首位に立っているのは、Reduxだと感じています。

僕も最初はFluxで開発していたのですが、その後、Reduxが登場し、評判が良いので全面書き換えを行ったのですが、その便利さがとても良く分かりました。Fluxではdispatch, store, actionなどの処理を結構地道に実装していく必要があったのですが、Reduxの場合、Fluxのときと比べて50%くらいのコード量で同じ機能を実装できました。

まだ、完全決着とはいかないかもしれませんが、これから開発される方は、とりあえず Redux で始めてみるのが良いと思います。

ルーティングは react-router

• react-router is a complete routing library for React.

React + Redux アプリでルーティングが必要な場合は、Redux と同じコミュニティで開発されている react-routerを選択しておけば、まず間違いないでしょう。最近、v2 がリリースされたので、これから利用しはじめる場合は、そちらを利用しましょう。

UIフレームワークは material-ui

• Material-UI A Set of React Components that Implement Google's Material Design

UIは好み応じて選択すれば良いと思いますが、オススメは個人的に React を本格的に利用するようになったきっかけとなるのが material-ui です。Google の Material Designを React コンポーネントによって再現したフレームワークで、フロントアプリ開発が爆速になります。

見た目とかそういうのではなく、とにかくHTMLとCSSを一切書かずに、用意されたコンポーネントをばんばん配置していくだけで、アプリケーションができていくため、UI設計に完全にフォーカスできるのが最大の利点だと思っています。

HTTP Request は axios

• axios: Promise based HTTP client for the browser and node.js

axiosを利用する前は、superagentを利用していたのですが、Promise ベースの方が楽なので乗り換えました。superagentのときと比べて、XHRまわりで悩まされなくなりました。

記述は ES2015（ES6）

JSは書きにくい、という意見から、CoffeeScript、TypeScriptなどのAltJSを採用するプロジェクトも多くなりましたが、去年ES2015がリリースされたお陰で、本家へ原点回帰する流れができたような気がします。

後述するBabelなどビルド環境が整ったお陰で、積極的にES2015の構文が利用できるようになった事も大きいのですが、実際にES2015を書いてみると、とても書き心地が良く、これが普及要因だと思っています。

個人的には、これからJavaScriptを覚えたいという人は、最初からES2015で覚える方が良いでしょう。

ビルド環境は Babel + webpack

• Babel is a JavaScript compiler.
• webpack MODULE BUNDLER

ビルド環境についても、色々な動きがありました。トランスパイラは、BabelがReactをサポートしたことなどもあり、完全に一本化した感がありますが、ビルド処理は、Grunt、Gulp、Browserify、webpackなどのツールを、どの組み合わせで選択すれば良いのか、本当によく分かりませんでした。

ただ、最近は海外を中心に webpackに一本化する動きが広がってきており、僕もこの流れに乗っています。開発サーバーもwebpack-dev-serverを利用すれば、簡単に用意できるところも実にナイスです。

文法・構文チェックは ESLint + Airbnb JavaScript Style Guide

• ESLint The pluggable linting utility for JavaScript and JSX
• Airbnb JavaScript Style Guide() {

ES2015やReactを利用して開発するということは、大袈裟に言えば、必要となる構文知識が単純なJavaScriptの3倍になると言えます（大袈裟）。せっかく新しい構文、新しいライブラリを利用して開発するのであれば、新しい構文に早く慣れたいものです。そこで役に立つのが、ESLint + Airbnb JavaScript Style Guideの組み合わせです。

ESLintは、厳しめの構文チェッカで、設定が多いことでも有名でしたが、最近はプラグイン形式で第三者が作成した設定を簡単にインポートすることができるようになり、とても使いやすくなりました。

中でも、Airbnb JavaScript Style Guideは、ES2015とReactの構文を、かなり前のめりでサポートするように設定されているため、警告に従って修正していれば、古いスタイルの記述が強制的にどんんどん新しくなっていき、速攻で新しい構文を学習できるため、とても助けられました。

Atomを利用している場合は、linter + linter-eslintのプラグインを入れておくと良いでしょう。

テストは…

テストはまだどれが良いのか決まっていません。なんとなく、jsdom + chai + mocha を利用してみたりしていますが、Rubyもテストについては揺れていますので、一本化は難しいのかもしれません。

まとめ

去年1年はフロント回りの激しい流れに、多くの方が翻弄されたのではないかと思いますが、個人的には落ち着いてきたように見えてきました。

学習コストは一気に跳ね上がりましたが、逆に言えば、Webの進化が激しい中、10年前からほぼ変っていなかったフロント回りの技術が、いよいよ時代に追い付かなければならなくなり、去年みたいな大変革が起きたと思えば、とても自然な流れと言えます。

流石に今後は、去年のような激しい変化は起きないと思いますので、フロント回りを静観しておられたかたは、ぜひ今年で一気に追い付くと良いでしょう。

追記

これからの時代を支えるエンジニアを育成する1年で最先端Webエンジニアになれる、サウスピーク光速Webエンジニアプラン【先着10名、5月末まで】という事業をやってみることにしました。興味のある方はぜひこちらもご欄ください。