2018年、フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールを調査

Post on:2018年5月15日

フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールについての調査結果を紹介します。
SassやLESS、BootstrapやFoundation、AutoprefixerやModernizr、BEMやCSS-in-JS、CSS GridやFlexbox、NPMやGulp、jQueryやReactやVue.js、WebpackやESLintなど、実際にどのように使用されているかが分かります。

5,000人を超える現役デベロッパーを対象に調査が行われ、まさに現場の現在の状況がよく分かります。

フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールを調査

The Front-End Tooling Survey 2018
by Ashley Nolan

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

Q1. フロントエンドの経験年数

最初の質問は、フロントエンドの経験年数です。
「あなたはフロントエンドで、どれくらいの期間働いていましたか？」

経験年数 人数 割合
0-1年 234 4.59%
1-2年 600 11.77%
2-5年 1,499 29.41%
5-10年 1,369 26.86%
10-15年 824 16.17%
15年以上 571 11.20%
フロントエンドの経験年数

回答者の実に54.23%が5年以上の経験があり、2年以下と答えたのは16.36%にすぎませんでした。これにより、今回の調査はフロントエンドの技術においてかなり高いレベルの経験を持っていることが分かります。

Q2. CSSの知識

2番目の質問は、CSSの知識レベルの自己評価です。
「あなた自身のCSSとそれに関連するツールや手法の知識をどのように評価しますか？」

レベル 人数 割合
初心者 72 1.41%
見習い 443 8.69%
中級者 1,475 28.94%
上級者 2,326 45.63%
専門家 781 15.32%
CSSの知識

回答者の89.9%はCSSに関する知識が中級者以上であると回答しており、その大部分（45.63%）は自身を上級者であると評価しています。

知識レベルに関する質問は、回答者にとって非常に主観的です。例えば、専門家の定義は人によって異なるでしょう。この主観とは別に、知識レベルによって以下の質問にどのような影響を与えるか非常に興味深いことです。

Q3. CSSプリプロセッサの使用

使用ツールについての最初の質問は、CSSプリプロセッサです。
「あなたが使用しているCSSプリプロセッサのツールは何ですか？」

プリプロセッサ 人数 割合 前回比
Sass 3,330 65.33% +1.84%
無し 735 14.42% +0.58%
PostCSS 451 8.85% +0.97%
Less 328 6.44% -3.78%
Stylus 111 2.18% -0.87%
その他 142 2.79% +1.34%
CSSプリプロセッサの使用

2016年と同様にこの分野は、Sassが65.33%で圧倒的でした。2016年と比較しても1.84%増加しており、スタンダードと言える状態です。

Lessは引き続き減少傾向で、2016年から3.78%減少して6.44%となっています。

Q4. CSSプリプロセッサの経験

Q3に続いて、CSSプリプロセッサのツール全体で、その経験レベルを示すように質問しました。

プリプロセッサ 知らない 聞いたことはある 使用したことはある よく使用する
Sass 0.16% 8.95% 17.56% 73.34%
Less 0.98% 36.14% 34.39% 28.49%
Stylus 21.90% 60.68% 11.24% 6.18%
PostCSS 16.70% 45.09% 21.15% 17.07%
CSSプリプロセッサの経験

Q3の結果から期待される通り、Sassが最も高い知識レベルを持っているツールであると言えるでしょう。Sassはすでに73.34%が使用しており、2016年から更に増加しています。未使用・知らないは10%ほどで、Q3の結果と合わせてCSSプリプロセッサのツールにおいて、Sassが圧倒的であると言えます。

注目されているという点で見ると、PostCSSです。17.07%が快適に使用しており、2016年から3.63%も増加しました。

LessとStylusは、2016年と比較して減少しています。

Q5. CSSフレームワーク

2016年の調査では多くの人々が、CSSフレームワークの使用法を知りたいと考えていましたが、今年はそれがどのように変化したか見てましょう。
「あなたのプロジェクトで最も頻繁に使用するCSSフレームワークは何ですか？」

