2019/06/14 に公開 1660 views

このエピソードについて

## The Front-End Tooling Survey 2019 について

  • オンラインで行われている世界的なフロントエンドのアンケート
  • 5000 人以上から集計したアンケートによって、その年のフロントエンドのトレンドが分かるようになっている
  • https://ashleynolan.co.uk/blog/frontend-tooling-survey-2019
  • 昨年も行われている

UIT での Front-End Tooling Survey について

  • きっかけは東京以外のエンジニアも増えた中での技術スタックが知りたくなった
    • 東京, 福岡, 京都, 韓国, 台湾, タイと組織全体での集計のきっかけに
  • UIT では 2018 年から実施
  • 質問内容は基本的にグローバル向けのアンケートと同じ内容

2019 年のアンケート概要

  • アンケート回答者が 55 人に増加。参加率40%程度。
  • 全体として経験層年数の増加が見られる
    • 去年は 2~5 年の経験者がボリュームゾーン
    • 今年は 5~10 年の経験者が多くなる変化を見せた
  • フロントエンド勢力が強くなった
    • 例えば TypeScript は 7% → 36% が使いこなしているように
    • 反面 CSS 勢力は以前よりエキスパートが減少した様子

CSS のトレンドと状況について

  • プリプロセッサは Sass が強い(70%) が活用
    • 伸びしろとしては PostCSS が強し
    • Stylus については利用経験が 50%/50% とはっきり別れている
  • CSS フレームワークは Bootstrap と利用しないの二択
    • Bootstrap は日本語資料の充実・社内 fork の存在が大きいか
    • 内部以外の実装についてはフレームワーク向けではないデザインが多い
  • CSS Lint の利用率は半々
    • 社内的に Stylelint の標準化の仕組みが進んでいるからか
  • CSS の機能面について
    • Flex の利用率が 90% 近くとなり市民権を得る
    • CSS Grid はこなれている人が 10% 程度とまだまだ
    • CSS 変数もこなれている人が 20% で今後に期待

JavaScript とフレームワークトレンド

  • 以前と比べて上級者が増加 (55%)
  • フレームワーク事情
    • Vue.js の熟練者が 60%
    • React.js の熟練者が 50%
    • 社内アプリが React になったり熟練者が増加したり React も Vue.js 並に人気に
  • 自分のプロジェクトでどのフレームワークを使いたいか(複数回答可能)
    • Vue.js 70% / React.js 65% とほぼ習熟度と同じ
    • Lodash も 40% の利用率と、便利に使われている様子
    • jQuery の熟練者も 60% に増加と、年代の移り変わりが分かる結果に
  • TypeScript / Flow 事情
    • TypeScript は聞いたことがある人が半分から、使いこなしている人が 35%、利用経験のある人は 70% 程度
    • FlowType は特に変化なし。今からは TypeScript を学ぶ人が多いか
  • Lint / テストツール事情
    • ESLint 90% / Jest 60% とデファクトが決まっているような印象
  • パフォーマンス向上について
    • Lighthouse を使いだしている人は多いが、パフォーマンス施策の人は少ない
  • アクセシビリティツール
    • 85% の人が使っていない状況であり、伸びしろがある状態
  • パッケージマネージャー都合
    • 2019 年は Bower が廃止された
    • 社内的には NPM を利用
    • 特にこだわりがある人が多くなさそうなのでフレームワークが使っているほうで良いかも
  • 最後の質問
    • 「Yeoman使ってますか」
    • あまり使われていない

社内のアンケートにきたフィードバックについて

  • 「Too many questions」など 50 問はちょっと長いかもしれない
  • ECSS が入っていなかったりするのでもう少し幅があっても面白いかも
  • UIT の様子を知ってもらうきっかけにもなるかも

グローバル版は開催中

クロージング

Refs

  • BGM&SE
    • 魔王魂/騒音のない世界/OtoLogic