はじめに

こんにちは。フロントエンド開発センター(UIT) Front-end Dev. 9チームの鴻巣です。普段はLINEスキマニおよびLINE Creators Marketのフロントエンド開発を担当しています。

UITでは社内のフロントエンドエンジニアのトレンドや周辺ツールの利用状況を調査するため、毎年社内に向けてアンケート「UIT Survey」を実施しています。Ashley Nolanさんが実施しているFront-end Tooling Surveyをベースに2018年からはじまり、今回で5回目の実施となりました。11月に実施した2022年のアンケート結果を紹介します。

概要

・対象: 海外拠点を含むLINEのフロントエンドエンジニア（回答者は日本、韓国、ベトナム、タイの組織に所属）
・7割程度の回答者が日本を拠点とするエンジニア
・質問および回答の言語: 英語
・回答期間: 2022/11/22-2022/11/30
・回答者数: 123名

結果

・LINEのフロントエンドエンジニアについて
・CSS/UI Frameworkについて
・JavaScriptおよび周辺ツールについて
・Reactについて
・Vueについて

LINEのフロントエンドエンジニアについて

How many years have you worked for LINE?

How many companies have you worked at before LINE?

80% 以上のエンジニアがLINE入社前に1社以上で働いていました。

What language(s) do you use in your job?

