Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Yuku Kotani
March 06, 2025
Programming
3
790
Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来
Yuku Kotani
March 06, 2025
Tweet
Share
More Decks by Yuku Kotani
See All by Yuku Kotani
一億総業務改善を支える社内AIエージェント基盤の要諦
yukukotani
8
3.3k
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
6
2.5k
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
10
4.9k
AI Coding Agent Enablement in TypeScript
yukukotani
21
15k
AI Coding Agent Enablement - エージェントを自走させよう
yukukotani
14
8.1k
React 19でお手軽にCSS-in-JSを自作する
yukukotani
6
980
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
12
3.4k
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
14
8k
Capacitor製のWebViewアプリからReact Native製のハイブリッドアプリへ
yukukotani
5
1.9k
Other Decks in Programming
See All in Programming
QAフローを最適化し、品質水準を満たしながらリリースまでの期間を最短化する #RSGT2026
shibayu36
2
4.4k
Basic Architectures
denyspoltorak
0
670
今から始めるClaude Code超入門
448jp
8
8.6k
カスタマーサクセス業務を変革したヘルススコアの実現と学び
_hummer0724
0
690
Amazon Bedrockを活用したRAGの品質管理パイプライン構築
tosuri13
4
280
MDN Web Docs に日本語翻訳でコントリビュート
ohmori_yusuke
0
650
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
hisatake
0
270
AIフル活用時代だからこそ学んでおきたい働き方の心得
shinoyu
0
130
なぜSQLはAIぽく見えるのか/why does SQL look AI like
florets1
0
450
Vibe Coding - AI 驅動的軟體開發
mickyp100
0
170
IFSによる形状設計/デモシーンの魅力 @ 慶應大学SFC
gam0022
1
300
Unicodeどうしてる? PHPから見たUnicode対応と他言語での対応についてのお伺い
youkidearitai
PRO
1
2.5k
Featured
See All Featured
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
130
The SEO identity crisis: Don't let AI make you average
varn
0
68
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.3k
A Guide to Academic Writing Using Generative AI - A Workshop
ks91
PRO
0
200
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
1
54
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
92
We Have a Design System, Now What?
morganepeng
54
8k
Agile Actions for Facilitating Distributed Teams - ADO2019
mkilby
0
110
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
110
Evolving SEO for Evolving Search Engines
ryanjones
0
120
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
1
440
From π to Pie charts
rasagy
0
120
Transcript
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可能 アプリ設定変更やネイティブモジュールの追加はストア審査が必要
目次 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によってさらに統合が進身、ユニバーサルな開発体験が完成していく