2015年9月に海外で実施されたフロントエンド技術者へのアンケート記事を紹介します。
The State of Front-End Tooling – 2015
アンケート結果を見てみると、最近のトレンドが浮き彫りにされて非常に興味深い内容になっています。
※元記事の作者に了承を得ています。
※最終更新日：2015/12/10
目次
Q1 –プリプロセッサ
お好みのCSSプリプロセッサは何ですか？
| プリプロセッサ | 投票数 | 割合 |
|---|---|---|
| Sass | 1297 | 63.95% |
| Less | 308 | 15.19% |
| Stylus | 76 | 3.75% |
| 使わない | 305 | 15.04% |
| その他 | 42 | 2.07% |
Sassの使用率が63.95%で圧倒的に使用されています。
「使わない」が15.04%という数字は、CSSプリプロセッサの習得はほぼ必須条件になっているということでしょう。
「その他」ではPostCSSを使っているという回答だったそうです。
Q2 – PostCSSとRework
次にポストプロセッシングツールについて。
あなたは、次のCSS処理ツールのことを聞いたことがありますか？
| 聞いたり読んだことがある | 少し使った | 快適に使ってる | 聞いたことがない | |
|---|---|---|---|---|
| PostCSS | 47.78% (969) | 9.32% (189) | 7.15% (145) | 35.75% (725) |
| Rework | 19.03% (386) | 1.53% (31) | 0.69% (14) | 78.75% (1,597) |
PostCSS47.78%, Rework19.03%の人が聞いたことがあると回答しています。
PostCSSについてはプロジェクトで使っている人は少ないものの、徐々に認知されてきていますね。
2016年はこれらに人気に火がつく可能性大です。
Q3 – タスクランナー
どのタスクランナーを好んで使っていますか？もし使っていたらあなたのプロジェクトのワークフローで使っていますか？
| タスクランナー | 投票数 | 割合 |
|---|---|---|
| Gulp | 888 | 43.79% |
| Grunt | 559 | 27.56% |
| NPM | 64 | 3.16% |
| Broccoli | 22 | 1.08% |
| その他 | 99 | 4.88% |
| タスクランナーは使わない | 396 | 19.53% |
Gulp 43.79%, Grunt 27.56%で大半を占めています。
プロジェクトで一貫性を保つためにタスクランナーが導入されていると見て取れます。
Q4 – JavaScriptライブラリやフレームワークの知識
| 聞いたり読んだことがある | 少し使った | 快適に使ってる | 聞いたことがない | |
|---|---|---|---|---|
| jQuery | 1.4% (28) | 7.2% (146) | 91.4% (1,854) | 0% (0) |
| Underscore | 34.5% (700) | 20% (406) | 35.4% (718) | 10.1% (204) |
| Backbone | 60.8% (1,234) | 21.1% (427) | 16.2% (328) | 1.9% (39) |
| AngularJS | 36.9% (748) | 33.5% (680) | 29.1% (590) | 0.5% (10) |
| Ember | 78.7% (1,595) | 13.1% (265) | 4% (82) | 4.2% (86) |
| React | 61.8% (1,253) | 19.9% (404) | 14.3% (290) | 4% (81) |
| Polymer | 70.4% (1,429) | 11.4% (231) | 2.5% (50) | 15.7% (318) |
| Knockout | 65.2% (1,321) | 9.7% (197) | 6.1% (124) | 19% (386) |
jQueryの快適さ、超絶的な人気で91.4%。聞いたことがない人は0％。
続いてUnderscoreが多く, MV*フレームワークが使われています。
Q5 – JavaScriptライブラリかフレームワークをプロジェクトで使っていますか？
| 投票数 | 割合 | |
|---|---|---|
| 使わない | 120 | 8.48% |
| jQuery | 799 | 56.47% |
| AngularJS | 253 | 17.88% |
| React | 124 | 8.76% |
| Backbone | 42 | 2.97% |
| Ember | 34 | 2.40% |
| Knockout | 21 | 1.48% |
| Underscore | 18 | 1.27% |
| Polymer | 4 | 0.28% |
| その他 | 0 | 0% |
プロジェクトでの採用率。jQueryの次にAngularJSがよく使われています。
昨年国内ではReactが爆発的に話題になりましたが、海外のプロジェクトではこのような結果でした。
日本国内のアンケートもやってみようかな。
Q6 – JavaScript Module Bundlers
あなたのワークフローではJavaScriptモジュールバンドラーを使っていますか？
| モジュールバンドラー | 投票数 | パーセンテージ |
|---|---|---|
| モジュールバンドラーは使わない | 1093 | 53.9% |
| Browserify | 334 | 16.47% |
| RequireJS | 273 | 13.46% |
| Webpack | 213 | 10.5% |
| JSPM | 45 | 2.22% |
| Other | 70 | 3.45% |
外部ファイルのモジュールを require して取り込むことができるバンドラー。
半数以上の人が使っていないようです。
ES2015をBabelでトランスパイルするなどのケースが増えれば、
自然とこれらのツールも需要が増えてきそうですね。
Q7 – JavaScript Testing
JavaScriptのテストでは何のツールを使っていますか？（もし使っていたら）
| ツール | 投票数 | パーセンテージ |
|---|---|---|
| JSのテストにツールは使わない | 1210 | 59.66% |
| Jasmine | 332 | 16.37% |
| Mocha | 305 | 15.04% |
| QUnit | 78 | 3.85% |
| Tape | 30 | 1.48% |
| Jest | 16 | 0.79% |
| Karma | 15 | 0.74% |
| Intern | 8 | 0.39% |
| その他 | 34 | 1.68% |
テストツールを使わない割合が59.66%。JSのテストはケースバイケース。
Jasmine, Mochaの人気が高いようです。
その他ではJSLintやJSHintとの回答もあったそうですが、
それは書式をチェックするツールでコードの機能をテストするものではないぞ、と主張されています。
このあたりからもテストの知識にギャップがあると言えますね。
Q8 – その他のツール
最後にパッケージ管理ツールの質問。
これらのツールの経験はありますか？
| 聞いたり読んだことがある | 少し使った | 快適に使ってる | 聞いたことがない | |
|---|---|---|---|---|
| Bower | 23.27% (472) | 28.06% (569) | 45.36% (920) | 3.30% (67) |
| Yeoman | 37.13% (753) | 30.57% (620) | 19.97% (405) | 12.33% (250) |
| Ender | 28.55% (579) | 1.43% (29) | 0.54% (11) | 69.48% (1,409) |
| NPM | 6.76% (137) | 19.63% (398) | 68.39% (1,387) | 5.23% (106) |
BowerとNPMの使用率が非常に高いです。Yeomanはぼくが思っている以上に使われていました。
あまり馴染みのないEnderはこちらから。Ender
まとめ
あまり聞いたことのない名前やツールがあったかもしれませんね。
みなさんは普段どのツールを使ってますか？
日本国内での状況も気になりますね。
Thanks, @AshNolan_.