「State of JavaScript 2024」完全解説:最新トレンドと注目ポイント
こんにちは、フロントエンドエンジニアのてりーです。
React + TypeScriptを5年以上使い続け、派遣 → フリーランス → メガベンチャーとキャリアを積んできました。
詳しいキャリアや学習ロードマップについてはこちらからどうぞ!
1. State of JavaScriptとは?
State of JavaScriptは、JavaScriptエコシステムの最新動向を調査・分析し、世界中の開発者に共有するための年次レポートです。
毎年世界中のエンジニアにアンケートを取って、JavaScriptに関わるリアルな現状を知る事が出来ます!
近年はJavaScript以外にもHTML、CSS、GraphQL、Reactなども年次レポートを出しているようです。
それではレポートの内容を見ていきましょう!
2. 言語機能:進化するJavaScript
JavaScriptは毎年新しい言語機能が追加され、エンジニアの生産性を高めています。
主だった機能を見ていきましょう!
Null合体演算子(??)
ECMAScript 2020(ES11)で導入されましたが、だいぶ浸透してきていますね!
使い方
Null合体演算子は、左辺の値がnullまたはundefinedの場合に右辺の値を返し、それ以外の場合は左辺の値を返します。
let value = null;
let result = value ?? 'デフォルト値';
console.log(result); // 'デフォルト値'
この演算子は、0や空文字列などのfalsyな値を有効な値として扱いたい場合に有用です。
string.replaceAll()
ECMAScript 2021(ES12)で導入されました。
使い方
replaceAll()メソッドは、文字列内の指定した部分文字列をすべて置換します。
let text = 'apple, apple, apple';
let newText = text.replaceAll('apple', 'orange');
console.log(newText); // 'orange, orange, orange'
従来のreplace()メソッドは最初の一致のみを置換していましたが、replaceAll()はすべての一致を置換します。
array.toSorted()
ECMAScript 2023(ES14)で導入されました。
使い方
toSorted()メソッドは、元の配列を変更せずに、新しいソート済みの配列を返します。
let numbers = [3, 1, 4, 1, 5];
let sortedNumbers = numbers.toSorted();
console.log(sortedNumbers); // [1, 1, 3, 4, 5]
console.log(numbers); // [3, 1, 4, 1, 5]
従来のsort()メソッドは元の配列を直接変更していましたが、toSorted()は元の配列を変更せず、新しい配列を返すため、不変性を保つコードを書く際に有用です。
3. フレームワーク:Reactがトップ!Angularも右肩上がりな1年
次はフレームワークについて見ていきましょう!
使用率はReactが9連覇で圧倒的!
こちらがフレームワーク別の使用率です!
今年もReactの優位は揺るがなかったですね。ここ3年ぐらいは上位のReact、Vue、Angularの使用率はほとんど変化がないようでした。
Svtelteは2022年ぐらいから軽量なフレームワークとして頭角を表し、2024年現在では徐々に使用率が上がってきているものの、上位3つのフレームワークに食い込む勢いは無さそうでした!
満足度はVueとAngularが右肩上がりに!
次に使用率と満足度の推移を表した図を見ていきましょう!
X軸が満足度、Y軸が使用率となっています!
右上のゾーンはReactのみですね!
使用率も高く、満足度もずっと高い状態でしたが年々少しずつ満足度が下がっているようです!
とはいえ、これはずっと使われ続けているが故の落ち込みといった感じなので、まだまだ好意的な意見が多いようです!
真ん中あたりではAngularとVueがそれぞれ、近年好意的な意見が増えてきています!
特に2024年はAngularの右肩上がりが凄まじかったですね!
React
Nuxtとの連携が進む中で、複雑さが増している事が満足度低下の原因かと思います!
また、バンドルサイズの大きさも懸念されていて、近年はPreactなどの軽量な代替フレームワークも出てきている状況です!!
Vue
VueはVue3を出したあたりから、Piniaによる状態管理やViteとの相性が良くなった点が評価されていそう!
Angular
AngularはTypeScriptのサポートやStandalone Componentsの導入によって、複雑だったNgModuleが不要になった事が、今年度の満足度回復に一端を担っているようです!
Standalone Componentsについて詳しく学習したい方はこちらが良さそう!
Svelte
Svelteは3大フレームワークと比べた時の軽量さや、コンパイルベースの設計であるという特徴を活かして、徐々に使用率を増やしています!
今までは小規模な開発に向いているという印象でしたが、2024年の10月にはSlevte 5のリリースのより、大規模開発にも対応可能となりさらに注目度が増しています!
4. メタフレームワーク:今年もNext.jsが圧倒的
次はメタフレームワークを見ていきましょう!
ReactベースのメタフレームワークであるNext.jsが圧倒的ですね!
その他のNuxt、Gatsby、Remix、Sveltekitは昨年からの大きな変化はなさそうですが、Astroが台頭してきているように見えます!
Next.js
Next.jsは単なるUIライブラリだったReactがSSR対応をして様々なアプリケーションに対応出来る形にしたものです!
フロント界隈はReact+Next.js一択!となる程の人気フレームワークとなっていましたが、近年はより複雑になったエコシステムに対して、懸念もあるようです!
Remix開発者 Kent・C・dotsの「Next.jsを使わない理由」という記事
それに対するVercelのVPoEのアンサー記事
Astro
Astroは近年フロントエンド界隈で導入事例も多いマイクロフロントエンドとの相性が良い点が魅了のフレームワークです!
React、Vueなどメインとのインテグレーションがサポートされています!
UIコンポーネントをアイランドと呼び、インタラクティブなUI部分だけをJavaScript
ベースで作成し、他の静的な部分はサーバー側でのレンダリングする事で、従来のSPAよりパフォーマンスが高く、高速なページ読み込みを可能としています!
5. テスト:Vitestが急速に人気に!
次はテストを見てきましょう!
近年はJestが使用率は圧倒的ですね!
Unit Testやモッキング機能などオールインワンで入っている為、とりあえずJestを入れておけばOK的な状態になってそうですね!
Storybookはコンポーネント駆動開発には欠かせないツールです!コンポーネントをアプリケーションから切り離して個別に開発・テストを進める事が出来ます!
その結果、UIカタログのように扱えうこともできる為、エンジニア以外でも参照しやすいです!
CypressはブラウザでのE2Eのテストツールですね!
目を見張るのが4位のVitest!
ここ数年で圧倒的な右肩上がりを見せています!
ビルドツールのViteをベースとしたユニットテストのフレームワークです!
Jest vs Vitest(ユニットテスト)
近年のテストツールにおいては、実行速度と開発者体験(DX)が重要な要素と考えられています!
導入コストVitestはViteを採用しているプロジェクトなら、Vitestをそのまま組み込むだけで使用出来る点が便利です!
Viteを採用しているプロジェクトが増加傾向なので、このメリットは大きいと感じます!
また、テスト実行速度がJestと比べて高速で、ホットリロードが効いている点も良いです。
対するJestはViteプロジェクト以外で扱える点、ユニットテスト以外のモック作成、スナップショットテストなどテスト関係をオールインワンで扱える点が魅力です!
Cypress vs Playwright(E2Eテスト)
次にE2Eのテストツールを見てみましょう!
Cypressはセットアップが新婦つで、直感的なUIでテスト実行できる点が魅力!!
対応ブラウザがChromiumベースとなってしまうのが、難点。
シンプルで初心者にも使いやすい印象!
PlaywriteはCypressに比べてより高機能で、、出来る事も多い!
複数ブラウザでへの対応も行なっている!
クロスプラットフォームに対する対応や、ネットワークのシミュレーションもしやすく、モダンな開発や複雑なアプリケーションのE2Eテストにも対応可能!
6. モバイル・デスクトップツール
次にモバイル・デスクトップツールを見ていきましょう!
使用率はElectronとReact Nativeがほぼ同率で近年は推移しています!
Native AppとCordovaは減少傾向。
その他のツールで右肩上がりな傾向を見せるツールはありませんでした。
興味という観点だとTuariとExpoが注目度が高まっているようです!
7. ビルドツール
次はビルドツールを見ていきましょう!
webpackが使用率1位ですが、その牙城を来年には崩しそうな勢いでViteが右肩上がりです!
webpackはポジティブな意見が年々減少していますが、Viteは極めて高い!
こういった状況からもビルドツールのデファクトスタンダードはwebpackからViteに移行しつつあるのは間違いないですね!
Vite
ViteはEvan YouというVue.js作者が開発しやツールである為、Vue.jsやNuxt.jsを使用する場合はほとんど脳死で扱うことになります!
2023年のアワードもほとんど総なめしている、近年で一番伸びているツールだと思います!
Viteとは?に関してはこの記事がよくまとまっています!
8. 使用状況
この章では様々なツールの使用状況がまとめられていました!
JavaScript vs TypeScript
JavaScriptとTypeScriptの使用率です!
下に行くほど割合が増えているので、TypeScript100%で扱っているパターンが最も多いですね!
約6割の人はほとんどをTypeScriptに移行しているようです!
逆に約2割の現場では、大部分がJavaScriptであるようです!
フロントエンド界隈はTypeScriptが中心になっているが、JavaScriptでの記述はそれなりに残っているようです!
AIを使う・使わない
近年の興味深いテーマである、生成AIを使ったコーディング支援ですね!
2024年はChatGPT以外にも copilotなどの様々なAIが実務レベルで使われるようになったと感じています!
結果はこちら
AIを全く使わない~25%ほど使うを合わせると8割越えですね!
ほとんどの人がまだまだ補助程度でしかAIによるコーディング支援を受けていないようです!
確かに自分もググる代わりにChatGPTとやり取りしたり、リファクタリングをcoplitに書いて貰ったりぐらいしかまだまだ活用出来ていません!
まとめ
1年を振り返ったアワードはこんな感じでした!
- 「また使いたい」が一番多い:Vite
- 満足度が一番高い:Vitest
- 「学びたい」が一番多い:Rolldown
- 自由記入欄での記入が一番多い:Analog
- 最もコメントが多い:Angular
- 最も肯定的な意見が多い:Vite
Analogは初めて聞いたのですが、Angularベースのフレームワークのようです!
Angularのエコシステムを活用しながら、React・Vueに近い軽量で直感的な開発体験をもたらせてくれるようです!
RolldownはRust製のJSバンドラのようです!
詳しく知りたい方はこちら
Discussion