アーカイブ

フロントエンド技術周辺の​アップデートから​振り返る​2024年

出典元: qiita.com

この記事はSchoo Advent Calendar 2024の1日目の記事になります。

こんにちは。今年の6月に入社したフロントエンドエンジニアの @okuto_oyama です。オンボーディングやキャッチアップをしながら、あれやこれやと業務をこなしている間にもう半年が経とうとしています。

11月からは技術戦略部門に所属し、会社全体の技術的なビジョンとアーキテクチャ策定や体制づくりをするミッションとなっています。 最近はフロントエンド開発指針の見直しや新環境に向けたPoC検証、デザインシステム開発のサポート、DatadogのRUM導入支援やモニタリングなどを細々とやっています。


Schooアドベントカレンダー最初の記事では、フロントエンド開発にまつわる周辺技術が今年どれだけアップデートされたかを見つつ2024年を振り返ってみる内容をお送りいたします。

ライブラリも無限にあるので対象とするものを明確にするため以下のジャンルで括ろうと思っております。

できる限り主要なものは収集していますが、あのライブラリ・フレームワークが入ってないじゃん!となった場合はすみません。

バージョン比較のレギュレーションについては以下で行う形になります。

レギュレーション

それでは、いってみましょう。

フロントエンドフレームワーク

2023/12/31時点の最新バージョン2024/12/1時点の最新バージョン
Reactv18.2.0v18.3.1
Vue.jsv3.4.3v3.5.13
Angularv17.0.8v19.0.1
Sveltev4.2.8v5.3.0
SolidJSv1.7.0v1.9.0
Preactv10.19.3v10.25.0
Alpine.jsv3.13.3v3.14.5
Qwikv1.2.14v1.11.0
htmxv1.9.10v2.0.3
Litv3.1.0v3.2.1
Stencilv4.9.0v4.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.jsv14.0.4v15.0.3
Remixv2.4.1v2.15.0
Gatsbyv5.13.1v5.14.0
Nuxtv3.9.0v3.14.1592
SvelteKitv2.0.6v2.9.0
SolidStartv0.4.2v1.0.10
QwikCityv1.2.14v1.11.0
Redwoodv6.6.0v8.4.1
Astrov4.0.7v4.16.16
Docusaurusv3.0.1v3.6.3
VitePressv0.22.4v1.5.0
Lumev2.0.1v2.4.2
Analogv0.2.29v1.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.jsv21.5.0v23.3.0
Denov1.39.1v2.1.2
Bunv1.0.20v1.1.38
Hermesv0.12.0v0.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 CSSv3.4.0v3.14.5
UnoCSSv0.58.2v0.64.1
Panda CSSv0.23.0v0.48.0
styled-componentsv6.1.6v6.1.13
vanilla-extractv1.14.0v1.16.1
StyleXv0.3.0v0.9.3

取り上げているCSS関連のものでメジャーアップデートがあったものは特にありません。

Tailwind CSSについては来年リリースされる予定のv4に向けてベータ版が公開されています

UIフレームワーク

2023/12/31時点の最新バージョン2024/12/1時点の最新バージョン
Chakra UIv2.8.2v3.2.2
Material UIv5.15.2v6.1.9
Ant Designv5.12.7v5.22.2
NextUIv2.2.9v2.4.8
Nuxt UIv2.11.1v2.19.1
Angular Materialv17.0.4v19.0.1
SvelteUIv0.15.3v0.15.7
daisyUIv4.4.24v4.12.14
Kuma UIv1.5.5v1.5.8
Yamada UIv1.1.1v1.7.0
Bootstrapv5.3.2v5.3.3

UIフレームワークでメジャーアップデートがあったものはCharkra UI、Material UI、Angular Materialです。

Chakra UIのv3では、パフォーマンス・速度・コンポーネントの一貫性を向上させるために新たな設計で書き直されるようになりました。

MUIのv6では試験的にPigment CSSというゼロランタイムのスタイリングライブラリが導入されるようになりました。

パッケージマネージャ

2023/12/31時点の最新バージョン2024/12/1時点の最新バージョン
npmv10.2.5v10.9.1
yarnv1.22.21v1.22.22
yarn berryv4.0.2v4.5.3
pnpmv8.13.1v9.14.4

パッケージマネージャでメジャーアップデートがあったものはpnpmになります。

pnpmはv9のバージョンアップにおいてCorepackとの互換性を維持するようになりました。

モバイル&デスクトップアプリ

2023/12/31時点の最新バージョン2024/12/1時点の最新バージョン
React Nativev0.72.8v0.76.3
Expov50.0.0v52.0.0
Electronv28.1.0v33.2.1
Capacitorv5.6.0v6.2.0
Tauriv1.5.4v2.1.1
NativeScriptv8.6.2v8.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時点の最新バージョン
Vitev5.0.10v6.0.1
SWCv1.3.102v1.9.3
esbuildv0.19.11v0.24.0
Parcelv2.11.0v2.13.2
Rollupv4.9.2v4.28.0
Webpackv5.89.0v5.96.1
Rspackv0.4.5v1.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時点の最新バージョン
Lernav8.0.1v8.1.9
Turborepov1.11.2v2.3.3
Nxv17.2.8v20.1.4
Bazelv7.0.0v7.4.1
Rushv5.112.2v5.141.3
moonv1.18.5v1.30.2