私が最も興味を持った結果は、フレームワークを使用しない、またはカスタムを使用する人に比べ、既成のフレームワークを使用している開発者の数です。

フレームワーク 人数 割合
Bootstrap 1,768 34.69%
無し 1,690 33.16%
カスタム 773 15.17%
Foundation 199 3.90%
Materialize 134 2.63%
Bulma 132 2.59%
Semantic UI 102 2.00%
PureCSS 33 0.65%
その他 266 5.22%
CSSフレームワーク

最も普及しているCSSフレームワークはBootstrapですが、これを使用している回答者はわずか1/3（34.69%）にすぎません。

この結果で興味深い点は、既成のCSSフレームワーク（51.67%）を使用することを選択した回答者が、カスタムを使用するかフレームワークを使用しない（48.33%）人たちとほぼ同数であることです。

回答をCSSの知識レベルに基づいてフィルタリングすると、初心者の人はBootstrapの使用率が高くなります。知識レベルが高くなるにつれ使用率が下がり、専門家レベルでは37.39%がCSSフレームワークを使用せず、Bootstrapの使用率は21.64%に減少します。

専門家レベルではカスタムを使用する割合が高く、逆に初心者は非常に低くなります。これらの数字は理にかなっています。開発者がCSSを使って知識を増やすにつれて、自分のプロジェクトに合った方法でCSSを書くことを学んだことを利用して、既成のソリューションを使用しなくなる可能性が高くなります。

Q6. CSSの命名規則

次は、CSSの命名規則についてです。この質問では特定のものは求めていません。
「BEMやSUITなど、CSSを記述するときにCSSの命名規則を使用していますか？」

命名スキーム 人数 割合 前回比
使用 2,525 49.54% +4.17%
使用しない 1,986 38.96% +2.09%
知らない 586 11.50% -6.26%
CSSの命名規則

結果はこの調査以来、CSSの命名規則の使用と知識レベルが上昇していることを示しています。49.54%と約半数がCSSを記述する際に使用しています。

知らないと答えた人も2016年から6%減少し、中間の未使用が上昇しました。

CSSの知識レベルが上級以上と回答した人たちに限ると、命名規則を使用しているのは59.83%に上昇します。全体的に知識レベルは上昇しており、有用性を唱える一人として、奨励します。

Q7. CSSのLint

2015年の最初の調査では大多数の回答者が、CSSのLintは使用していない、と答えていました。変化があったでしょうか？
「あなたはCSSのLintにツールを使用しますか？」

CSS Lint 人数 割合 前回比
使用 2,545 49.93% +3.36%
未使用 2,552 50.07% -3.36%
CSSのLint

49.9%が使用すると回答し、2016年から3.36%上昇しました。この回答は命名規則と同様に、知識レベルが上級者ほど、より高い割合になります。上級者は57.16%が使用と答え、初心者は逆に38.6%に減少します。

LintはCSSのツールとは別に、上昇傾向にあると思われます。CSSのLintを実践することがJavaScriptのLintが普及するにつれ、さらに増加し​​なければ私は非常に驚きます。

Q8. CSSのツールの経験

この質問は、さまざまなCSSのメソッドとヘルパーツールの知識と使用レベルをカバーしています。
「Autoprefixer、Modernizr、Stylelintであなたの経験を教えてください。」

ツール 知らない 聞いたことはある 使用したことはある よく使用する
Autoprefixer 16.58% 17.05% 16.91% 49.46%
Modernizr 10.40% 27.19% 34.24% 28.17%
Stylelint 43.30% 26.25% 12.05% 18.40%
CSSのツールの経験

2016年と比較すると、Modernizrが減少し、StylelintとAutoprefixerの両方の知識レベルが上昇しました。

Stylelintは知識レベルで良好な成長を見せており、18.40%の回答者が使いやすさを感じています。2016年と比較して、8.03%の上昇です。また、知らないと答えた人も11.80%減少しています。
しかし驚いたことに、CSSの知識レベルが上級者であると言う人の1/3が、Stylelintについて知らないと答えました。

