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

Katie Hempenius
Katie Hempenius
X
Addy Osmani

JavaScript フレームワークの最新情報に常に追いつくのは難しい場合があります。このドキュメントでは、過去 1 年ほどの間に JavaScript フレームワーク エコシステムで起こった最近の出来事のハイライトを簡単に説明します。これらのトピックの詳細については、今年の Google I/O イベントの対応する JavaScript フレームワーク エコシステムのナビゲートに関するセッションをご覧ください。

フレームワークの機能を比較したグラフ

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

同時に、最近の多くのトレンド（サーバー コンポーネントやきめ細かい応答性へのさまざまなアプローチなど）により、個々のフレームワークは引き続き差別化されています。これらのトレンドをより深く理解するために、フレームワークごとに詳しく説明します。

Angular

Angular の最近のリリースには、シグナル、遅延ビュー、NgOptimizedImage、非破壊的なハイドレーション、部分的なハイドレーションなど、さまざまな重要な変更が含まれています。主な機能は次のとおりです。

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

天体写真

最新の静的サイト ビルダーである Astro は、ウェブ開発に対する革新的なアプローチで注目を集めています。Astro では、パフォーマンスとデベロッパー エクスペリエンスに重点を置いて、次のような魅力的な機能とアップデートがリリースされています。

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

対応

昨年、React Server Components のリリースにより、React コンポーネントに対する新しいアプローチが導入されました。それ以降、React チームは React Compiler や Server Actions などのさまざまな新機能の開発に取り組んできました。

  • サーバー コンポーネント: React サーバー コンポーネントは、データを取得し、サーバーでレンダリングしてからクライアントにストリーミングするコンポーネントです。これにより、レンダリング作業がサーバーに移行され、クライアントに送信する必要があるコードの量が削減されます。
  • React コンパイラ: React コンパイラは、コンポーネントを自動的にメモ化できるcompilerです。これにより、不要な再レンダリングが減り、パフォーマンスが向上します。React チームは、デベロッパーはコードを変更することなく React コンパイラを採用できると述べています。
  • サーバー アクション: サーバー アクションを使用すると、クライアントとサーバーの通信が可能になります。Server Actions を使用すると、React コンポーネントから直接呼び出せるサーバーサイド関数を定義できるため、手動の API 呼び出しや複雑な状態管理が不要になります。これは、データの変更やフォームの送信などに特に便利です。
  • アセットの読み込み: React では、スクリプト、スタイル、フォント、画像などのアセットをプリロードして読み込むための宣言型 API の開発が進められています。
  • オフスクリーン レンダリング: React でもオフスクリーン レンダリングに取り組んでいます。オフスクリーン レンダリングは、「追加のパフォーマンス オーバーヘッドなしでバックグラウンドで画面をレンダリングする React の今後の機能」です。これは、DOM 要素だけでなく React コンポーネントでも機能する content-visibility CSS プロパティのバージョンと考えることができます。」

リミックス

フルスタック ウェブ フレームワークである Remix は、デベロッパー コミュニティで注目を集めています。ウェブの基本とデベロッパー エクスペリエンスの強化に重点を置いた Remix には、次のような注目すべきアップデートが導入されています。

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

Next.js

2023 年 5 月の Next.js 13.4 のリリースは、React サーバー コンポーネント、ストリーミング、サスペンスの安定したサポートを開始したため、特に注目に値します。それ以降、Next.js は新しい React API（Server Actions など）のサポートを継続的に構築し、Turbopack などのイニシアチブを通じてデベロッパー エクスペリエンスを改善してきました。その他の主な機能は次のとおりです。

  • App ルーター: Next.js 13.4 で安定版となった App ルーターは、Next.js アプリケーションでルーティングを構造化して管理する新しい方法です。App ルーターは、共有レイアウトやネストされたルーティングなどの新しい Next.js 機能や、Next.js アプリで React サーバー コンポーネント、懸念、サーバー アクションなどの新しい React API を使用する前提条件です。

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

Vue

Vue の最新リリースである Vue 3.4 では、さまざまなパフォーマンスの改善が含まれています。Vue は現在、パフォーマンス重視の Vue Vapor にも取り組んでいます。この分野で進んでいる取り組みのハイライトをいくつかご紹介します。

  • Vue 3.4 リリース: 機能には、「2 倍の速度で完全に書き直されたパーサー、高速な SFC コンパイラ、リファクタリングされたリアクティビティ システム（再計算の効率を改善）が含まれます。」
  • Vue Vapor モード: Vue は、Vue シングル ファイル コンポーネントで動作する、パフォーマンス重視のオプション コンパイル戦略である Vapor モードに取り組んでいます。Vapor モードは、現在 Vue コンパイラによって生成されるコードよりもパフォーマンスの高いコードを生成します。また、すべてのコンポーネントで Vapor モードを使用すると、Vue 仮想 DOM が不要になるため、バンドルのサイズが削減されます。
  • Vue 2 のサポート終了: Vue 2 のサポート終了（EOL）は 2023 年 12 月 31 日でした。ただし、Vue 2 は依然として広く使用されています。Vue npm パッケージのダウンロードの約 50% は Vue 2 用です。

Nuxt

Nuxt は Nuxt 4 のリリースが近づいています。過去 1 年間に Nuxt のフレームワークが頻繁にリリースされたことに加えて、Nuxt モジュール エコシステムは 220 モジュール近くにまで成長しました。この分野での最近の進展には次のようなものがあります。

固体

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

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

Svelte

過去 1 年間、Svelte チームは、今後の Svelte 5 のリリースに注力してきました。このリリースは非常に重要です。その他の主な機能は次のとおりです。

  • Svelte 5 のリリース: Svelte 5 には、Svelte コンパイラとランタイムの「書き換え」に加えて、ルーンのコンセプトも導入されています。
  • ルーンの発表: ルーンは、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 の関連トークをご覧ください。よろしくお願いいたします。