JavaScript フレームワークの新機能（2024 年 5 月）

Katie Hempenius
Katie Hempenius
X
Addy Osmani
Addy Osmani
X GitHub

JavaScript フレームワークでは、すべての処理に対応し続けることは困難です。このドキュメントでは、過去 1 年ほどの JavaScript フレームワーク エコシステムの最近の動向を簡単に紹介しています。これらのトピックの一部について詳しくは、今年の Google I/O イベントの JavaScript フレームワーク エコシステムのナビゲーションの講演をご覧ください。

フレームワーク機能の比較チャート

図に示すように、JavaScript フレームワークはいくつかの類似した機能とアーキテクチャに収束しています。これには、コンポーネント ベースのアーキテクチャ、ファイルベースのルーティング、最新の SSR サポートが含まれます。この収束は、フレームワークが互いから学び、ベスト プラクティスを採用する中でのエコシステムの成熟と進化を示しています。

同時に、最近のさまざまな傾向（サーバー コンポーネントや、きめ細かいリアクティビティへのさまざまなアプローチなど）により、個々のフレームワークは区別され続けています。こうした傾向をより深く理解できるように、フレームワークを 1 つずつ詳しく見ていきます。

Angular

Angular の最近のリリースには、シグナル、遅延可能なビュー、NgOptimziedImage、非破壊ハイドレーション、部分的なハイドレーションなど、さまざまな重要な変更が含まれています。その一部をご紹介します。

  • シグナル: シグナルは、アプリケーションの状態を追跡するために複数のフレームワーク（現在は Angular を含む）で使用されるアプローチです。Angular Signals を使用すると、変更検出時に実行する必要がある計算の数を減らすことで、Interaction to Next Paint（INP）などのランタイム パフォーマンスを改善できます。
  • 延期可能なビュー: 遅延可能なビューを使用すると、特定のコンポーネント、ディレクティブ、パイプの読み込みを延期できます。たとえば、コンテンツがビューポートに入るか、メインスレッドがアイドル状態になるまで、依存関係の読み込みを遅らせることができます。
  • NgOptimizedImage: NgOptimizedImage は、画像読み込みのベスト プラクティスの導入を自動化する Angular 用の画像コンポーネントです。
  • 非破壊的なハイドレーション: 非破壊的なハイドレーションは、サーバー側でレンダリングされた Angular アプリの DOM がクライアント側で再構築されたときに発生するちらつきを修正します。
  • 部分ハイドレーション: Angular チームは、部分ハイドレーションのデベロッパー プレビューをまもなくリリースする予定です。部分ハイドレーションを使用すると、デフォルトでは、ページのレンダリング時にブラウザの JavaScript は読み込まれません。代わりに、ユーザーがページを操作すると、ページの特定の部分がハイドレートされます。

天体写真

最新の静的サイト作成ツールである Astro は、ウェブ開発に対する革新的なアプローチで波瀾万丈です。パフォーマンスとデベロッパー エクスペリエンスに重点を置いて、Astro はいくつかの魅力的な機能とアップデートをリリースしました。

  • アストロ諸島: アストロ諸島では、デベロッパーはページの他の部分から分離されたインタラクティブな UI コンポーネントを作成できます。これにより、効率的な更新と最適なパフォーマンスを実現できます。
  • ハイブリッド レンダリング: Astro がハイブリッド レンダリングをサポートするようになりました。静的サイト生成とサーバーサイド レンダリングのメリットを組み合わせて柔軟性を高めました。
  • Image コンポーネントと Picture コンポーネント: Astro は、画像の処理を簡素化し、自動最適化を提供する新しい Image コンポーネントと Picture コンポーネントを導入しました。
  • ビュー遷移のサポート: Astro は View Transitions API の組み込みサポートを提供し、スムーズでシームレスなページ遷移を実現します。
  • Astro Dev ツールバー: Astro Dev ツールバーには、Astro アプリのデバッグと最適化を行うための強力なツールセットが用意されています。

対応