Autoprefixerの知識レベルは依然として非常に高く、49.46%の回答者がこれを快適に使用しています。

同様に、Modernizrの知識レベルは少し減少していますが、回答者の10.40%のみがそれを聞いたことがなく、どれほどよく知られているかを示しています。

Q9. CSSの方法論の経験

前の質問に続いて、
「以下のCSSの方法論であなたの経験を教えてください。」

方法論 知らない 聞いたことはある 使用したことはある よく使用する
CSS-in-JS 11.77% 41.69% 26.27% 20.27%
SMACSS 40.71% 39.43% 11.58% 8.28%
OOCSS 31.67% 45.36% 14.09% 8.89%
Atomic Design 33.43% 37.59% 16.77% 12.20%
ITCSS 69.22% 21.39% 3.96% 5.43%
BEM 15.66% 25.51% 19.99% 38.85%
SUIT CSS 69.98% 24.41% 3.30% 2.32%
CSSの方法論の経験

CSSの方法論で一番大きな動きを見せたのは、CSS-in-JSです。回答者の20.27%は2016年から8.74％増加して快適に感じていると答えました。回答者の46.54%が、使用したことがあります。

BEMは依然として最もよく知られているCSSの方法論であり、38.85%の回答者が2016年の調査から6.09%増加して快適に使用できると答え、良好な成長を見せました。

その2つ以外は知識レベルが低下しましたが、回答者のうち29.04%が少しは使っていると回答したAtomic Designは例外です。

すべての方法論を見てみると、回答者の1/3（35.26%）が少なくとも1つを快適に使用できると感じています。

2016年よりも多くの人々がCSSの方法論の1つを使用しています。その中でも特に、CSS-in-JSとAtomic Designを使用する開発者が増加傾向となっています。

Q10. CSSのツールの使用状況

CSSのツールと方法論について、最後の質問です。
「どのようなCSSのツールや方法論をあなたのプロジェクトで現在使用していますか？」

ツール 人数 割合 前回比
Autoprefixer 2,928 57.45% +7.09%
BEM 2,239 43.93% +3.98%
Modernizr 1,501 29.45% -9.09%
CSS-in-JS 1,343 26.35% +10.82%
Stylelint 1,177 23.09% +8.87%
Atomic Design 777 15.24% +0.87%
OOCSS 463 9.08% -5.59%
SMACSS 337 6.61% -6.26%
ITCSS 247 4.85% -0.25%
SUIT CSS 80 1.57% -0.73%
使用しない 835 16.38% -7.14%
CSSのツールの使用状況

結果は、前の2つの質問に見られる経験レベルと一致しました。

実際の使用状況においてトップ3は、Autoprefixer(57.45%), BEM(43.93%), Modernizr(29.45%)となっています。
2016年とトップ3は同じですが、前回比は+7.09%, +3.98%, -9.09%です。

Modernizrの使用状況が下がり、AutoprefixerとBEMの使用状況が増加しており、Q8とQ9の回答と一致します。

CSS-in-JSの使用率は10.82%上昇し、現在26.35%の回答者がプロジェクトで使用しています。同様に、Stylelintの使用率は8.87%上昇し、23.09%の回答者が使用しています。

反面、他のCSSの方法論は減少していますが、使用量がわずかに増加したAtomic Designは例外です。OOCSSとSMACSSの使用率はそれぞれ5.59%と6.26%低下しました。古くなったメソッドが時間の経過と共に低下するのは驚きではありません。

また想像通り、知識レベルが上級者以上では、これらのツールと方法論の使用が上昇しています。

この結果から、ツールと方法論は知識レベルと使用法の両方で上昇傾向にあり、この数字が将来どのように進化するか興味深いことは明らかです。

Q11. CSSの機能の使用状況

CSSの最後の質問は、新機能についてです。
多くの新機能があり、その中から最も使用するであろうものに絞って質問しました。
「次のCSSの機能で、あなたの経験を教えてください。」

