Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Avatar for Yuku Kotani Yuku Kotani
March 06, 2025
Programming
960
3

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

Avatar for Yuku Kotani

Yuku Kotani

March 06, 2025

More Decks by Yuku Kotani

See All by Yuku Kotani
Webとヘルスデータ
Avatar for Yuku Kotani yukukotani
1
530
LLM本来の能力を解き放つサンドボックス技術とAI民主化への適用
Avatar for Yuku Kotani yukukotani
3
5.4k
一億総業務改善を支える社内AIエージェント基盤の要諦
Avatar for Yuku Kotani yukukotani
9
3.6k
MCPとデザインシステムに立脚したデザインと実装の融合
Avatar for Yuku Kotani yukukotani
6
3k
Scale out your Claude Code ~⁨⁩自社専用Agentで10xする開発プロセス~
Avatar for Yuku Kotani yukukotani
11
6k
AI Coding Agent Enablement in TypeScript
Avatar for Yuku Kotani yukukotani
21
21k
AI Coding Agent Enablement - エージェントを自走させよう
Avatar for Yuku Kotani yukukotani
14
8.6k
React 19でお手軽にCSS-in-JSを自作する
Avatar for Yuku Kotani yukukotani
6
1.1k
僕が思い描くTypeScriptの未来を勝手に先取りする
Avatar for Yuku Kotani yukukotani
12
3.6k

Other Decks in Programming

See All in Programming
市販E-Readerを乗っ取れ 〜Embedded Swiftで電子ペーパーガジェットを制御する〜
Avatar for Trickart trickart
0
190
フロントエンドUIフレームワークのこれまでとこれから
Avatar for TOMIKAWA Sotaro ssssota
5
2.7k
TiDB Cloudのカスタムコントローラーによるオートスケール対応
Avatar for takaidohigasi takaidohigasi
0
110
MVNOの申込からeSIM開通までをiOSアプリでつなぐ- 本人確認・MNP・通信事業者基盤をまたぐ実装
Avatar for Sato Takeshi satotakeshi
0
380
Intent as Code
Avatar for Shoppingjaws shoppingjaws
6
1k
モバイル交通系ICへのチャージ実例から考える、クロスプラットフォーム開発におけるiOS実機テスト設計とCI運用
Avatar for Yu Sugawara yusuga
1
470
AHC070解法紹介
Avatar for eijirou eijirou
0
120
スマートフォンでモールス信号を送受信する 〜スマートフォンのLEDとカメラで作る光通信の設計と実装〜
Avatar for Atsuki Seo atsuki_seo
0
110
The Good Stuff, Not the Slop: Engineering High-Quality Android Apps with Modern AI Tooling
Avatar for danybony danybony
1
250
JPUG勉強会 OSSデータベースの内部構造を理解しよう(第２回)
Avatar for Atsushi Ogawa oga5
0
220
一人だけ、Kiroが静止する日
Avatar for Hideyuki Nagata hideg
0
110
GKE で Pod の見方を変えたら、スケールアウト時の挙動を真に捉えられた話
Avatar for Sota Takaki stkk
0
120

Featured

See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.3k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
2.1k
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
520
HDC tutorial
Avatar for Michiel Stock michielstock
2
870
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.9k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
800
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
22k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
69
65k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
4
53k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
7.1k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
540
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
3
14k

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によってさらに統合が進身、ユニバーサルな開発体験が完成していく