昨年、React Server Components のリリースで、React コンポーネントに新しいアプローチが導入されました。それ以来、React チームは React コンパイラやサーバー アクションの機能など、さまざまな新機能に取り組んできました。

  • サーバー コンポーネント: React サーバー コンポーネントは、データをフェッチし、クライアントにストリーミングされる前にサーバーでレンダリングするコンポーネントです。これにより、レンダリング処理がサーバーに移され、クライアントに配布する必要があるコードの量が削減されます。
  • React コンパイラ: React コンパイラは、コンポーネントを自動的にメモリ化できるコンパイラです。これにより、不要な再レンダリングが減り、パフォーマンスが向上します。 React チームは、デベロッパーはコードを変更することなく React コンパイラを導入できると述べています。
  • サーバー アクション: サーバー アクションはクライアントとサーバー間の通信を可能にします。サーバー アクションを使用すると、React コンポーネントから直接呼び出すことができるサーバー側の関数を定義できるため、手動での API 呼び出しや複雑な状態管理が不要になります。これは、データのミューテーションやフォームの送信などに特に役立ちます。
  • アセットの読み込み: React は、スクリプト、スタイル、フォント、画像などのアセットをプリロードおよび読み込むための宣言型 API の開発に取り組んできました。
  • 画面外レンダリング: React は画面外レンダリングにも取り組んでいます。画面外レンダリングは、パフォーマンス オーバーヘッドを増やすことなくバックグラウンドで画面をレンダリングできる、React で今後リリースされる機能です。これは、DOM 要素だけでなく React コンポーネントでも機能するコンテンツの公開設定の CSS プロパティと考えることができます。」

リミックス

フルスタックのウェブ フレームワークである Remix は、デベロッパー コミュニティで注目を集めています。ウェブの基礎とデベロッパー エクスペリエンスの向上に重点を置いた Remix では、いくつかの重要な更新が導入されました。

  • リミックス 2.0 のリリース: 2023 年 9 月にリリースされたリミックス 2.0 では、フレームワークに大幅な改善と新機能が導入されました。
  • Vite の安定版サポート: Remix では、高速かつ軽量のビルドツールである Vite の安定したサポートが提供され、開発ビルドの高速化とパフォーマンス向上が実現しました。
  • SPA モード: リミックスに導入された SPA モードにより、本番環境で JavaScript サーバーを必要とせずに純粋に静的なサイトを構築できます。これにより、デベロッパーは、静的サイトのデプロイのシンプルさを維持しながら、ファイルベースのルーティング、自動コード分割など、Remix の強力な機能を使用できます。

Next.js

特に注目に値するのは、2023 年 5 月の Next.js 13.4 のリリースです。これにより、React Server コンポーネント、ストリーミング、Suspense が安定的にサポートされるようになりました。それ以降、Next.js は新しい React API（サーバー アクションなど）のサポートを構築し、Turbopack などのイニシアチブを通じてデベロッパー エクスペリエンスの改善を続けています。その他のハイライト:

  • App Router: Next.js 13.4 で安定版になった App Router は、Next.js アプリケーションでルーティングを構造化および管理する新しい方法です。App Router は、共有レイアウトやネストされたルーティングなどの Next.js の新機能や、Next.js アプリで React Server Components、Susense、Server Actions などの新しい React API を使用するための前提条件です。

  • Turbopack: 現在試験運用版）で、React の Suspense API 上に構築されたページ レンダリングのアプローチです。部分的な事前レンダリングでは、静的読み込みシェルを使用してページをレンダリングします。ただし、シェルによってページ内に動的コンテンツの「穴」が残るため、このコンテンツは非同期で読み込まれます。これにより、キャッシュ可能な静的なページのパフォーマンス上のメリットが得られると同時に、ページ コンテンツに動的データを組み込むことができます。

ビュー

