ExpoのWeb向けビルド機能「React Native for Web」を活用して、UIをブラウザで確認しよう

ExpoとEASで始める快適モバイルアプリ開発 第8回

　これまでの連載では、Expo Routerによるナビゲーション、認証フロー、ディープリンクなど、モバイルアプリならではの機能を実装してきました。しかし、Expoの魅力はモバイルプラットフォームだけではありません。同じコードベースからWebアプリケーションも生成できるのです。今回は、ExpoのWeb向けビルド機能を活用し、「Write once, run anywhere」の理想に近づく方法を解説します。

対象読者

• React Nativeでモバイルアプリ開発を行っているエンジニア
• Webアプリケーションも同時に展開したいと考えている開発者
• コンポーネントの再利用性を高めたい開発チーム

前提環境

　筆者の検証環境は以下の通りです。

• macOS Sequoia 15.6.1
• Node.js 24.8.0
• npm 11.6.0
• Expo 54.0.7
• React Native 0.81.4
• React Native for Web 0.21.1
• React DOM 19.1.0

Expoで作ったコンポーネントをブラウザで確認する

　これまでの連載では、React Nativeを使ったモバイルアプリ開発に焦点を当ててきました。しかし、改めて考えてみると、ReactそのものはもともとWebフロントエンド開発のために生まれたライブラリです。React NativeはそのReactの思想をモバイルプラットフォームに拡張したものでした。

　この特性を逆手に取り、React Native向けに作成したコンポーネントをブラウザで動かすアプローチがあります。Expoもこの仕組みを採用しており、ブラウザで動作させるためのビルドオプションが存在しています。この仕組みでモバイルアプリをある程度再現したWebアプリを作ることも可能ですが、今回は別のアプローチでの活用方法を解説します。

　開発中のモバイルアプリのUIを、開発者以外のデザイナーやQAエンジニアに確認してもらうのは、エミュレーターを動かしてもらったり、各位の手元のデバイスにアプリをインストールしてもらったりと、手間がかかりがちです。ここで、開発中のUIをある程度ブラウザで確認できるとなったら、かなり手間が省けるのではないでしょうか。本記事では、そういった活用もできるExpoのWeb対応について解説していきます。

React Native for Webの仕組み

　ExpoのWeb対応は、「React Native for Web」というライブラリによって実現されています（図1）。

図1：React Native for WebのWebサイト

　これは、何かの特殊なランタイムやレンダリングの技術ではなく、普通のReact向けのUIライブラリです。少し特殊な点としては、React NativeのUIコンポーネントや各種APIとほとんど同じインターフェースを持っており、その挙動もReact Nativeを再現したものになっています。

　例えば、<View>コンポーネントは<div>に落とし込まれます。 <Text>は単独なら<div>になり、ネストして使っていれば内側の <Text>は<span>になります。画面サイズやアプリの表示サイズを取得するためのDimensionモジュールは、内部で window.screenなどを呼び出しながら、ブラウザから見える範囲の情報を取得します。

　Web向けビルド時には、バンドラーがすべてのfrom "react-native"をfrom "react-native-web"に読み替えて、React Native for Webの実装に差し替えています。つまり、React Native for Webは特殊なランタイムではなく、React Nativeと同じAPIを持つ独立したブラウザ向けReact UIライブラリなのです。

　元々はTwitter（現X）のフロントエンド実装のために作られた信頼性の高いライブラリということもあり、ExpoのWeb対応にも採用されました。