業務内で複数の言語を使うエンジニアもいるため、複数選択可能な設問になっています。（縦軸は回答者数に対して項目を選択した割合）LINE (東京）では多くエンジニアが日本語を業務で使用している反面、同じ国内の開発組織でもLINE Fukuokaでは英語を使用する割合が高くなっています。組織ごとに傾向に違いはありつつ、日常的に複数の言語に接するエンジニアが多いことがわかります。社内では、日本語話者と英語話者が混在する場合に通訳を介してミーティングを行うチームもあります。

How many times do you work remotely in an average week?

7割近くのエンジニアがほとんど毎日リモートで勤務しているという結果になりました。

CSS/UI Frameworkについて

CSS Knowledge

How would you rate your own knowledge of CSS and its associated tolls and technologies?

Usage of CSS processor

Which of these CSS processor do you regularly use in your project(s) at LINE? (Multiple selection)

Experience with UI frameworks

Please indicate your experience with the following UI frameworks.

koromo, Astro, LDSGは社内向けのUIフレームワークです。koromoはBootstrapをベースに実装されています。

Usage of UI frameworks

Which of the following UI frameworks do you use in your project(s) at LINE? (Multiple selection)

全体の傾向と比較して、LINE Fukuokaのエンジニアは、担当するプロジェクトでUIフレームワークを使わずにフルスクラッチでUIを実装するケースが多いようです。LINE Fukuokaではエンドユーザ向けのサービスを扱うエンジニアが多く、サービスごとにオリジナルのデザインをマークアップしていることが影響していると考えられます。

Preferred UI frameworks

Please indicate your most preferred UI frameworks.

以前のアンケートと比較してTailwindを好むエンジニアが増えた一方で、なにも使わずにフルスクラッチでUIを実装する「None」を好むエンジニアも多いことがわかります。

Usage of CSS methodologies or tools

Which of these CSS methodologies or tools do you use on your project(s) at LINE? (Multiple selection)

Experience with CSS features

Please indicate your experience with the following CSS features.

JavaScriptおよびその周辺ツールについて

Javascript Knowledge

How do you rate your own knowledge of JavaScript and its associated tools and methodologies?

Experience with JavaScript libraries/frameworks

Please indicate your experience with the following JavaScript libraries/frameworks.

Usage of JavaScript libraries/frameworks

Which library/framework do you use for your project(s) at LINE? (Multiple selection)

6割のエンジニアがReactを採用したプロジェクトに関わっており、Reactが優勢な状況がわかります。

Preferred JavaScript libraries/frameworks

Please indicate your most preferred JavaScript library/framework.

全社でみるとReactが優勢な結果になった一方で、LINE (東京）のエンジニアに限定するとVue.jsを好むエンジニアも多いという結果になりました。因果関係については断定できないですが、LINE（東京）のエンジニアが関わっているプロダクトについてはVue.jsを採用しているケースが多いです。

Experience with JavaScript modules bundlers

Please indicate your experience with the following modules bundlers.

Usage of JavaScript module bundlers

Which module bundler do you use for your project(s) at LINE? (Multiple selection)

社内では依然としてwebpackの採用例が圧倒的であることがわかるものの、新規の開発を行う場合にはViteを採用するケースも増えてきました。

Preferred JavaScript module bundlers

Please select your most preferred JavaScript module bundlers for your next project at LINE.

「社内の次のプロジェクトでなにを採用するか？」という観点だと、webpackの人気度はまだまだ高いようです。

Usage of Alt-JS

Which language do you use for your project(s) at LINE? (Multiple selection)

参加しているプロジェクトが「TypeScriptを使用している」「JavaScriptを使用している」「JavaScriptからTypeScriptに移行中である」のいずれの状態かを問いました。TypeScriptのみのプロジェクトに関わっているエンジニアが7割である一方で、JavaScriptのみのプロジェクトに関わるエンジニアも半数存在します。

Experience with tools for testing

Please indicate your experience of tools for testing.

Usage of tools for testing

Which tools do you use for testing in your project(s) at LINE? (Multiple selection)

Usage of performance tools / features

Which performance tools / features do you use in your project(s) at LINE? (Multiple selection)

Knowledge regarding accessibility

Have you read any of the following documents related to accessibility? (Multiple selection)

アクセシビリティのベストプラクティスを実践するために、「LINE Accessibility Guidelines」という社内向けのドキュメントが整備されています。

Reactについて

Experience with libraries for React state management

Please indicate your experience with the following libraries for React state management.

Usage of library for React state management

Which of the following libraries do you use for React state management in your project(s) at LINE? (Multiple selection)

Preferred library for React state management

Please select your most preferred library for your next React project state management.

状態管理のライブラリとしてはRecoilがReduxに次ぐ人気であったのに対して、「なにも使わない」という選択をするエンジニアがもっとも多い結果になりました。

Usage of CSS tools for React

Which of the following CSS tools for React do you use in your project(s) at LINE? (Multiple selection)

社内ではCSSをReactのアプリケーションコードと別に扱うケースも一定あるようです。一部のチームではフロントエンドエンジニアとは別にマークアップ専門のエンジニアがアサインされていることが影響していると考えられます。

Preferred CSS tools for React

Please indicate your most preferred CSS tools for React.

Vueについて

Experience with libraries for state management in Vue

Please indicate your experience with the following libraries for state management in Vue.

Vuexの後継としてPiniaが登場しましたが、認知度はいまだ低調でした。

Usage of libraries for state management in Vue

Which of the following libraries for state management in Vue in your project(s)? (Multiple selection)

Preferred library for state management in Vue

Please select your most preferred library for your next Vue project state management.

まとめ

・日常的に複数の言語を使用し業務にあたるエンジニアが多く存在する。一方で使用される言語の傾向は拠点によって異なる。
・リモートワークが浸透し、7割近くのエンジニアは毎日リモートで勤務している。
・回答者の25%は社内ではUIフレームワークを使わず、フルスクラッチでサービスのマークアップを行うプロジェクトに関わっている。
・Tailwindを好むエンジニアが社内に広がっているものの、フルスクラッチでUIをマークアップすることを好むエンジニアも依然多い。
・Reactを好むエンジニアが優勢。ただし拠点によって傾向の違いがあり、特にLINE (東京）ではほかの拠点と比べてVueの人気度が高い。
・webpackに代わり次世代のモジュールバンドラーとしてViteの採用事例が目立つようになってきた。
・「社内の次のプロジェクトでどのmodule bundlerを採用するか？」という設問から今後Viteが採用されるケースが増えることが予想される。
・社内プロジェクトではReduxの採用事例が変わらず多いものの、経験および好みに関する回答の傾向から今後のRecoilの利用拡大が予想される。
・PiniaがVuexの後継として登場したが、いまだに認知と使用経験、利用状況および好みのいずれの観点においてもVuexが優勢。

UIT SurveyがLINEで働くフロントエンドエンジニアやフロントエンドの開発組織について興味をもってもらうきっかけになればなによりも嬉しいです。また、UITではこれ以外に「最新のフロントエンド」をキャッチアップできる Podcast「UIT INSIDE」の配信や、定期的なMeetupの開催を通して、情報の発信に努めています。こちらもあわせてチェックしていただけますと幸いです。