機能 知らない 聞いたことはある 使用したことはある よく使用する
CSS Grid 1.16% 36.59% 44.30% 17.95%
Flexbox 0.61% 5.55% 25.80% 68.04%
カスタムプロパティ 9.75% 44.75% 26.45% 19.05%
CSSの機能の使用状況

この結果から、Flexboxが68.04%と最も多くの人に理解されていることが分かります。使ったことがある、まで範囲を広げると94.84%になります。

驚いたのは、CSS Gridよりカスタムプロパティの方がよく使用する割合が高いことです。使用状況の割合をすべて見ると、CSS Gridはちょっと手をだしたけど効果的に使用していない状況というのが分かります。

Flexboxが快適に使用されている現状から、ブラウザのサポートがされるにつれ、CSS Gridもカスタムプロパティも数字を急速に上昇させるであろうと判断できます。

Q12. JavaScriptの知識

調査の後半は、JavaScriptに関してです。
CSSと同様に、知識レベルの自己評価から始めました。
「あなた自身のJavaScriptとそれに関連するツールや手法の知識をどのように評価しますか？」

レベル 人数 割合
初心者 128 2.51%
見習い 542 10.63%
中級者 1,698 33.31%
上級者 1,908 37.43%
専門家 821 16.11%
JavaScriptの知識

知識レベルは、2016年とほぼ同じでした。
CSSと同様に、回答者の大半は中級者以上であると考えており、回答者の3/4以上（86.85%）がこのレベルで評価しています。

2016年に比べると、上級者または専門家で評価した数が少し増加し、初心者がわずかに少ない結果になりました。この知識レベルは、必要に応じて他の結果を通して参照します。

Q13. タスクランナー

2016年ではGulpが最も広く使用されていたタスクランナーで、回答者の43.59%がツールを使用していると回答しました。最近ではNPMが大幅に増加しているため、開発者が現在ワークフローで何を使用しているか確認するのは興味深いです。
「プロジェクトのワークフローで、どのようなタスクランナーを使用することを望みますか？」

タスクランナー 人数 割合 前回比
NPM 2,436 47.79% +21.98%
Gulp 1,514 29.70% -13.89%
使用しない 540 10.59% -0.49%
Grunt 297 5.83% -6.08%
GUI Application 55 1.08% -0.82%
自作 31 0.61% -0.57%
その他 224 4.39% -0.14%
タスクランナー

興味深いことに、NPMの使用はGulpをかなり追い抜いており、現在47.79%で最も多く使用されているタスクランナーです。2016年と比較しても、21.98%の大幅な増加です。

Gulpは29.70%で、この分野で2番目に使用されているツールです。2016年から13.89%減少しています。確かに減少していますが、回答者の約1/3が使用していると考えることが重要です。これはかなりの量です。
タスクランナーを使用していない人は2016年とほぼ同じです。

この結果を少し深く掘り下げてみると、JavaScriptの初心者から中級までの知識を持つ回答者ではNPMの使用率は50.45%で、平均をより上回っています。ここで注目すべき傾向は、GruntやGulpなどのツールから離れ、NPMを使用してワークフローのタスクを処理する開発者が増えていることです。

これはWebpackやReactなどのツールとの相乗効果が高かったり、NPMが追加のツールを学習する必要はなしで簡単にタスクを実行できるためです。このことは、より多くの初心者がそれらの代替案を使用している理由を説明することができます。

Q14. JavaScriptのライブラリとフレームワークの知識

2016年では、jQueryがフロントエンド開発者の間で非常に人気のあるツールであることが証明され、ReactはAngularに先立ち、最も一般的なフレームワークでした。それらがこの18ヵ月でどのように変化したか見てましょう。

最初の質問は、JavaScriptのライブラリとフレームワークの経験レベルを示すように質問しました。

