フロントエンドのトレンドは変化したか？アンケート結果から分析する2022年のウェブ制作

2022年7月19日公開 / 株式会社ICS 池田泰延

ウェブ業界の当たり前だと思っていることでも、他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・、この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。

連載8回目となる本記事では「フロントエンドエンジニアの移り変わり」をテーマとしてアンケート結果を紹介します。

あなたが最近使っているJavaScriptライブラリ/フレームワークはどれ？（2022年版）

国内で最近人気のあるJavaScriptライブラリ/フレームワークはどれでしょうか。

5,168票の回答があり「React」が46.67%、「Vue」が23.9%、「Angular」が4.3%、「jQuery」が25.1%でした。

3年前の2019年にアンケートをしたとき（参照記事）は「React」が23%、「Vue」が37%、「Angular」が7%、「jQuery」が33%でした。この3年間でReactがVueを上回り、23ポイントをあげたことになります。jQueryは依然として大きなシェアをもっていますが、下降傾向です。

TypeScriptで作っている？

TypeScriptは2016年以降に急速にシェアを伸ばしています。Reactの開発でTypeScriptを使っているか質問しました。

628票の回答があり「JavaScript」が32%、「JavaScript + Flow」が1.1%、「TypeScript」が65.1%、「CoffeeScript」が1.8%でした。ReactではTypeScriptを用いて開発しているエンジニアが6割を超えています。

たいして、同様の質問をVue.jsユーザーへアンケートをしました。

284票の回答があり「JavaScript」が59.2%、「TypeScript」が36.3%、「CoffeeScript」が1.1%、「その他」が3.5%でした。

Reactに対して、Vue.jsはJavaScriptの割合が増えます。TypeScriptを使ってフロントエンドを開発したい方はReactを、JavaScriptを使って開発したい方はVue.jsを使う傾向があると言えそうです。Vue.jsはCDN経由でもサクッと使えることも影響があるかもしれません（関連記事『HTMLにちょい足しでできる！ Vue.jsでサクッと動きをつける方法』）、

デフォルトエクスポートは使う？

国内のフロントエンドエンジニアには、ES Modulesのdefault exportが望ましくないという風潮があります。たいして、Reactのチュートリアル（現行版：関数コンポーネント、ベータ版：Using a component）ではdefault exportが使われています。どちらを使う方が多いのでしょうか？

433票の回答があり「デフォルトエクスポート」が40.6%、「名前付きエクスポート」が53.1%、「lazy()のときだけデフォルトエクスポート」が2.5%、「そもそもエクスポートを使わない！」が3.7%でした。

また、アロー関数式かfunction関数宣言のどちらでコンポーネントを宣言するかも質問しました。

283票の回答があり「アロー関数式」が84.1%、「function関数宣言」が12.4%でした。Reactの公式ドキュメントでは、function関数宣言で説明されており、アンケート結果と隔たりが明らかになりました。Reactを学ぼうとする方が困るポイントかもしれません。

フロントの単体テスト

フロントエンドの単体テストはJestやJasmine等のライブラリを利用して行えます。WebStorm等のIDEではJestが統合されており効率良く単体テストを行えます。フロントエンドの開発で、単体テストをおこなっているか質問しました。

429票の回答があり「カバレッジ100%でやっている」が3.3%、「やっている」が21.9%、「やっていない」が42%、「単体テスト、何それ？」が32.9%でした。「やっていない」「何それ」をあわせると7割超です。ウェブ制作でフロントの単体テストが必ずしも必要とも限らないことを示しているように思います。

yarnとnpm

フロントエンドの開発ではパッケージマネージャーを利用して、環境構築するのが一般的です。パッケージマネージャーにはさまざまな種類があるので、どれがよく使われているか質問しました。

349票の回答があり「npm」が67%、「yarn」が27.5%、「pnpm」が0.3%、「パッケージマネージャーなんて使わない！」が5.2%でした。

5年前の2017年にアンケートを実施したときは「npm」が72%、「yarn」が19%でしたので、8ポイントほどyarnの利用率が向上しています。新機能について、yarnが先行して、npmが追従する傾向があります。しかし、機能差は少なくなっていることから、デフォルトのnpmが安定して利用率が高いようです。

記事『yarn と npm の栄枯盛衰 | Nullable』も参考にするといいでしょう。

空タグはOK？

中身のない空のdiv要素や、空のspan要素を使ってもいいか質問しました。

1142票の回答があり「まったく問題ない」が27.5%、「多少は問題ない」が56.2%、「ダメ」が16.3でした。

AVIF画像形式を利用しているか？

