ExpoRouterとEASを使った爆速MVP開発

ReactNativeMeetup #15. 23/03/19 のLTで発表しました

Transcript

1. ExpoRouterとEASを使った爆速MVP開発 React Native Meetup #15 ft. RevenueCat 24/03/19 アセンド株式会社 柗村裕
2. 柗村 裕 w アセンド株式会社 プロダクトエンジニ€ w 物流スタートアップ1年) w 1社目・2社目はVR/ARの研究開発(Unity( w ReactNative + Unity調 w ReactNativeのアプリ開S w 趣味：VALORANT, LoL, Twice, シーシ‚ w 共通のものあればお声がけください！ 自己紹介 @yu_mattzn
3. 質問 Expoを使って開発したことある ExpoRouterを使って開発したことある EASを使ったことがある
4. はじめに モバイルアプリを開発することになった š ReactNativeの経験はあったがCI/CDが完全に整った環境だっ‰ š Bitrise, fastlane, DeployGate, GithubActions, どれ使うか・・y š チームにモバイルアプリ開発の経験者がいなかっ‰ š 環境構築コストが面倒・・。watchman, cocoapods入れて・・y š 時間が無い中人も足りなr š が、メンバー全員フロントエンドもバックエンドもTypescriptで実装して‰ š フロントはNextJsでファイルベースルーティング => Expo RouterとEASで初速を上げよう！！！
5. Expo Expoの各サービスの理解 ‘ Expo SD‰ ‘ ReactNativeでWeb/iOS/Androidのアプリを開発できるOSP ‘ React(UIライブラリ)に対するNextjsのような位’ ‘ EAS (ExpoApplicationServicesE ‘ ExpoアプリをDeliveryするクラウドサービ˜ ‘ Vercelのような位’ ‘ Expo Route` ‘ 最近のSDKで搭載されたルーティングライブラS ‘ 海外の開発者がYoutubeで騒いでたことで知ってた
6. Expo 始め方 create-expo-appでNavigation (Typescript)を選択 -> Expo Routerが使えるように！
7. Expo 起動 expo starR D QRコードを読み取ると実機のExpoGo アプリで立ち上が0 D iでiOSシミュレー D aでAndroidエミュレー D wでWebページで立ち上がる
8. Expo Expo Go k Expoで開発する際のサンドボックスツー“ k ExpoSDKに入ってるライブラリは全て利用可e k シミュレータや実機にビルドを入れ直す必要な k CameraやNotificationsなどだけでなく
 SkiaやFlashListなども入っていまy k ExpoGoで開発できる範囲ならネイティブコードにコンパイルする必要な k watchman, CocoaPods, JDKなども不要
9. Expo Router Expo Router ˜ appフォルダ直下のファイル名が全てRoutingされˆ ˜ Webで開くときはリンクになるしアプリはdeeplinkにもなˆ ˜ / => index.ts7 ˜ /about => about.ts7 ˜ /user/1234 => [id].tsx (動的ルーティング@ ˜ 共通のレイアウトを組むには_layout.tsxを使 ˜ 同じ階層にあるページには全てlayout.tsxのレイアウトが適用
10. Expo Router 動的ルーティング
11. Expo Router Typed Routes h 遷移先を指定する際に、フォルダ構造からRoutingを判断し、Typescriptによる型推 論が効く(好き)
12. Expo Router Tabs React Navigationの知識が活き2 TabNavigatorのOptionが効く
13. Expo Router Tabsおまけ D フォルダ構造から勝手にタブを生I D 全てのRoutingがタブになってしまうので
 子側のレイアウトを設定する必要がある
14. EAS EAS(Expo Application Services) 複数のサービス⁨• ‰ EAS BuilT ‰ アプリのバイナリをビルドするためのクラウドサービ˜ ‰ Storeに配布する用のビルド、内部のみの配布のビルドなどを簡単に設定可5 ‰ EAS Updat„ ‰ OTAアップデート. 再インストールさせることなくアプリをアップデートすX ‰ EAS SubmiQ ‰ AppStore, PlayStoreにアプリを配布する
15. EAS EAS(Expo Application Services) ある程度無料！！
16. EAS EAS Build D 30ビルドまで無$ D eas.jsonで設 D わずか3コマンドでビルド
 がホストされる
17. EAS EAS Update @ OTA Updat0 @ ストアのUpdateを挟まずにアプリをアップデート可能
18. EAS EAS Submit c EAS BuildでProductionBuildを行った後、Storeに提出でき1 c コマンドを打った後にAppStoreConnectにアプリが生成されていH c TestFlightですぐにダウンロードして動かせた
19. おまけ Expoのドキュメントについて i HomeとGuideg i この二つで左のメニューが切り替わ6 i ずっと気づかなかったけど、Homeにしかない
 有益な情報やチュートリアル動画があるので
 両方見ると良さそう
20. 終わり ご静聴ありがとうございました ” ExpoRouter + EASを使って面倒な環境構築などを省いて初速を上げれたS ” 爆速開発をしていきたく、仲間募集中！ こんな課題があるので詳しい方いたらぜひ話しかけてくださいS ” モノリポでの開発の課c ” バックエンドのアプリがアプデされた時の対 ” 強制アップデート