フレームワーク 知らない 聞いたことはある 使用したことはある よく使用する
jQuery 0.12% 0.12% 17.74% 79.91%
Lodash 11.28% 25.45% 25.66% 37.61%
Underscore 12.03% 34.61% 24.70% 28.66%
React 0.35% 30.65% 27.98% 41.02%
Angular 1 0.57% 47.03% 30.31% 22.09%
Angular 2+ 0.67% 65.25% 21.44% 12.63%
Vue.js 0.96% 59.03% 22.82% 17.19%
Ember 4.10% 80.60% 8.50% 6.81%
Preact 22.94% 65.55% 6.89% 4.63%
Backbone 6.57% 67.63% 16.97% 8.83%
Knockout 19.70% 65.76% 10.69% 3.85%
Aurelia 40.55% 55.92% 2.39% 1.14%
MeteorJS 14.24% 74.20% 9.55% 2.00%
Polymer 17.19% 71.53% 9.61% 1.67%
JavaScriptのライブラリとフレームワークの知識

この結果を見ると、jQuery（79.91%）、React（41.02%）、Vue.js（17.19%）、Angular 2+（12.63%）の数字が目立ちます。jQueryは2016年から6.80%減少しましたが、高い数字を保っています。

その反面、Reactは12.89%増え、ほとんどの回答者が使いやすいと感じるフレームワークと言えます。また、Vue.jsは多くの牽引力を得ており、2016年から11.71％増えて17.19%が快適に使えると答えています。

Angular 2+の知識レベルは上がっていますが、ReactやVue.jsに比べてわずかに少なくなっています。

ユーティリティのライブラリでは、Lodash（37.61%）をUnderscore（28.66%）より快適に使用できると答えた人が増えました。

フレームワークの知識レベルと見ると、回答者の70.98%はこれらのフレームワークの少なくとも1つを快適に使用できると感じています。2016年から10%増、2015年から20%増の値です。

これらの数字は、現代のフロントエンド開発において少なくとも1つのJavaScriptフレームワークを知ることがどれほど重要になったかを示しています。

Q15. JavaScriptのライブラリとフレームワークの使用

Q14で取り上げたJavaScriptのライブラリとフレームワークを実際に使用しているか尋ねてみました。回答者には、プロジェクトで使用したツールのすべてを選択するよう求めました。

フレームワーク 人数 割合 前回比
jQuery 2,575 50.52% -19.73%
React 2,435 47.77% +10.86%
Lodash 1,746 34.26% +2.49%
Vue.js 1,168 22.92% +13.57%
Angular 2+ 702 13.77% +5.30%
Angular 1 522 10.24% -14.86%
Underscore 400 7.85% -7.07%
Ember 318 6.24% +0.19%
Preact 159 3.12% N/A
Backbone 123 2.41% -3.87%
Knockout 90 1.77% -1.64%
Polymer 86 1.69% -0.19%
MeteorJS 72 1.41% -0.87%
Aurelia 54 1.06% -2.23%
使用しない 186 3.65% +0.93%
JavaScriptのライブラリとフレームワークの使用

今回の調査ではかなり大きな変化が見られました。
jQueryの使用率が高く、回答者の50.52%がプロジェクトで使用していますが、Reactも47.77%で非常に近い数字です。2016年と比較すると、jQueryは19.73%減少し、Reactは10.86%増加しています。

3番目に多く使用されているのはLodash（34.26%）で、興味深いことに4番目がVue.jsで、22.92%がプロジェクトで頻繁に使用していると回答しています。

Angular 1は14.86%減少しましたが、Angular 2+は5.3%の増加しか見ませんでした。この数字から分かることは、Angularのユーザーは最新バージョンに移行したのではなく、他のフレームワークに移行したように見えます。

これら以外のフレームワークはすべて、2016年から減少しました。

Q16. JavaScriptのライブラリとフレームワークで欠かせないのは

続いての質問は、大半のプロジェクトに欠かせないライブラリとフレームワークを尋ねました。前回のトップはjQueryで、1/3が欠かせないと答えていました。