Vue の最新リリースである Vue 3.4 では、さまざまなパフォーマンスが改善されました。Vue は現在、パフォーマンス指向の Vue Vapor にも取り組んでいます。ここでは、この分野の取り組みの一部をご紹介します。

  • Vue 3.4 のリリース: 「2 倍の高速かつ高速な SFC コンパイルを実現する完全に書き換えられたパーサーと、再計算の効率を向上するリファクタリングされたリアクティビティ システム」といった特長があります。
  • Vue Vapor モード: Vue は、Vue Single File Components と連携するオプトインのパフォーマンス指向のコンパイル戦略である Vapor Mode で動作します。Vapor モードでは、現在 Vue コンパイラが生成しているコードよりもパフォーマンスの高いコードを生成します。さらに、すべてのコンポーネントで Vapor モードを使用すると、Vue 仮想 DOM（バンドルサイズを削減）が不要になります。
  • Vue 2 の EOL: Vue 2 のサポート終了（EOL）は 2023 年 12 月 31 日でした。ただし、Vue 2 はまだ広く使用されています。Vue npm パッケージのダウンロードの約 50% が Vue 2 向けです。

ヌクスト

Nuxt では、Nuxt 4 がリリース間近です。この 1 年間、Nuxt はフレームワークを頻繁にリリースしていますが、さらに Nuxt のモジュール エコシステムは約 220 のモジュールに成長しました。この分野での最近の開発には、次のようなものがあります。

固体

Solid は、メタフレームワーク SolidStart の安定版 1.0 リリースに向けて取り組んでいます。SolidStart は、きめ細かいリアクティビティ、アイソモーフィック ルーティング、さまざまなレンダリング モードのサポートを誇ります。ハイライトは以下のとおりです。

  • きめ細かいリアクティブ: Solid のリアクティビティ システムでは、正確な更新と最適なパフォーマンスが可能になり、効率的なレンダリングと状態管理が可能になります。
  • アイソモーフィック ルーティング: SolidStart ではルーティングに対する統合アプローチが採用されており、デベロッパーはクライアントとサーバーの両方でシームレスに動作するルートを定義できます。
  • 柔軟なレンダリング モード: SolidStart は、サーバーサイド レンダリング、静的サイト生成、クライアントサイド レンダリングなど、さまざまなレンダリング モードをサポートしているため、デベロッパーはアプリケーションに最適なアプローチを柔軟に選択できます。

スヴェルト

過去 1 年間、Svelte チームは重要な Svelte 5 のリリースに注力してきました。その他のハイライト:

  • Svelte 5 のリリース: Svelte コンパイラとランタイムの書き換えに加えて、Svelte 5 では Runes のコンセプトも導入されています。
  • ルーンの発表: ルーンは Svelte 5 でリリース予定の機能です。「ルーンでいつでも遊べる、きめ細かなリアクティビティ... ルーンを使えば、.svelte ファイルの境界を越えてリアクティブ機能を 実現できます。Svelte 5 のリアクティビティはシグナルを利用していますが、（他のフレームワークとは異なり）Svelte 5 では、シグナルが直接操作するものではなく、内部的な実装の詳細です。」
  • SvelteKit 2 のリリース: SvelteKit は、Svelte のメタ フレームワークです。このリリースの機能には、シャロー ルーティングと Vite 5 のサポートが含まれます。

Chrome Aurora

Chrome Aurora は、さまざまなオープンソース ウェブ フレームワークと連携して、ウェブ全体でのユーザー エクスペリエンス、特にパフォーマンスの向上に取り組む Google のチームです。この 1 年間に Google が貢献したイニシアチブには次のようなものがあります。

おわりに

JavaScript フレームワークのエコシステムは急速なペースで進化し続けており、各フレームワークには独自のイノベーションと改善が導入されています。Angular、React、Vue などの確立されたフレームワークの最新機能に興味がある場合でも、Astro、Remix、Solid などの新しいオプションを検討している場合でも、最新のエキサイティングな開発が数多くあります。

デベロッパーは、こうした進化に関する最新情報を常に入手しておくことで、プロジェクトのフレームワークを選択する際に情報に基づいた意思決定を行うことができます。各フレームワークの強みと独自の機能を理解することで、プロジェクトの要件や開発の好みに最適なものを選択できます。

この概要が、JavaScript フレームワークの現状を垣間見る一助になれば幸いです。このブログ投稿で取り上げたトピックの詳細については Google I/O での講演もご覧くださいよろしくお願いいたします。