Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来

Expo React Server Components によるアプリ開発の現在地とが切り開く未来 @yukukotani 2025/03/06 - React
Native開発最前線 @ Offers DeepDive

自己紹介小谷優空 - @yukukotani ・VP of Technology @ Ubie,
Inc. ・Student @ Univ. Tsukuba

話すこと Expoでの開発の今と未来をざっくり紹介。技術的な詳細には踏み込まない・Expo(React Native)での開発って今どんな感じ？・これからどうなっていく？技術的詳細もうちょっと書いてます

目次 1. Expo開発フロー概観 2. RSCによる未来 3. まとめ

Expoって？ React Nativeでの開発をめっちゃ楽にしてくれるメタフレームワーク Reactに対するNext.jsみたいなもの

Expoによる開発フローコーディング、ビルド、デプロイの3ステップで見ていく

コーディング

シンプルにReactで書くだけ

ネイティブUIを描画 Android iOS

アプリでパス・・・？

File Based Routing できる /app/about.tsx

ネイティブ処理もJSから

Web開発と似た感覚！

Web開発と特に異なるところ・スタック前提の画面設計が必要（生きてる画面に別画面が重なってくる）・DOMやCSSはそのまま使えない

ビルド

JSのビルドはExpoがやってくれる Metroというバンドラが組み込まれていて、勝手にやってくれる  Next.jsがWebpack/Turbopackを持ってるのと同じ

iOS, Androidのコードどこにある？

Continuous Native Generation (CNG) iOS, Android のコードや設定を丸ごと自動生成する仕組み https://zenn.dev/woodstock_tech/articles/293a5c1d062ec6 .gitignoreできちゃう！

ネイティブコードがあってもビルドがめんどい・・・ CIにXCode環境を準備したり、、、めちゃくちゃ遅いからキャッシュしたり、、、

EAS Build Expo公式のクラウドサービスでビルドしてくれるアプリビルドに最適化された環境になってるので、小難しいことをやらなくて済む

デプロイ

ストア審査に出すのもダルい・・・ EAS Buildからビルド結果のバイナリをダウンロードできるけど・・・ Appleに証明書を登録したりなど、小難しいプロセスがたくさん

EAS Submit ストアへの提出までEASがワンストップでやってくれる証明書などもマネージドになって楽ちん

EAS Update 画面の変更などはストア審査なしで出せる（OTA Update）

JSエンジンを持つReact Nativeだからできる JavaScriptで記述する部分は基本的にすべてOTA可能アプリ設定変更やネイティブモジュールの追加はストア審査が必要

従来のOTAアップデートモバイルアプリは独立したクライアントアプリケーションデプロイ時にEAS Updateサーバがクライアント実装を差し替える

Server-Driven UI サーバーサイドでUIの構成を決定し、クライアントはそれに従って描画する設計 Airbnb, Netflix などが採用している https://medium.com/airbnb-engineering/a-deep-dive- into-airbnbs-server-driven-ui-system-842244c5f5

Server-Driven UI 画面構成はAPIレスポンスでしかないので動的に変えられる実装を再デプロイしたり管理画面で入稿したり

React Server Components RSCによって、サーバー側でコンポーネントを描画することができる →より自然に Server-Driven UIができる、Web開発に近いOTAの未来の形サーバー側なので動的に差し替えられる

まとめ・Expoの開発体験はクラウドサービスと統合され、Web開発者にも馴染みやすい・RSCによってさらに統合が進身、ユニバーサルな開発体験が完成していく

Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来

Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来

Yuku Kotani

More Decks by Yuku Kotani

Other Decks in Programming

Featured

Transcript

Expo React Server Components によるアプリ開発の現在地とが切り開く未来 @yukukotani 2025/03/06 - React

自己紹介小谷優空 - @yukukotani ・VP of Technology @ Ubie,

話すこと Expoでの開発の今と未来をざっくり紹介。技術的な詳細には踏み込まない・Expo(React Native)での開発って今どんな感じ？・これからどうなっていく？技術的詳細もうちょっと書いてます

目次 1. Expo開発フロー概観 2. RSCによる未来 3. まとめ

Expoって？ React Nativeでの開発をめっちゃ楽にしてくれるメタフレームワーク Reactに対するNext.jsみたいなもの

Expoによる開発フローコーディング、ビルド、デプロイの3ステップで見ていく

コーディング

シンプルにReactで書くだけ

ネイティブUIを描画 Android iOS

アプリでパス・・・？

File Based Routing できる /app/about.tsx

ネイティブ処理もJSから

Web開発と似た感覚！

Web開発と特に異なるところ・スタック前提の画面設計が必要（生きてる画面に別画面が重なってくる）・DOMやCSSはそのまま使えない

ビルド

JSのビルドはExpoがやってくれる Metroというバンドラが組み込まれていて、勝手にやってくれる  Next.jsがWebpack/Turbopackを持ってるのと同じ

iOS, Androidのコードどこにある？

Continuous Native Generation (CNG) iOS, Android のコードや設定を丸ごと自動生成する仕組み https://zenn.dev/woodstock_tech/articles/293a5c1d062ec6 .gitignoreできちゃう！

ネイティブコードがあってもビルドがめんどい・・・ CIにXCode環境を準備したり、、、めちゃくちゃ遅いからキャッシュしたり、、、

EAS Build Expo公式のクラウドサービスでビルドしてくれるアプリビルドに最適化された環境になってるので、小難しいことをやらなくて済む

デプロイ

ストア審査に出すのもダルい・・・ EAS Buildからビルド結果のバイナリをダウンロードできるけど・・・ Appleに証明書を登録したりなど、小難しいプロセスがたくさん

EAS Submit ストアへの提出までEASがワンストップでやってくれる証明書などもマネージドになって楽ちん

EAS Update 画面の変更などはストア審査なしで出せる（OTA Update）

JSエンジンを持つReact Nativeだからできる JavaScriptで記述する部分は基本的にすべてOTA可能アプリ設定変更やネイティブモジュールの追加はストア審査が必要

目次 1. Expo開発フロー概観 2. RSCによる未来 3. まとめ

従来のOTAアップデートモバイルアプリは独立したクライアントアプリケーションデプロイ時にEAS Updateサーバがクライアント実装を差し替える

Server-Driven UI サーバーサイドでUIの構成を決定し、クライアントはそれに従って描画する設計 Airbnb, Netflix などが採用している https://medium.com/airbnb-engineering/a-deep-dive- into-airbnbs-server-driven-ui-system-842244c5f5

Server-Driven UI 画面構成はAPIレスポンスでしかないので動的に変えられる実装を再デプロイしたり管理画面で入稿したり

React Server Components RSCによって、サーバー側でコンポーネントを描画することができる →より自然に Server-Driven UIができる、Web開発に近いOTAの未来の形サーバー側なので動的に差し替えられる

目次 1. Expo開発フロー概観 2. RSCによる未来 3. まとめ

まとめ・Expoの開発体験はクラウドサービスと統合され、Web開発者にも馴染みやすい・RSCによってさらに統合が進身、ユニバーサルな開発体験が完成していく