フレームワーク 人数 割合 前回比
React 1,469 28.82% +11.02%
特に無し 1,098 21.54% +0.97%
jQuery 991 19.44% -12.67%
Vue.js 527 10.34% +7.33%
Angular 2+ 301 5.91% 3.09%
Ember 234 4.59% +0.82%
Lodash 176 3.45% -1.88%
Angular 1 82 1.61% -6.54%
Aurelia 31 0.61% -1.71%
Polymer 27 0.53% +0.19%
Underscore 22 0.43% -0.39%
Preact 15 0.29% N/A
Backbone 14 0.27% -0.55%
MeteorJS 9 0.18% +0.01%
Knockout 8 0.16% -0.22%
その他 93 1.82% +0.22%
JavaScriptのライブラリとフレームワークで欠かせないのは

トップが変わり、現在ではReactをほとんどの回答者が最も重要なツールであると答えました。jQueryは3位になりましたが、19.44%（991人）が不可欠であると答えています。Vue.jsがそれに続き、Angular 2+とEmberあたりまでが、重要なJavaScriptフレームワークとみなされているようです。

経験レベルでみると、興味深いことが見えてきます。
2年以下の経験者は、Reactが最も重要なツールであると回答した人は32.24%、Vue.jsは12.36%となっています。同様に、jQueryは18.47%で、すべての経験レベルの平均よりも低い割合でした。

jQueryは初心者がJavaScriptを使い始めるのに役立つツールでしたが、これらの数字を見ると、初心者はフレームワークを習得することが多くなっています。ReactとVue.jsの使い方は、jQueryよりもはるかに多くの記事が公開されているので、その効果も大きいと思われます。

全体として、jQueryの使用率は依然として高いものの、減少傾向にあります。Vue.jsがこのまま成長し、Reactが王者として定着するのか、これから注目したいところです。

Q17. JavaScriptのモジュールの使用

2016年の調査では、Webpackが41.23%でこの分野の代表的な存在でした。それからどのように変化したか見てみましょう。
「あなたはワークフローで、JavaScriptのモジュールを使用しますか？」

モジュール 人数 割合 前回比
Webpack 3,366 66.04% +24.81%
使用しない 1,031 20.23% -12.43%
Browserify 190 3.73% -6.93%
RequireJS 123 2.41% -5.34%
Rollup 113 2.22% +0.53%
Parcel 51 1.00% N/A
JSPM 13 0.26% -2.00%
その他 210 4.12% +0.37%
JavaScriptのモジュールの使用

Webpackは利用率がさらに大幅に上昇し、回答者の大半（66.04%）が2016年の調査から24.81%増加しています。

Browserify（3.73%）とRequireJS（2.41%）の使用率は、それぞれ6.93%と5.34%低下しました。

全体的な使用率は引き続き上昇しており、回答者のうち79.7%（4,066人）が2016年の結果から12%、2015年から32%増加しています。

開発者はJavaScriptツールのこの分野で、Webpackを採用したようです。将来、新しいツールが登場して牽引力を発揮しなければ、使用率が上昇し続ける可能性が高いことは明らかです。

Q18. JavaScriptのモジュールとタスクランナーの経験

前述のモジュールバンドルとタスクマネージャの経験レベルについて質問しました。

モジュール 知らない 聞いたことはある 使用したことはある よく使用する
Gulp 1.31% 18.78% 29.90% 50.01%
NPM 4.34% 12.58% 26.64% 56.44%
Grunt 2.12% 32.65% 36.14% 29.10%
Webpack 2.51% 19.07% 31.23% 47.18%
Browserify 9.02% 51.85% 26.96% 12.16%
Parcel 44.28% 47.46% 5.55% 2.71%
JavaScriptのモジュールとタスクランナーの経験

前の結果からも分かるように、ほとんどの回答者が快適に感じたツールは、NPM（56.44%）、Gulp（50.01%）、Webpack（47.18%）でした。

Webpackを使用するのが快適であると回答した割合が、Q17の質問でモジュールとして使用していたと回答した割合よりも低くかったのは興味深いことです。

これは、事前に設定されたWebpackをCreate-React-Appなどのツールを使用している人にとっては、使用するために必ずしも知っている必要はないということでしょう。

Q19. JavaScriptのトランスレータ

