2022年、フロントエンドで注目されているJavaScriptやCSSのフレームワーク・ライブラリ・ツール・エディタ・機能などのまとめ

2022年、フロントエンドで注目されているJavaScriptやCSSのフレームワーク・ライブラリ・ツール・エディタ・機能などを紹介します。

今使用しているものはどんな感じか、これから勉強するならどれがよいか、知らない便利なツールや機能はないかなど、フロントエンドの制作で参考になる資料です。

2022年、フロントエンドで注目されているフレームワーク・ライブラリ・ツール・機能などのまとめ

State of frontend 2022

State of frontend 2022は、125か国のフロントエンドデベロッパーにアンケートをおこない、注目されているフレームワーク・ライブラリ・ツール・機能などをまとめたものです。

ここ2年のコロナ禍により、勤務形態が大きく変化しました。データは2022年と2020年の状態も比較できます。

フロントエンドデベロッパーの勤務形態

あなたの勤務形態は?

56%の人がリモートワークをしており、オフィスで働いている人はわずか5%でした。2020年の調査ではこのアンケートをおこなっていませんが、リモートワークの概念は新しいものです。今後の課題は、フルリモートワークがこのまま増え続けるのか、それともハイブリッドワークがより人気を博すのか、というところです。

フロントエンドデベロッパーの経験年数

フロントエンドに携わって何年ですか?

経験年数は5年、10年、3年の順で多く、2020年は5年、3年、1年でした。

人気のフレームワーク

過去1年間でフレームワークのうちどれを使用し、気に入りましたか?

Reactの人気が高く、Vue.jsも人気が高いですが、2022年ではNext.jsに勢いがあります。デベロッパーはより速く、より信頼性の高い作業を行うために、メタフレームワークにますます注目するようになっているようです。

人気のデザインシステム

過去1年間でデザインシステムのうち、どのソリューションが気に入りましたか?

自身でカスタマイズしたソリューションの人気が高く、次いでMaterial UI、Tailwind UI、Bootstrapとなっています。24%を超えるデザインシステムは存在せず、これはフレームワークの大部分を占めるReactとの決定的な違いです。

人気のCSSツール

過去1年間でCSSツールのうち、どれが一番好きなソリューションでしたか?

約半数がSCSSを使用しており、最近ではTailwind CSSにも注目されているようです。Sassを使用する理由のトップは変数だと思いますが、CSSの変数(カスタムプロパティ)が登場し、そのサポートは十分にあり、Sassの変数の必要性はほとんどなくなっています。ネストもCSSの標準化団体で盛り上がりを見せており、今後、Sassの使用率に影響を与えるかどうかが注目されます。

人気の開発ツール

過去1年間で開発ツールのどれを使いましたか?

オンラインのコードエディタを使用して仕事をすることに興味を持つ人が増えてきていることがわかります。クラウドによって開発がよりアクセスしやすくなり、協調的になります。クラウド開発への移行は思っているよりもはるかに早く起こるかもしれません。

人気のエディタ

お気に入りのコードエディタは何ですか?

Visual Studio Codeが一強です。フロントエンドの開発においてエディタのリーダーで、より高速でクロスプラットフォームで動作するように日々多くの改善が行われています。また、VS Codeをオンラインで使用できるようになったことで、オンラインエディタの戦争にも乱れが生じています。

人気のバージョン管理

お気に入りのバージョン管理は何ですか?

GitHubは多くのデベロッパーにとって明確な選択であり、不思議ではありません。GitHubが長年にわたって導入してきたさまざまな機能、GitHub Action、CodeSpaces、VS Code Online、新しいGitHubコード検索など、これらすべての機能がデベロッパーの日常生活をを快適にしているか、数え上げればきりがありません。

2年後に人気が出そうなもの

2年後に人気が出そうなもの、枯れてしまいそうなものはどれですか?

フロントエンドは安定フェーズに入っている可能性があります。アクセシビリティ、クロスプラットフォームアプリケーション、サーバーサイドレンダリングの3つが特に注目されており、Micro frontends、Online page builders、JAMstackあたりは少し停滞するかもしれません。

State of frontend 2022のデータは、ページ上部の左下「Give me a free copy」からダウンロードできます。

サイトのキャプチャ

State of frontend 2022

sponsors

top of page

©2022 coliss