AVIFは新しい画像形式で、小さなファイル容量で高い画質を得られるメリットがあります。AVIF画像形式を使ってウェブ制作をしている方はどのぐらいいるのでしょうか？

414票の回答があり「よく使っている」が1.7%、「少し使っている」が1.4%、「使っていない」が50.5%、「AVIFを知らない」が46.4%でした。

2021年後半ごろからWebP画像形式が多くのブラウザで利用可能となったことで、ようやくWebPが浸透しはじめてきました。WebPの登場が2012年だったので、ウェブ制作で一般的に利用できるようになるまで10年かかったと言えそうです。次世代のフォーマットであるAVIFは普及までどのぐらい年数を必要とするのでしょうか。

AVIF画像形式はChrome、Edge、Firefoxの最新版で表示可能です。執筆時点ではSafariは未対応ですが、今秋登場予定のiOS 16やmacOS VenturaにはAVIFが対応するという噂もあります。

参考記事

Tailwind CSSってどう？

Tailwind CSSはユーティリティーファーストなCSSフレームワークです。利用経験がなくとも耳にしたことのあるエンジニアは多いでしょう。利用状況と満足度について質問しました。

1,262票の回答があり「利用していて、気に入っている」が11.1%、「利用していて、不満に思っている」が5.7%、「利用していない。が、気になっている」が41.3%、「利用していない。知らない or 関心がない」が41.8%でした。

WebGLやりたい？

ウェブで3D表現を実現するにはWebGLが選択肢にあがります。クリエイティブ系やアワード系（『Awwwards』『The FWA』『WebGL 総本山』）のウェブサイトではWebGLがよく採用されています。そんなWebGLについて、関心があるのか質問しました。

559票の回答があり「たくさんやってみたい！」が34.9%、「少しやってみたい」が50.1%、「やりたくない」が8.1%、「機会があっても興味なし」が7%でした。「やってみたい」という回答が85％を超えており、関心自体は大きそうです。

この結果を踏まえて、WebGLの案件を担当したことがあるか質問しました。

1180票の回答があり「1年に3案件以上で、WebGLを利用」が3.5%、「1年に1〜2案件ほど、WebGLを利用」が11.3%、「WebGL案件とは無縁」が64.8%、「WebGLって何？」が20.4%でした。興味の高さに反して、実務でWebGLを経験したエンジニアは少ない結果となりました。

WebAssemblyはどう？

WebAssemblyは高速な演算処理ができる技術です。どれだけ利用している方がいるのか質問しました。

340票の回答があり「1年に3案件以上」が0.9%、「1年に1〜2案件」が4.4%、「WebAssemblyとは無縁」が70.6%、「WebAssemblyって何？」が24.1%でした。WebGLよりも案件の経験者が少ないことをみると、WebAssemblyはよりニッチな技術といえそうです。

Chromeのデベロッパーツールは、英語と日本語のどちらで利用していますか？

377票の回答があり「英語」が59.7%、「日本語」が39.5%、「その他の言語」が0.3%、「DevToolsを使わない」が0.5%でした。

デベロッパーツールはChrome 94（2021年8月）から日本語でUIが提供されました。デベロッパーツールは専門的な項目が多く、英語が得意でない方にはとっつきにくい印象をもっていた方は少なくないでしょう。日本語も利用できるようになったことで、少しはとっつきやすくなったかもしれません。

デベロッパーツールは解説記事では英語で紹介されていることが多いので、英語のままのほうが使いやすいといった方も多いかもしれません。ICS MEDIAでも解説記事『ChromeのデベロッパーツールでJavaScriptをデバッグする方法』がありますが、英語UIで解説しています。

merge派？ rebase派

コードの開発ではGitを使って共同作業をすることが多いでしょう。ブランチの取り込み方法について質問しました。

551の回答があり「merge」が67.7%、「rebase」が20.7%、「margeもrebaseもほぼ使わない」が2.9%、「SVN派なので回答だけみたい」が8.7%でした。

mergeもrebaseもそれぞれ利点があるので、開発者の間で「何を大事にしたいか」を認識合わせをして運用するのがよいでしょう。

まとめ

「TypeScript利用者が多数派になった」、「React/Vue/Angularの人気に結論がでた」ことがわかりました。WebAssemblyも注目が高まっていますが（The State of WebAssembly 2022 － Publickey）、今後、どのぐらい伸びていくか気になるところです。

このようなアンケートは今後も実施していく予定です。興味があれば筆者のTwitterアカウントをフォローいただければ幸いです。今回のアンケート実施にあたり、回答やシェアを多数いただきました。ご協力いただいたことに感謝を申し上げます。