フロントエンドの定番ライブラリ「React 19」の新機能を紹介──React Server Componentsとその他の改善点

フロントエンド開発における定番ライブラリ「React」の最新バージョン解説 第5回

React 19 の改善点

　ここまでReact 19で導入された新しいAPIを紹介してきました。ここからは、その他の改善点について紹介します。

ドキュメントメタデータのサポート

　React 19では、<title>、<link>、<meta>などのドキュメントメタデータを<head>に設定できるようになりました。これまではreact-helmetなどのライブラリを使ったり、useEffectで直接DOMを参照して書き換えたりする必要がありましたが、React 19からはReactがネイティブにこの機能をサポートするようになりました。

［リスト5］ドキュメントメタデータの設定

function App() {
  return (
    <div>
      {/* この<title>タグと<meta>タグはドキュメントの<head>に配置される */}
      <title>React 19</title>
      <meta name="description" content="React 19の新機能を紹介" />
    </div>
  );
}

メタデータを設定するとすべて<head>内に配置される

　これらのメタデータタグはReactツリーのどこでレンダリングされたとしても、ドキュメントの<head>内に配置されます。ただし、複数のコンポーネントから<title>タグを設定した場合、すべての<title>が配置されてしまうため、実際には重複しないような工夫が必要となります。

スタイルシートのサポート

　React 19では、コンポーネント内で<link>タグもしくは<style>タグを記述することにより、コンポーネント単位でスタイルシートを読み込んで適用できるようになりました。さらにSuspenseと組み合わせることで、スタイルシートの読み込みが完了するまでコンポーネントのレンダリングを遅延できることも特徴です。

　Suspenseを有効にするには、Reactの独自拡張であるprecedence属性に文字列を指定して、Reactにスタイルシートの優先順を制御するように指示します。precedence属性は決まった値があるわけではなく、どのような文字列でもかまいません。Reactが認識した順に優先順が決定され、同じ文字列の場合は同じ優先順として扱われます。そのためprecedence属性に同じ値を指定した<link>タグをもつコンポーネントが複数ある場合は注意が必要です。

　例えば、リスト6では、2つのコンポーネントに同じ優先順precedence="first"を記載した<link>タグが含まれています。

［リスト6］コンポーネント内でのスタイルシートの読み込みの例

function ComponentA() {
  return (
    <div>
      <link href="https://example.com/my-styles-1.css" precedence="first" />
    </div>
  );
}
function ComponentB() {
  return (
    <div>
      <link href="https://example.com/my-styles-2.css" precedence="zero" />
      <link href="https://example.com/my-styles-3.css" precedence="first" />
    </div>
  );
}
function App() {
  return (
    <div>
      <ComponentA />
      <ComponentB />
    </div>
  );
}

　このAppコンポーネントがレンダリングされると<link>タグはリスト7のような順序になります。

［リスト7］precedence属性によってスタイルシートの適用順が意図しない結果になってしまう

<link href="https://example.com/my-styles-1.css" precedence="first" />
<link href="https://example.com/my-styles-3.css" precedence="first" />
<link href="https://example.com/my-styles-2.css" precedence="zero" />

　本来、ComponentBではprecedence="zero"が先に読み込まれるべきですが、ComponentAのprecedence="first"が先に認識されたため、同じ優先度であるComponentBのprecedence="first"のスタイルシートが先に読み込まれてしまいます。このような意図せぬ結果を回避するためには、読み込み順序を考慮して、事前にアプリケーション全体のprecedence属性の値を検討しておく必要がありそうです。

非同期スクリプトのサポート

　React 19では非同期スクリプトのサポートも追加されました。<script>タグにasync属性とsrc属性を指定することで、コンポーネント内で非同期スクリプトを読み込むことができます。これによりSuspenseが有効になり、スクリプトのロードが完了するまでコンポーネントのレンダリングを遅延させることができます。この機能を使うことで、外部スクリプトに依存したコンポーネントをシンプルに定義できます。

