Slide 1
Slide 1 text
Expo
React Server Components
によるアプリ開発の現在地と
が切り開く未来
@yukukotani
2025/03/06 - React Native開発最前線 @ Offers DeepDive
Slide 2
Slide 2 text
自己紹介
小谷 優空 - @yukukotani
・VP of Technology @ Ubie, Inc.
・Student @ Univ. Tsukuba
Slide 3
Slide 3 text
話すこと
Expoでの開発の今と未来をざっくり紹介。技術的な詳細には踏み込まない
・Expo(React Native)での開発って今どんな感じ？
・これからどうなっていく？
技術的詳細もうちょっと書いてます
Slide 4
Slide 4 text
目次
1. Expo開発フロー概観
2. RSCによる未来
3. まとめ
Slide 5
Slide 5 text
Expoって？
React Nativeでの開発をめっちゃ楽にしてくれるメタフレームワーク
Reactに対するNext.jsみたいなもの
Slide 6
Slide 6 text
Expoによる開発フロー
コーディング、ビルド、デプロイの3ステップで見ていく
Slide 7
Slide 7 text
コーディング
Slide 8
Slide 8 text
シンプルにReactで書くだけ
Slide 9
Slide 9 text
ネイティブUIを描画
Android iOS
Slide 10
Slide 10 text
アプリでパス・・・？
Slide 11
Slide 11 text
File Based Routing できる
/app/about.tsx
Slide 12
Slide 12 text
ネイティブ処理もJSから
Slide 13
Slide 13 text
Web開発と似た感覚！
Slide 14
Slide 14 text
Web開発と特に異なるところ
・スタック前提の画面設計が必要（生きてる画面に別画面が重なってくる）
・DOMやCSSはそのまま使えない
Slide 15
Slide 15 text
ビルド
Slide 16
Slide 16 text
JSのビルドはExpoがやってくれる
Metroというバンドラが組み込まれていて、勝手にやってくれる
Next.jsがWebpack/Turbopackを持ってるのと同じ
Slide 17
Slide 17 text
iOS, Androidのコードどこにある？
Slide 18
Slide 18 text
Continuous Native Generation (CNG)
iOS, Android のコードや設定を丸ごと自動生成する仕組み
https://zenn.dev/woodstock_tech/articles/293a5c1d062ec6
.gitignoreできちゃう！
Slide 19
Slide 19 text
ネイティブコードがあってもビルドがめんどい・・・
CIにXCode環境を準備したり、、、
めちゃくちゃ遅いからキャッシュしたり、、、
Slide 20
Slide 20 text
EAS Build
Expo公式のクラウドサービスでビルドしてくれる
アプリビルドに最適化された環境になってるので、小難しいことをやらなくて済む
Slide 21
Slide 21 text
デプロイ
Slide 22
Slide 22 text
ストア審査に出すのもダルい・・・
EAS Buildからビルド結果のバイナリをダウンロードできるけど・・・
Appleに証明書を登録したりなど、小難しいプロセスがたくさん
Slide 23
Slide 23 text
EAS Submit
ストアへの提出までEASがワンストップでやってくれる
証明書などもマネージドになって楽ちん
Slide 24
Slide 24 text
EAS Update
画面の変更などはストア審査なしで出せる（OTA Update）
Slide 25
Slide 25 text
JSエンジンを持つReact Nativeだからできる
JavaScriptで記述する部分は基本的にすべてOTA可能
アプリ設定変更やネイティブモジュールの追加はストア審査が必要
Slide 26
Slide 26 text
目次
1. Expo開発フロー概観
2. RSCによる未来
3. まとめ
Slide 27
Slide 27 text
従来のOTAアップデート
モバイルアプリは独立したクライアントアプリケーション
デプロイ時にEAS Updateサーバがクライアント実装を差し替える
Slide 28
Slide 28 text
Server-Driven UI
サーバーサイドでUIの構成を決定し、クライアントはそれに従って描画する設計
Airbnb, Netflix などが採用している
https://medium.com/airbnb-engineering/a-deep-dive-
into-airbnbs-server-driven-ui-system-842244c5f5
Slide 29
Slide 29 text
Server-Driven UI
画面構成はAPIレスポンスでしかないので動的に変えられる
実装を再デプロイしたり
管理画面で入稿したり
Slide 30
Slide 30 text
React Server Components
RSCによって、サーバー側でコンポーネントを描画することができる
→より自然に Server-Driven UIができる、Web開発に近いOTAの未来の形
サーバー側なので
動的に差し替えられる
Slide 31
Slide 31 text
目次
1. Expo開発フロー概観
2. RSCによる未来
3. まとめ
Slide 32
Slide 32 text
まとめ
・Expoの開発体験はクラウドサービスと統合され、Web開発者にも馴染みやすい
・RSCによってさらに統合が進身、ユニバーサルな開発体験が完成していく