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
ExpoRouterとEASを使った爆速MVP開発
Search
YuMatsumura
March 19, 2024
Programming
0
130
ExpoRouterとEASを使った爆速MVP開発
ReactNativeMeetup #15. 23/03/19 のLTで発表しました
YuMatsumura
March 19, 2024
Tweet
Share
More Decks by YuMatsumura
See All by YuMatsumura
プロジェクト管理ツールLinearの紹介
mattzn
1
180
大企業から17人目のスタートアップに転職しての変化
mattzn
0
320
OculusConnect
mattzn
0
18
MicrosoftFlow勉強会
mattzn
0
20
Other Decks in Programming
See All in Programming
Infrastructure as Code でセキュリティを楽にしよう!
konokenj
4
1.1k
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
1
160
Progressive Web Apps for Rails developers
siaw23
2
210
The Shape of a Service Object
inem
0
590
Data Contracts In Practice With Debezium and Apache Flink
gunnarmorling
0
190
o1モデルのプロンプトエンジニアリングって?
ktc_wada
0
400
Cohesion in Modeling and Design
mploed
3
120
利用者視点で考える、イテレータとの上手な付き合い方
syumai
3
180
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
550
GraphQLとGigaViewer for Apps
numeroanddev
4
780
GraphQLにおけるページネーションベストプラクティス
estie
0
160
Rails 8 Frontend: 10 commandments & 7 deadly sins in 2025
yshmarov
0
360
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
166
48k
Unsuck your backbone
ammeep
667
57k
Why Our Code Smells
bkeepers
PRO
334
57k
Debugging Ruby Performance
tmm1
72
12k
How GitHub (no longer) Works
holman
310
140k
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.2k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
Learning to Love Humans: Emotional Interface Design
aarron
271
40k
Teambox: Starting and Learning
jrom
131
8.7k
What the flash - Photography Introduction
edds
67
11k
Designing Experiences People Love
moore
138
23k
Transcript
ExpoRouterとEASを使った爆速MVP開発 React Native Meetup #15 ft. RevenueCat 24/03/19 アセンド株式会社 柗村裕
柗村 裕 w アセンド株式会社 プロダクトエンジニ w 物流スタートアップ1年) w 1社目・2社目はVR/ARの研究開発(Unity( w
ReactNative + Unity調 w ReactNativeのアプリ開S w 趣味:VALORANT, LoL, Twice, シーシ w 共通のものあればお声がけください! 自己紹介 @yu_mattzn
質問 Expoを使って開発したことある ExpoRouterを使って開発したことある EASを使ったことがある
はじめに モバイルアプリを開発することになった ReactNativeの経験はあったがCI/CDが完全に整った環境だっ Bitrise, fastlane, DeployGate, GithubActions, どれ使うか・・y
チームにモバイルアプリ開発の経験者がいなかっ 環境構築コストが面倒・・。watchman, cocoapods入れて・・y 時間が無い中人も足りなr が、メンバー全員フロントエンドもバックエンドもTypescriptで実装して フロントはNextJsでファイルベースルーティング => Expo RouterとEASで初速を上げよう!!!
Expo Expoの各サービスの理解 Expo SD ReactNativeでWeb/iOS/Androidのアプリを開発できるOSP React(UIライブラリ)に対するNextjsのような位
EAS (ExpoApplicationServicesE ExpoアプリをDeliveryするクラウドサービ Vercelのような位 Expo Route` 最近のSDKで搭載されたルーティングライブラS 海外の開発者がYoutubeで騒いでたことで知ってた
Expo 始め方 create-expo-appでNavigation (Typescript)を選択 -> Expo Routerが使えるように!
Expo 起動 expo starR D QRコードを読み取ると実機のExpoGo アプリで立ち上が0 D iでiOSシミュレー D
aでAndroidエミュレー D wでWebページで立ち上がる
Expo Expo Go k Expoで開発する際のサンドボックスツー k ExpoSDKに入ってるライブラリは全て利用可e k シミュレータや実機にビルドを入れ直す必要な k
CameraやNotificationsなどだけでなく SkiaやFlashListなども入っていまy k ExpoGoで開発できる範囲ならネイティブコードにコンパイルする必要な k watchman, CocoaPods, JDKなども不要
Expo Router Expo Router appフォルダ直下のファイル名が全てRoutingされ Webで開くときはリンクになるしアプリはdeeplinkにもな /
=> index.ts7 /about => about.ts7 /user/1234 => [id].tsx (動的ルーティング@ 共通のレイアウトを組むには_layout.tsxを使 同じ階層にあるページには全てlayout.tsxのレイアウトが適用
Expo Router 動的ルーティング
Expo Router Typed Routes h 遷移先を指定する際に、フォルダ構造からRoutingを判断し、Typescriptによる型推 論が効く(好き)
Expo Router Tabs React Navigationの知識が活き2 TabNavigatorのOptionが効く
Expo Router Tabsおまけ D フォルダ構造から勝手にタブを生I D 全てのRoutingがタブになってしまうので 子側のレイアウトを設定する必要がある
EAS EAS(Expo Application Services) 複数のサービス EAS BuilT アプリのバイナリをビルドするためのクラウドサービ
Storeに配布する用のビルド、内部のみの配布のビルドなどを簡単に設定可5 EAS Updat OTAアップデート. 再インストールさせることなくアプリをアップデートすX EAS SubmiQ AppStore, PlayStoreにアプリを配布する
EAS EAS(Expo Application Services) ある程度無料!!
EAS EAS Build D 30ビルドまで無$ D eas.jsonで設 D わずか3コマンドでビルド がホストされる
EAS EAS Update @ OTA Updat0 @ ストアのUpdateを挟まずにアプリをアップデート可能
EAS EAS Submit c EAS BuildでProductionBuildを行った後、Storeに提出でき1 c コマンドを打った後にAppStoreConnectにアプリが生成されていH c TestFlightですぐにダウンロードして動かせた
おまけ Expoのドキュメントについて i HomeとGuideg i この二つで左のメニューが切り替わ6 i ずっと気づかなかったけど、Homeにしかない 有益な情報やチュートリアル動画があるので 両方見ると良さそう
終わり ご静聴ありがとうございました ExpoRouter + EASを使って面倒な環境構築などを省いて初速を上げれたS 爆速開発をしていきたく、仲間募集中! こんな課題があるので詳しい方いたらぜひ話しかけてくださいS
モノリポでの開発の課c バックエンドのアプリがアプデされた時の対 強制アップデート