はじめに
こんにちは。フロントエンド開発センター(UIT) 岡崎です。
UITでは毎年、フロントエンド周辺のツールに関する社内向けアンケート『UIT Front-end Tooling Survey』を行っています。Ashley Nolanさんが実施しているFront-end Tooling Surveyをベースにアレンジしたものです。2018年から実施して今回で3回目、2020年の結果を2019年と比較する形で紹介します。
2020年・調査結果
0.Voters
| 2019 | 2020 |
|---|---|
| 55 | 66 |
- 対象はフロントエンドエンジニア
- LINE(東京・京都), LINE Fukuoka, LINE Growth Technology, LINE Plus
- 日本, 韓国, 台湾, ベトナム
- 2020年8月時点
1.General Front-end Experience
Roughly how long have you been working with front-end technologies?
開発経験年数のボリュームゾーンが「2〜5年」に変化
2.CSS Knowledge
How do you rate your own knowledge of CSS and its associated tools and technologies?
CSSは「Advanced」以上のメンバーが33%から45%に増加
3.Processor Usage
Which of these CSS processors do you regularly use?
Sassが微増、Stylusが微減、PostCSSが36%から44%と急進
4.CSS Processor Experience
Please indicate your experience with...
Sass利用率が81%から95%に増加
5.CSS Frameworks
Please indicate which of the following CSS frameworks you use most frequently on you projects.
CSSフレームワークはLINEが社内向けに開発したkoromoを中心に「Others」が36%と首位に
6.CSS Naming Schemes
Do you use a CSS naming scheme when writing CSS, such as BEM or SUIT?
CSS設計でBEMやSUITを導入する割合が13%増加
7.CSS Linting
Do you use a tool to lint your CSS?
CSS Linterを使う割合が19%増加し全体で62%に
8.CSS Tool Experience
Please indicate your experience with...
9.CSS Methodologies and Naming Scheme Experience
Please indicate your experience with...
10.CSS Tool Usage
Which of these CSS methodologies or tools do you currently use on your projects?
Autoprefixerが10%減、BEM/Stylelintが10%以上増、Atomic Designが20%急増、SMACSSがゼロ
11.Preferred CSS-in-JS Tool
What is your preferred CSS-in-JS tool?
CSS Modulesが50%近くまで急浮上し首位に
12.CSS Feature Usage
Please indicate your experience with...
Flexboxの「Feel comfortable using」が15%増で78%に
13.JavaScript Knowledge
How do you rate your own knowledge of JavaScript and its associated tools and methodologies?
JavaScriptは「Intermediate」未満が10%近く減って「Expert」が10%以上増加
14.Task Runners
What task runner do you prefer using in your typical project workflow?
15.Knowledge of JavaScript Libraries and Frameworks
Please indicate your experience with...
Vue.jsは「Feel comfortable using」が6%増、「Used a little」が11%減。Reactは「Never heard of」がほぼゼロに
16.Frequency of JavaScript Libraries and Frameworks
Which JavaScript libraries and / or frameworks do you currently use most frequently on projects?
Reactが27%減、Vue.jsが19%減、Nuxtが登場
17.Majority of JavaScript Libraries and Frameworks
Which JavaScript library or framework would you regard as essential to you on the majority of your projects?
ReactとVue.jsが逆転、Reactが40%で首位に
18.JavaScript Module Bundlers Usage
Do you use a JavaScript module bundler in your workflow?
Module BunlderはWebpackが98%とダントツ
19.JavaScript Module Bundlers & Task Runners Experience
Please indicate your experience with...
NPMとWebpackが人気
20.JavaScript Extension Languages
Please indicate your experience with...
TypeScriptの「Feel comfortable using」が24%増と人気
21.JavaScript Linting
Which do you use to lint your JavaScript?
ESLintが95%とダントツ。
22.JavaScript Testing
Which of these tools do you use to test your JavaScript?
Jestが87%とダントツ、Puppeteerが登場
23.Performance Tools, Libraries or Language Features
Which of these tools, libraries or language features do you use to help with performance?
Lighthouseが10%増で人気
24.Accessibility Tools
Which of these accessibility tools do you use to test your sites / applications?
25.JavaScript Package Managers
Which JavaScript package manager do you primarily use in your workflow?
Yarnが8%増加するも、NPMは66%と堅調
26.Miscellaneous Tools
Please indicate your experience with...
27.Chart libraries Usage
Which of these chart libraries do you use?
Chart.jsが63%とダントツ、次いでGoogle Charts、D3.js
まとめ
- フロントエンド開発経験年数のボリュームゾーンは2〜5年と若年化
- CSSとJavaScriptの習熟度はビギナーが減りエキスパートが増加、より専門的な集団に
- CSS Processor利用率はSassが72%、PostCSSが43%と全体的に向上
- CSS Linter利用率が50%を超えてマイナーからメジャーに転化
- CSS Flexbox使用率は97%となり市民権を獲得
- Vue.jsはエキスパート層とビギナー層が増加、Reactは全体的にレベルアップ
- プロジェクトで最も採用されているのはVue.js(51%)、React(36%)の2強フレームワーク
- 好まれているフレームワークはReact(40%)、Vue.js(37%)となり、Reactが首位に
- TypeScript利用率が20%増えて87%に到達
- JavaScript開発では、Webpack、ESLint、Jestが人気
- Package Managerは、NPM(66%)がメインだが、Yarn(33%)も増加中
2019年と比較すると、プロジェクトで採用されているJavaScriptフレームワークは昨年同様Vue.jsですが、好まれているのはReactと昨年とは異なる結果に。また多くのプロジェクトでTypeScriptへの移行が進み、利用が増えている状況を裏付ける結果になりました。
いかがでしたか？UIT Front-end Tooling Surveyを通じて我々のことをより深く知ってもらえると幸いです。LINEではフロントエンドエンジニアを募集しております。興味がある方はぜひご応募ください。
まだ、応募は考えていないけど情報交換からスタートしたい方はカジュアル面談もご利用ください。