［リスト8］非同期スクリプトの読み込みの例

<script src="https://example.com/my-script.js" async />

リソースプリロードのサポート

　アプリで必要になるリソース（Webフォントや外部スクリプトなど）をブラウザーになるべく早く知らせ、プリロードを開始させることで、アプリのパフォーマンスを改善できることがあります。リソースのプリロードに関して、React 19では以下の関数が追加されています。

表：React 19で追加されたプリロード系の関数

関数	機能
prefetchDNS	接続予定のドメイン名に対応するIPアドレスのフェッチ
preconnect	具体的なリソースが不明な場合でも事前にリクエスト先のサーバへの接続を確立
preload	使用予定のスタイルシート、フォント、画像や外部スクリプトのフェッチ
preloadModule	使用予定のESMモジュールのフェッチ
preinit	外部スクリプトのフェッチと実行、またはスタイルシートのフェッチと挿入
preinitModule	ESMモジュールのフェッチと実行

　例えば、Webフォントを事前にプリフェッチしてページの表示を高速化したい場合には、リスト9のようにpreload関数を利用します。

［リスト9］Webフォントのプリロードの例

preload('https://.../path/to/font.woff', { as: 'font' })

　スタイルシートで参照しているWebフォントをpreload関数でプリロードさせることにより、スタイルシートの評価前にフォントファイルのダウンロードを開始できます。Webフォント以外にも、画像やスクリプトファイルなど、表示や動作に必要なリソースをpreloadやpreinitを使って効率的にロードすることで、ユーザー体験の向上が期待できます。

refのprops受け渡し

　従来、refを使ってコンポーネント内のDOM要素を参照する際、コンポーネントのpropsでrefを渡すことができず、forwardRef関数でコンポーネントをラップする必要がありました。React 19では、この制限が撤廃され、コンポーネントのpropsにrefを渡せるようになりました。

　リスト10は、同じコンポーネントを新旧のパターンで書いた例です。React 19の例ではforwardRefが不要になり、コードがシンプルになっています。

［リスト10］forwardRefを使った従来のrefの渡し方

import React, { useRef, forwardRef } from "react";
import ReactDOM from "react-dom/client";

// ～React 18: forwardRef を使った従来の書き方
// const MyInput = forwardRef(({ placeholder }, ref) => {
//   return <input placeholder={placeholder} ref={ref} />;
// });
// React 19～: props に ref を渡す書き方
function MyInput({ placeholder, ref }) {
  return <input placeholder={placeholder} ref={ref} />;
}

function App() {
  const ref = useRef();
  return (
    <div>
      <MyInput placeholder="my input" ref={ref} />
      <button onClick={() => ref.current.focus()}>Focus</button>
    </div>
  );
}

useDeferredValueの初期値設定

　useDeferredValueフックで第2引数に初期値を設定できるようになりました。これまではコンポーネントの初回レンダリング時は遅延されていない値になっていましたが、初期値が設定できるようになったことで、初回レンダリング時にも遅延値を利用できます。

［リスト11］useDeferredValueの初期値設定

const deferredValue = useDeferredValue(value, "");

エラー表示の改善、ハイドレーションエラー時の差分表示

　React 18までは、コンポーネントでエラーが発生した場合にコンソールに同じエラーが重複して表示されることがありました。React 19では重複が削減され、さらに一連のエラーは単一のログにまとめられるようになったようです。

　また、ハイドレーションエラーが発生した際に、不一致部分の差分を含んだログを表示するようになりました。従来ハイドレーションエラーが発生している場所を特定するのは困難でしたが、この改善により問題を特定しやすくなります。

まとめ

　React 19の新機能や改善点を3回にわたって紹介しました。「アクション」やReact Server Componentsなど、さまざまな変更が追加され、Reactを使った開発は大きく変化しています。ぜひサンプルコードをダウンロードしてReact 19の新機能に触れてみてください。