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

Transcript

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