LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog

Blog


UIT Front-end Tooling Survey 2020

はじめに

こんにちは。フロントエンド開発センター(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ではフロントエンドエンジニアを募集しております。興味がある方はぜひご応募ください。

まだ、応募は考えていないけど情報交換からスタートしたい方はカジュアル面談もご利用ください。