2016年では、JavaScriptのトランスレータはホットな話題でした。それ以来、BabelはJavaScriptを駆使することがベストプラクティスとなり、開発者はブラウザを理解できるコードにコードをコンパイルできるだけでなく、最新のES機能を書くことができるようになりました。

前回の調査から、これがどのように変化したでしょうか？
「JavaScriptをES6からES5に移植するツールを使用していますか？」

トランスレータ 人数 割合 前回比
使用 3,943 77.36% +15.60%
使用しない 975 19.13% -11.26%
知らない 179 3.51% -3.84%
JavaScriptのトランスレータ

期待通り、トランスレータの使用量は増加し続けており、回答者の77.36%がワークフローで使用しています。

2016年の結果で触れたように、Babelなどのツールに関する知識は現代のJavaScript開発に不可欠です。ワークフローに統合するための手順を実行していない場合は、最新のJavaScript機能にアクセスするために行うことをお勧めします。

Q20. JavaScriptの拡張機能

この質問は、多くの人々がTypeScriptと拡張言語の使い方について知りたい中、前回のフィードバックから得られたもう1つの新しい質問でした。TypeScript、最近ではFlowがJavaScriptにもたらす有用性のため、より大きな勢いを増しています。
「JavaScriptの次の拡張機能を使用していますか？」

拡張機能 知らない 聞いたことはある 使用したことはある よく使用する
TypeScript 2.12% 48.28% 27.94% 21.66%
Flow 33.31% 50.89% 11.01% 4.79%
Elm 28.43% 65.14% 5.26% 1.18%
ClojureScript 32.61% 64.59% 2.37% 0.43%
JavaScriptの拡張機能

結果を見ると、TypeScriptが21.66%で、回答者が最も快適に感じたツールです。しかし、約半数（49.6%）は、TypeScriptを少ししか使用していないと答えています。

これらのツールが数年後に増えていくかどうかは興味深いものです。

Q21. JavaScriptのLint

JavaScriptのLintツールは現在、ほとんどがデベロッパーツールの一部とみなされています。2016年では回答者の76%以上がツールを使用しており、ESLintがトップでした。
「あなたはJavaScriptのLintにツールを使用しますか？」

JavaScript Lint 人数 割合 前回比
ESLint 3,115 61.11% +20.70%
使用しない 772 15.15% -8.24%
TSLint 511 10.03% N/A
JSLint 360 7.06% -11.82%
JSHint 206 4.04% -9.80%
StandardJS 84 1.65% N/A
その他 49 0.96% -2.07%
JavaScriptのLint

ESLintの使用率はさらに増加し​​ており、現在61.11％の回答者が使用しています。次いで人気が高いのは、TSLintで10.03%です。

全体として、JavaScriptのLintツールを使用すると答えた人は8%増の84.85%になりました。

モジュールバンドルと同様に、このジャンルも落ち着いているようで、ESLintが大部分の開発者にとって最適なツールと考えられています。

Q22. JavaScriptのテストツール

2015年の最初の調査以来、JavaScriptのテストは着実に増加しており、2016年には回答者の52.07%がJavaScriptをテストするツールを使用していると答えています。しかし、リーダー的なポジションのツールはありませんでした。
「あなたはJavaScriptをテストするためにツールを使用しますか？」

ツール 人数 割合 前回比
使用しない 2,214 43.44% -4.50%
Jest 1,136 22.29% +18.86%
Mocha 716 14.05% -8.29%
Jasmine 537 10.54% -6.38%
QUnit 219 4.30% +0.09%
Enzyme 95 1.86% N/A
Ava 59 1.16% -0.51%
Tape 49 0.96% -0.51%
その他 72 1.41% -0.61%
JavaScriptのテストツール

今回の結果では、Jestが最も一般的なツールとなり、回答者の22.29%が使用していると回答しています。この値は2016年から18.86%の増加で、かなり大きな飛躍です。

逆に、MochaとJasmineはそれぞれ14.05%と10.54%で減少しました。

JavaScriptをテストするツールを使用している開発者の割合は、2016年の結果から4.5%増加して56.56%に上昇しています。数字が増え続け、ツールを使って多くの開発者がJavaScriptをテストできるようになるのは素晴らしいことです。

