React 18が正式リリース！新機能とアップグレード注意点を解説

React 18が正式リリース

2022年3月29日、React 18が正式リリースされました。昨年のReact Conf 2021で紹介された、React 18の並行レンダリング機能（Concurrent Rendering）をベースに、今回のリリース後もコンポーネントが整備されていく予定です。

【参考】：React v18.0

Reactは、Meta（旧Facebook）とコミュニティによって開発されているJavaScriptライブラリです。ユーザインターフェース構築に利用されています。ReactはJavaScriptライブラリですので、モジュールの再利用性が高いことが強みです。ウェブアプリや静的サイトでも対応可能であり、利用が増加しています。

Reactとは？入門編！意味や将来性を初心者にもわかりやすく説明

Reactは、コンポーネントという独立した部品から複雑なユーザーインターフェースを組み立てることができます。アプリケーション実行はモバイル端末でも動作可能です。そのため学習効果が高く、開発生産性が総合的に高いことがメリットとして挙げられます。

【参考】：React

Reactでは、リリース計画を以下のフェーズで実施しています。

・アルファ版 ライブラリ作者とワーキンググループメンバー向けの段階で、方向性をフィードバックを得ながら決めます。

・パブリックベータ版 主要コミュニティに確認してもらい、不具合修正を行います。アルファから少なくとも数か月後となります。

・リリース候補（RC）版 最終版の一般向けリリースに向けて品質改善を進めます。ベータから少なくとも数週間後となります。

・一般向けリリース版 安定版としてリリースされ、RCから少なくとも数週間後を目標に準備します。2022年3月29日のリリースは、このリリース版を指します。

Reactは、メジャーチェンジは不便であり、極力マイナーチェンジで対応するよう開発を進めています。新機能もマイナーリリースでサポートします。そのため、React 18がメジャーバージョンとしてしばらくメンテナンスされていくと考えられます。

【参考】：React バージョニングポリシー

React 18の新機能

React 18では、並行処理を実現するために並行レンダリング機能（Concurrent Rendering）が実装されています。オプトインとして並行処理機能を利用する場合のみに有効化されます。

並行レンダリング機能は、並行レンダラ（Concurrent Renderer）が、ユーザーインターフェースの一貫性を保ち、バックグラウンドで次の画面を準備しておくことができます。これにより、ユーザーインターフェースのレスポンスが向上します。

React 18の新機能は、この基盤上に実装されています。詳細は以降で説明していきます。

自動バッチング（Automatic batching）は、これまで都度レンダリングを要する処理をひとまとめにしてレンダリングする機能です。関数内のすべての処理をひとかたまりにして一度にレンダリングを行います。この自動実行によりレンダリングパフォーマンスが大幅に改善されます。

【参考】：Automatic batching for fewer renders in React 18

トランジション（Transition）は、タイプ・クリック・プレスといった緊急性の高いユーザ操作と区別し、段階的に画面を推移させるあらたな考え方です。主に入力結果の表示が即時に必要でなければ、このトランジションをstartTransition()メソッドに記述します。useTransition()は、トランジションを開始したり、ペンディング状態かどうか確認したりするAPIです。

サスペンス（Suspense）は、コンポーネントをより宣言的に利用するために実装されました。従来はユーザーインターフェースのロード中かどうかを”isLoading”で確認し、ロード中の処理とロード完了の処理を記述する必要がありました。

サスペンスにより、<Suspense></Suspense>で括った処理と、”fallback=”にロード中のSpinnerをまとめて記述できます。サスペンスがロード後のコンポーネントを返すので、待機時のページ処理が軽くなるメリットがあります。

Internet Explorerは、2022年6月15日にMicrosoft社のサポート終了となりますので、React 18ではサポートされません。Internet Explorerが必要な場合は、React 17を継続使用することになります。事前にアップグレード可否の要件を確認しておきましょう。

需要が期待されるサーバーコンポーネントについても、実装予定とのことです。クライアントとサーバーにまたがるリッチコンテンツの開発が期待される領域です。まだコンポーネントが開発中のため、リリース後も実験的な機能に位置づけられます。本機能は、React 18のマイナーリリースで登場の見込みです。

React 18の利用

React 18の利用方法ですが、インストールからアップグレードまで「React 18 アップグレードガイド」にまとめて掲載されています。正式リリースを控える2022年3月8日に、情報が公開されました。ここでは、その中からトピックスを中心に紹介していきます。

【参考】：React 18 アップグレードガイド

Reactはパッケージ管理システムのnpmを用いてインストールします。 npm install react react-dom

npmの他、Yarnを用いることもできます。WindowsではWSL（Windows Subsystem for Linux）を利用するか直接Windowsにインストールします。

【参考】：yarn react 【参考】：Windows アプリ開発 Reactの概要

React 18のアップグレード

React 18のアップグレード時には、React 17でサポートされていた機能変更の影響があります。具体的にはレンダリング関連の変更点や TypeScript型定義の変更点を確認し、段階的移行を進めるのが良いでしょう。詳細については、以降で解説していきます。

React 18では、これまでのReactDOM.renderはサポートされないので、createRootからrenderを使用するよう変更します。このAPIで並行レンダリング機能が利用可能となります。なおRootとは、React がレンダリングする構造を追跡するために用いる、最上位のデータ構造へのポインタです。詳細は以下のリンクをご確認ください。

【参考】：React 18 Replacing render with createRoot

サーバーサイドサスペンス・ストリーミング SSR（Server-Side Rendering）をサポートできるよう、react-dom/serverを刷新しました。旧来のAPIでは警告が出ます。具体的には、Node環境でのストリーミングでは、renderToNodeStreamの代わりにrenderToPipeableStreamを用います。renderToStringは引き続き利用できますが、サスペンスサポートに制限があります。詳細は以下のリンクをご確認ください。

【参考】：React 18 Upgrading to React 18 on the server 【参考】：React 18 New Suspense SSR Architecture in React 18

JavaScriptの上位互換となるTypeScriptの型定義に変更があります。@types/reactと@types/readct-domも依存関係がありますので、合わせてバージョンアップします。型定義の変更で重要な部分は、implicit childrenが利用できないことです。明示的にprops定義が必要ですが、潜在的な不具合を未然に防ぐことが期待されます。

【参考】：React 18 types

これらの定義変更を自動修正してくれるツールが紹介されています。types-react-codemodです。React 17からReact 18にアップグレードする際に生じる差異を修正してくれます。変換の指定オプションも揃っていますので、ご興味ありましたら以下のリンクをご確認ください。

【参考】：GutHub types-react-codemod

効率的にユーザインターフェースを構築しましょう

ReactはMetaによって開発され、FacebookやInstagramでも利用されているユーザインターフェースです。ユーザインターフェースの状態遷移をコントロールするのは容易ではないので、ライブラリを活用するメリットは大きいです。

Reactは、学習効果が高く各種ウェブサービスに幅広く活用できますので、この機会にぜひお試しください。

Reactのチュートリアルは難しい？三目並べゲーム開発に挑戦しよう！

React Native入門！将来性やアプリ開発環境について解説