モノレポツールでメジャーアップデートがあったものはTurborepo、Nxになります。

Turborepoはv2のアップデートに伴い、ライセンスをMITに変更し、LTSのポリシーが追加されました。

Nxではv18のリリースに伴いLaunch Nx Weekという発表イベントを行いました。その中でProject CrystalというNxプラグインの利用を簡単にして、開発者が効率的に作業を進めるためのツールについて発表されました。

バックエンドフレームワーク

2023/12/31時点の最新バージョン2024/12/1時点の最新バージョン
Expressv4.18.2v5.0.1
Koav2.15.0v2.15.3
Fastifyv4.25.2v5.1.0
NestJSv10.3.0v10.4.12
Honov3.11.11v4.6.12

バックエンドフレームワークでメジャーアップデートがあったものはExpress、Fastify、Honoになります。

Expressは10年もの時を経て(!)v5にアップデートされました。昨今のオープンソースのサプライチェーンセキュリティの強化のためにセキュリティ監査を実施するようになっています。ReDoS攻撃のリスクを下げるために、サブエクスプレッションの正規表現(/:foo(\\d+)のような形)でのサポートが削除されました。

Honoではv4より静的サイトジェネレーター、Client Components、ファイルベースルーティングなどよりフルスタックに扱えるための機能が搭載されました。

テストツール

2023/12/31時点の最新バージョン2024/12/1時点の最新バージョン
Vitestv1.1.1v2.1.6
Mochav10.2.0v10.8.2
Playwrightv1.40.1v1.49.0
WebdriverIOv8.27.1v9.4.1
Cypressv13.6.2v13.16.0
Seleniumv4.16.0v4.27.0
Puppeteerv21.6.1v23.9.0
Storybookv7.6.6v8.4.6
Mock Service Workerv2.0.11v2.6.6

テストツールでメジャーアップデートがあったものはVitest、WebdriverIO、Puppeteer、Storybookになります。

Vitestはv2.0よりBrowser ModeがExperimentalな機能として搭載されました。これにより実際のブラウザ上でVitestによるテストが実行できるようになりました。

クロスブラウザでのテスト自動化の次世代標準プロトコルであるWebDriver Bidiの採用をWebdriverIOでも取り入れるようになりました。こちらはSeleniumやPuppeteerでも採用されています。

Storybookは厳密にはテストツールの分類ではないですが、今やフロントエンドテストツールとして不動の地位を築き上げつつあります。 Chromaticを取り込んだ新たなビジュアルテスト、テストの高速化ができるオプションの追加がされています。他にはreactreact-domのpeer dependencyも取り除かれているためReact以外のフロントエンドフレームワークフレンドリーになっています。

リンター・フォーマッターツール

2023/12/31時点の最新バージョン2024/12/1時点の最新バージョン
ESLintv8.56.0v9.16.0
Stylelintv16.1.0v16.11.0
Prettierv3.1.1v3.4.1
Biomev1.4.1v1.9.4
oxlintv0.0.22v0.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時点の最新バージョン
TypeScriptv5.3.3v5.7.2
flowtypev0.225.0v0.255.0

型ツール関連でメジャーバージョンが上がったものはありませんでしたが、TypeScriptのバージョンについてはsemverで運用されていないため、マイナーバージョンアップに伴いいくつもの変更が入っています。

おわりに - 個人的振り返りと来年以降の予測

今年はいくつかのメジャーアップデートはありましたが、個人的な感想としては、開発者にとっては目まぐるしい変化というものはそこまでなかったように思いました。 バージョンアップでの破壊的変更についてもいくつかエスケープハッチとなる対応(旧式と併用して扱えるなど)が含まれていたり、より良い方向へ改善するための変更が含まれていると感じています。

エコシステム周りのパフォーマンスを改善するイニシアチブであるe18eが設立されたこともあり、Web開発者にとってより利用しやすくパフォーマンスを重視したツールが増えてくるのではないかと思っています。逆にツールチェインの開発者にとっては、Rustを中心としてこれまでとは違った技術を取り入れることが求められるかもしれません。

これまでのアップデートの変遷を振り返ってみて、来年以降のフロントエンド技術動向はどうなるかを予測してみました。あくまでも私の予測なので参考程度ということで…。

というわけで今日までの動向を振り返ってみましたが、今年の残りにもいくつかの変更やリリースがあるかもしれません。引き続きフロントエンド技術周辺を見守っていこうと思います。

参考記事

脚注

  1. とあるフロントエンドフレームワークを基にアプリケーションのレンダリングと配信に重点を置いたフレームワークと定義

アーカイブ記事のため、内容に関する更新依頼は受け付けておりませんが、誤字や脱字などありましたらご連絡ください。

この記事に関する修正依頼
トップへ戻る