Q23. JavaScriptのパッケージマネージャ

この質問は、NPMやYarnを開発者が使用しているかどうかを知りたいという私の欲求から生まれました。
「あなたはワークフローでどのパッケージマネージャを使用しますか？」

パッケージ 人数 割合
NPM 3,206 62.90%
Yarn 1,563 30.67%
使用しない 289 5.67%
その他 39 0.77%
JavaScriptのパッケージマネージャ

NPMは明らかに主要なパッケージマネージャであり、回答者の62.90%が使用しています。回答者の約1/3（30.67%）がYarnを使用しており、一部の開発者はNPMに満足していないことを示しています。

将来的にこれらの数字がどのように変化するか、NPMが開発者の支持を得続けるのか、Yarnの使用量が増えるかどうかは興味深いでしょう。

Q24. その他のツール

最後の質問は、これまでの質問で挙がったパッケージマネージャやその他のさまざまなツールの知識レベルを調べることが目的です。
「次のツールを使用しているか教えてください。」

ツール 知らない 聞いたことはある 使用したことはある よく使用する
NPM 0.84% 2.49% 11.89% 84.78%
Yarn 6.24% 26.51% 20.95% 46.30%
Bower 4.18% 30.80% 36.81% 28.21%
Babel 3.77% 20.93% 29.76% 45.54%
Prettier 30.43% 29.63% 16.05% 23.90%
Yeoman 19.13% 41.85% 29.76% 9.26%
その他のツール

2016年からの最大の変化は、Yarnを快適に感じる回答者の数が46.30%（+32.86%）に増加したことです。この数値はNPM（84.78%）と比べるとまだまだですが、かなりの成長です。

BowerとYeomanの知識レベルがわずかに低下した一方、Babelの経験は快適であると感じる回答者が45.54%（+6.66%）でわずかに増加しました。BowerはプロジェクトのメンバーがYarnとWebpackを代わりに使用するように勧告していることを考えると驚くべきことではありません。

Prettierはかなり新しいツールですが、知識レベルが強く、回答者の23.9%が快適に使用できると感じました。このツール（または同様の代替ツール）が今後も成長し続けるかどうかは興味深いことです。

まとめ

今回は特に、JavaScriptのライブラリとフレームワークに関連する数字を見て、非常に興味深い結果が得られました。

JavaScriptについて

Reactは現在、ほとんどの回答者がプロジェクトに不可欠であると考えるライブラリ・フレームワークです。jQueryは2番目に重要なツールと見なされていますが、減少傾向にあるようです。これは経験の浅い開発者で顕著な傾向で、最初に使用するツールとしてjQueryより先に他のフレームワークを採用しているようです。

Vue.jsは現在、2番目に一般的なフレームワークで、知識レベルと使用量が大幅に増加しています。

JavaScriptのLintカテゴリのESLintと同様に、Webpackも最も人気のあるモジュールバンドラとしての地位を固めました。テストツールではJestが最も人気があり、2016年末以降に大幅に増加しました。

CSSについて

CSSのツールを見ると、CSSプロセッサとCSSフレームワークに関しては、SassとBootstrapがトップです。

CSS-in-JSの知識と使用レベルは、BEMとAutoprefixerの知識レベルと同様に、増加し続けています。その反面、Modernizrの使用は、SMACSSやOOCSSなどの古いCSSメソッドと同様に低下しているように思われます。

CSSの機能の利用状況を見ると、Flexboxの知識レベルが非常に高く、CSS Gridの知識レベルも有望です。開発者たちのコミュニティがこれらの機能の利点を伝えるために費やした努力を考えれば、効果が得られていると判断できます。

総括

フロントエンドのすべてのツールを見てみると、特定の分野が成熟してきているように見えます。例えば、Sass、Webpack、ESLintはそれぞれの分野で頭一つ抜けた存在です。
他の分野でもこのような存在が生まれるのか楽しみです。

sponsors

top of page

©2024 coliss