この記事はSchoo Advent Calender 2024の1日目の記事になります。
こんにちは。今年の6月に入社したフロントエンドエンジニアの @okuto_oyama です。オンボーディングやキャッチアップをしながら、あれやこれやと業務をこなしている間にもう半年が経とうとしています。
11月からは技術戦略部門に所属し、会社全体の技術的なビジョンとアーキテクチャ策定や体制づくりをするミッションとなっています。
最近はフロントエンド開発指針の見直しや新環境に向けたPoC検証、デザインシステム開発のサポート、DatadogのRUM導入支援やモニタリングなどを細々とやっています。
Schooアドベントカレンダー最初の記事では、フロントエンド開発にまつわる周辺技術が今年どれだけアップデートされたかを見つつ2024年を振り返ってみる内容をお送りいたします。
ライブラリも無限にあるので対象とするものを明確にするため以下のジャンルで括ろうと思っております。
- フロントエンドフレームワーク
- メタフレームワーク 1
- ランタイム
- CSS
- UIフレームワーク
- パッケージマネージャ
- モバイル＆デスクトップアプリ
- ビルド・バンドルツール
- モノレポツール
- バックエンドフレームワーク
- テストツール
- リンター・フォーマッターツール
- 型ツール
できる限り主要なものは収集していますが、あのライブラリ・フレームワークが入ってないじゃん！となった場合はすみません。
バージョン比較のレギュレーションについては以下で行う形になります。
レギュレーション
- CHANGELOGやリリースノートを参考にしたバージョン表記
- α、β、RCやCanaryなどのプレリリースバージョンは含めない
- 今年一年でプレリリースを除くバージョンアップがなかったものは除く
- メジャーバージョンが上がったものは太字で表記する
それでは、いってみましょう。
フロントエンドフレームワーク
| 2023/12/31時点の最新バージョン | 2024/12/1時点の最新バージョン | |
|---|---|---|
| React | v18.2.0 | v18.3.1 |
| Vue.js | v3.4.3 | v3.5.13 |
| Angular | v17.0.8 | v19.0.1 |
| Svelte | v4.2.8 | v5.3.0 |
| SolidJS | v1.7.0 | v1.9.0 |
| Preact | v10.19.3 | v10.25.0 |
| Alpine.js | v3.13.3 | v3.14.5 |
| Qwik | v1.2.14 | v1.11.0 |
| htmx | v1.9.10 | v2.0.3 |
| Lit | v3.1.0 | v3.2.1 |
| Stencil | v4.9.0 | v4.22.3 |
フロントエンドフレームワークでメジャーアップデートがあったものはAngular、Svelte、htmxになります。
Angularは2回のメジャーバージョンアップにおいてサーバーサイドレンダリング機能の改善・強化がされています。その他、昨年発表されたリアクティブプリミティブであるSignal APIがStable化、v18のアップデートに際してAngularの公式ドキュメントサイトが刷新されました。
Svelte v5の目玉としてはRunes APIがあげられます。リアクティブシステムの刷新として宣言により明確に処理がわかりやすくなりました。
ReactではReact 19に向けた更新準備が進められています。アプリケーションを最適化をするための新しいコンパイラであるReact Compilerの発表もありました。
メタフレームワーク
| 2023/12/31時点の最新バージョン | 2024/12/1時点の最新バージョン | |
|---|---|---|
| Next.js | v14.0.4 | v15.0.3 |
| Remix | v2.4.1 | v2.15.0 |
| Gatsby | v5.13.1 | v5.14.0 |
| Nuxt | v3.9.0 | v3.14.1592 |
| SvelteKit | v2.0.6 | v2.9.0 |
| SolidStart | v0.4.2 | v1.0.10 |
| QwikCity | v1.2.14 | v1.11.0 |
| Redwood | v6.6.0 | v8.4.1 |
| Astro | v4.0.7 | v4.16.16 |
| Docusaurus | v3.0.1 | v3.6.3 |
| VitePress | v0.22.4 | v1.5.0 |
| Lume | v2.0.1 | v2.4.2 |
| Analog | v0.2.29 | v1.9.4 |
メタフレームワークでメジャーアップデートがあったものはNext.js、Redwood、SolidStart、VitePress、Analogになります。
SolidStart、VitePress、Analogは今年からv1.0.0にアップデートがなされました。
Next.jsではGETルートハンドラーとクライアントルーターキャッシュをデフォルトではキャッシュしないようにするCaching Semanticsという大きな変更が入りました。その他、React 19 RCの採用やTurbopack DevのStableも含まれています。
Remixは今年のReact SummitにてReact Routerへのブランド統合が発表されました。11月22日にReact Router v7への更新があり、そちらへのアップデートを勧められています。
Nuxtでは次期バージョンに向けての設定からv4の機能を使えるフラグ（compatibilityVersion）を用意しており、アップデートの追従をしやすくしています。
ちなみに現在は変わったバージョンになっていますが、これは3.14のリリースに際して小数点のようなバージョン更新をしていくとのことです。今後hotfixがあった際は後ろの数字が増えていくそうです。
Astroではv4.12よりServer Islandsという静的HTMLと動的に生成されたサーバーコンポーネントを組み合わせられる機能が実験的に導入されております。
Docusaurusでは「Docusaurus Faster」というビルド時間とメモリ消費を大幅に削減させるプロジェクトにおいて、Rustベースでのツールを使用しビルド時間の高速化ができるようなオプションを追加しました。
ランタイム
| 2023/12/31時点の最新バージョン | 2024/12/1時点の最新バージョン | |
|---|---|---|
| Node.js | v21.5.0 | v23.3.0 |
| Deno | v1.39.1 | v2.1.2 |
| Bun | v1.0.20 | v1.1.38 |
| Hermes | v0.12.0 | v0.13.0 |
ランタイムでメジャーアップデートがあったものはNode.jsとDenoになります。
今年はNode.js v22がLTS（Long Term Support）になり、最新版としてv23が公開されました。大きな目玉としてはrequire()でESMを読み込む機能が搭載されました。top-level awaitを使用しているものはエラーとなって使えませんが、それを除けばESMのみで配布されているパッケージをCJSの環境でも使えるようになりました。
また、yarnやpnpmの管理を容易にするCorepackのNode.js本体からの削除計画が進んでいるという話も今年ありました。
Denoはv2となり新たなパッケージ管理方法が追加され、今年発表されたJSR（the JavaScript Registry）のサポートも入りました。v1とは異なるものとしてDenoの標準ライブラリ「deno_std」は本体と分離されたり、Node.js互換性を高めていくなども変更点として挙げられます。
Bunはv1.1.28よりC言語のコンパイルとJavaScriptプログラムからの実行ができるようになりました。
CSS
| 2023/12/31時点の最新バージョン | 2024/12/1時点の最新バージョン | |
|---|---|---|
| Tailwind CSS | v3.4.0 | v3.14.5 |
| UnoCSS | v0.58.2 | v0.64.1 |
| Panda CSS | v0.23.0 | v0.48.0 |
| styled-components | v6.1.6 | v6.1.13 |
| vanilla-extract | v1.14.0 | v1.16.1 |
| StyleX | v0.3.0 | v0.9.3 |
取り上げているCSS関連のものでメジャーアップデートがあったものは特にありません。
Tailwind CSSについては来年リリースされる予定のv4に向けてベータ版が公開されています。
UIフレームワーク
| 2023/12/31時点の最新バージョン | 2024/12/1時点の最新バージョン | |
|---|---|---|
| Chakra UI | v2.8.2 | v3.2.2 |
| Material UI | v5.15.2 | v6.1.9 |
| Ant Design | v5.12.7 | v5.22.2 |
| NextUI | v2.2.9 | v2.4.8 |
| Nuxt UI | v2.11.1 | v2.19.1 |
| Angular Material | v17.0.4 | v19.0.1 |
| SvelteUI | v0.15.3 | v0.15.7 |
| daisyUI | v4.4.24 | v4.12.14 |
| Kuma UI | v1.5.5 | v1.5.8 |
| Yamada UI | v1.1.1 | v1.7.0 |
| Bootstrap | v5.3.2 | v5.3.3 |
UIフレームワークでメジャーアップデートがあったものはCharkra UI、Material UI、Angular Materialです。
Chakra UIのv3では、パフォーマンス・速度・コンポーネントの一貫性を向上させるために新たな設計で書き直されるようになりました。
MUIのv6では試験的にPigment CSSというゼロランタイムのスタイリングライブラリが導入されるようになりました。
パッケージマネージャ
| 2023/12/31時点の最新バージョン | 2024/12/1時点の最新バージョン | |
|---|---|---|
| npm | v10.2.5 | v10.9.1 |
| yarn | v1.22.21 | v1.22.22 |
| yarn berry | v4.0.2 | v4.5.3 |
| pnpm | v8.13.1 | v9.14.4 |
パッケージマネージャでメジャーアップデートがあったものはpnpmになります。
pnpmはv9のバージョンアップにおいてCorepackとの互換性を維持するようになりました。
モバイル＆デスクトップアプリ
| 2023/12/31時点の最新バージョン | 2024/12/1時点の最新バージョン | |
|---|---|---|
| React Native | v0.72.8 | v0.76.3 |
| Expo | v50.0.0 | v52.0.0 |
| Electron | v28.1.0 | v33.2.1 |
| Capacitor | v5.6.0 | v6.2.0 |
| Tauri | v1.5.4 | v2.1.1 |
| NativeScript | v8.6.2 | v8.8.6 |
モバイル＆デスクトップアプリでメジャーアップデートがあったものはExpo、Electron、Tauriになります。
React Nativeはv0.76.2より新たなアーキテクチャを採用するようになりました。コンポーネントのレンダリング方法、JavaScript 層からNativeコードを同期的に呼び出せるようになったこと、異なるスレッド間での作業のスケジューリング方法、アプリの起動速度や全体サイズの削減などの改善も行われています。
Tauriのv2では今までデスクトップOSだけが対象だったところをiOS、AndroidのスマートフォンOSにも対象を拡張しています。
Rust製の新たなブラウザエンジン「Servo」をTauriのWebレンダリングライブラリとして取り組むプロジェクトも始まっています。
ビルド・バンドルツール
| 2023/12/31時点の最新バージョン | 2024/12/1時点の最新バージョン | |
|---|---|---|
| Vite | v5.0.10 | v6.0.1 |
| SWC | v1.3.102 | v1.9.3 |
| esbuild | v0.19.11 | v0.24.0 |
| Parcel | v2.11.0 | v2.13.2 |
| Rollup | v4.9.2 | v4.28.0 |
| Webpack | v5.89.0 | v5.96.1 |
| Rspack | v0.4.5 | v1.1.4 |
| Rolldown | - | v0.14.0 |
ビルド・バンドルツールでメジャーアップデートがあったものはVite、Rspackになります。
ByteDance内では、Rspackの週間ダウンロード数は40万を超え、TikTokなどのいくつものアプリケーションにて使用されています。マイクロフロントエンドのアーキテクチャパターンでもある「Module Federation」のv2がサポートされています。
Viteのv6ではEnvironment APIという異なるランタイムでの複数のバンドルを可能にする実験的機能がリリースされました。
RustのJavaScriptバンドラーツールであるRolldownも今年ついに公開となりました。まだ安定版にはなっておりませんが、来年以降でViteへの取り込まれエコシステム全体が改善していけることが期待されています。
モノレポツール
| 2023/12/31時点の最新バージョン | 2024/12/1時点の最新バージョン | |
|---|---|---|
| Lerna | v8.0.1 | v8.1.9 |
| Turborepo | v1.11.2 | v2.3.3 |
| Nx | v17.2.8 | v20.1.4 |
| Bazel | v7.0.0 | v7.4.1 |
| Rush | v5.112.2 | v5.141.3 |
| moon | v1.18.5 | v1.30.2 |
モノレポツールでメジャーアップデートがあったものはTurborepo、Nxになります。
Turborepoはv2のアップデートに伴い、ライセンスをMITに変更し、LTSのポリシーが追加されました。
Nxではv18のリリースに伴いLaunch Nx Weekという発表イベントを行いました。その中でProject CrystalというNxプラグインの利用を簡単にして、開発者が効率的に作業を進めるためのツールについて発表されました。
バックエンドフレームワーク
| 2023/12/31時点の最新バージョン | 2024/12/1時点の最新バージョン | |
|---|---|---|
| Express | v4.18.2 | v5.0.1 |
| Koa | v2.15.0 | v2.15.3 |
| Fastify | v4.25.2 | v5.1.0 |
| NestJS | v10.3.0 | v10.4.12 |
| Hono | v3.11.11 | v4.6.12 |
バックエンドフレームワークでメジャーアップデートがあったものはExpress、Fastify、Honoになります。
Expressは10年もの時を経て（！）v5にアップデートされました。昨今のオープンソースのサプライチェーンセキュリティの強化のためにセキュリティ監査を実施するようになっています。ReDoS攻撃のリスクを下げるために、サブエクスプレッションの正規表現（/:foo(\\d+)のような形）でのサポートが削除されました。
Honoではv4より静的サイトジェネレーター、Client Components、ファイルベースルーティングなどよりフルスタックに扱えるための機能が搭載されました。
テストツール
| 2023/12/31時点の最新バージョン | 2024/12/1時点の最新バージョン | |
|---|---|---|
| Vitest | v1.1.1 | v2.1.6 |
| Mocha | v10.2.0 | v10.8.2 |
| Playwright | v1.40.1 | v1.49.0 |
| WebdriverIO | v8.27.1 | v9.4.1 |
| Cypress | v13.6.2 | v13.16.0 |
| Selenium | v4.16.0 | v4.27.0 |
| Puppeteer | v21.6.1 | v23.9.0 |
| Storybook | v7.6.6 | v8.4.6 |
| Mock Service Worker | v2.0.11 | v2.6.6 |
テストツールでメジャーアップデートがあったものはVitest、WebdriverIO、Puppeteer、Storybookになります。
Vitestはv2.0よりBrowser ModeがExperimentalな機能として搭載されました。これにより実際のブラウザ上でVitestによるテストが実行できるようになりました。
クロスブラウザでのテスト自動化の次世代標準プロトコルであるWebDriver Bidiの採用をWebdriverIOでも取り入れるようになりました。こちらはSeleniumやPuppeteerでも採用されています。
Storybookは厳密にはテストツールの分類ではないですが、今やフロントエンドテストツールとして不動の地位を築き上げつつあります。
Chromaticを取り込んだ新たなビジュアルテスト、テストの高速化ができるオプションの追加がされています。他にはreactとreact-domのpeer dependencyも取り除かれているためReact以外のフロントエンドフレームワークフレンドリーになっています。
リンター・フォーマッターツール
| 2023/12/31時点の最新バージョン | 2024/12/1時点の最新バージョン | |
|---|---|---|
| ESLint | v8.56.0 | v9.16.0 |
| Stylelint | v16.1.0 | v16.11.0 |
| Prettier | v3.1.1 | v3.4.1 |
| Biome | v1.4.1 | v1.9.4 |
| oxlint | v0.0.22 | v0.14.0 |
リンター・フォーマッターツールでメジャーアップデートがあったものはESLintになります。
ESLintではv9のバージョンアップに伴い、Flat Configがデフォルトの設定ファイル形式となりました。次のv10では過去の設定ファイルが廃止となるため、今のうちに移行を進めておくのが良さそうです。
Biomeではv1.6よりAstroとSvelteとVue.jsの部分サポート、v1.9よりCSS、GraphQL、.editorconfigのフォーマットサポートが入りました。
Prettierは次のv4に向けてprettier-cliのパフォーマンス改善を行なっているようです。
型ツール
| 2023/12/31時点の最新バージョン | 2024/12/1時点の最新バージョン | |
|---|---|---|
| TypeScript | v5.3.3 | v5.7.2 |
| flowtype | v0.225.0 | v0.255.0 |
型ツール関連でメジャーバージョンが上がったものはありませんでしたが、TypeScriptのバージョンについてはsemverで運用されていないため、マイナーバージョンアップに伴いいくつもの変更が入っています。
- Announcing TypeScript 5.4 - TypeScript
- Announcing TypeScript 5.5 - TypeScript
- Announcing TypeScript 5.6 - TypeScript
- Announcing TypeScript 5.7 - TypeScript
おわりに - 個人的振り返りと来年以降の予測
今年はいくつかのメジャーアップデートはありましたが、個人的な感想としては、開発者にとっては目まぐるしい変化というものはそこまでなかったように思いました。
バージョンアップでの破壊的変更についてもいくつかエスケープハッチとなる対応（旧式と併用して扱えるなど）が含まれていたり、より良い方向へ改善するための変更が含まれていると感じています。
エコシステム周りのパフォーマンスを改善するイニシアチブであるe18eが設立されたこともあり、Web開発者にとってより利用しやすくパフォーマンスを重視したツールが増えてくるのではないかと思っています。逆にツールチェインの開発者にとっては、Rustを中心としてこれまでとは違った技術を取り入れることが求められるかもしれません。
これまでのアップデートの変遷を振り返ってみて、来年以降のフロントエンド技術動向はどうなるかを予測してみました。あくまでも私の予測なので参考程度ということで…。
- 脱仮想DOMでの宣言的UIが主流となる（Fine Grained Reactivityの実現）
- サーバーコンポーネントの普及に伴うクライアントとサーバーとの境界がより曖昧に
- Next.jsのキャッシュ機能に振り回されなくなったことでのフレームワーク選択肢の多様化
- 代わりにPages Routerがなくなるかもしれない
- VoidZeroを中心としてJavaScriptツールチェインのエコシステムが賑わう
- パフォーマンスを重視したものが価値として優先されていく
というわけで今日までの動向を振り返ってみましたが、今年の残りにもいくつかの変更やリリースがあるかもしれません。引き続きフロントエンド技術周辺を見守っていこうと思います。
参考記事
- ランタイム
- UIフレームワーク
- モバイル＆デスクトップアプリ
- ビルド・バンドルツール
- テストツール
- Announcing VoidZero - Next Generation Toolchain for JavaScript | VoidZero
- TSKaigi 2024 Prettierの未来を考える スピーカーノート
明日の12月2日は@hiroto_0411による「Schooの新卒エンジニアが8ヶ月を振り返ってみた」になります。お楽しみに！
Schooでは一緒に働く仲間を募集しています！
-
とあるフロントエンドフレームワークを基にアプリケーションのレンダリングと配信に重点を置いたフレームワークと定義 ↩