React Nativeで運用しているアプリにExpoを導入する - 計画編 -

Transcript

1. React Nativeで運用しているアプリに Expoを導入する – 計画編 – 2025/06/25 React Native Meetup #22 Sponsor Talk
2. @_teppeita 株式会社マイベスト ・フロントエンドエンジニア ・開発部イネーブリングチーム ・主にWebフロントエンドとアプリの技術課題解決を担当 自己紹介 Teppei Takeo
3. 月間利用者 数 3,000 ユーザーの “選択”を サポートするサービス 万人以 上 （2024年11月時点）
4. iOS版 Android版 iOS / Androidともに公開されています。 アプリはReact Nativeで開発
5. 本日のテーマ Expo導入しようとしてます 導入検討のヒントになれば 画像
6. Expo導入の目的 Index 1 導入計画 2 進捗と気づき 3 今後 4
7. Expo導入の目的
8. Expo導入の目的 Expoの概要と一般的なメリット • React Nativeが公式で推奨しているフレームワークの 1つ https://reactnative.dev/docs/environment-setup • ネイティブ絡みの設定・実装が比較的容易になる（ほとんどが JS・JSONで対応可能） • Expoが開発しているネイティブ絡みのライブラリ群が使えるようになる • EASを使うことでビルド・リリースが簡単になる • React Nativeのバージョンアップも簡単になる
9. Expo導入の目的 マイベストがExpo導入する主な狙い • Webエンジニアでも開発しやすくしてチーム間の流動性を高める ◦ ネイティブレイヤーを触る必要性が減る ◦ Expo Routerでファイルベースルーティングにでき、ルーティング周りのキャッチアップ が容易になる • EAS Updateで効率的にリリースができるようになる ◦ OTA Update自体は別ライブラリでも可能（実際導入している）だが、 EAS Updateは 差分更新などパフォーマンスや運用効率が良さそう
10. 導入計画
11. 導入計画 前提：マイベストの現状 • 素のReact Nativeで開発・運用 • 一部ネイティブ実装のライブラリを使用 ◦ 認証系、カメラ・写真、パーミッションなど • 外部SDKも導入している ◦ Firebase、KARTE、Adjustなど • Native Modules実装もLINEログインのために存在
12. 導入計画 計画の前提・工夫ポイント • 機能開発は継続する • なるべく既存の仕様や運用を維持して移行期間を短くする ◦ →機能開発への影響とコンフリクトの発生を最小限にするため ◦ （ライブラリの移行や EASによるビルド・リリースは一旦後回し） • 事前に不確実性の高い部分が問題なく移行できるか確認（ Native Modules利用箇所など） • 早い段階でExpoを使ってアプリ起動できるところまで進める ◦ →以降の動作確認ができるように • Prebuildと元コードを比較して、ネイティブ実装の差分が無い状態を目指す（後述）
13. 導入計画 補足：Prebuildとは Expoでは、ios/androidディレクトリは • 直接編集せずGit管理もしない • prebuildコマンド実行で自動生成する • 内容は、app.jsonやapp.config.jsなどを介して調整する また、Prebuildによって生成されるコードは、 素のReact Nativeで管理するios/androidディレクトリとほとんど同じ →移行時は差分比較によって機能の過不足が無いかを確認できる
14. 導入計画 レポジトリ戦略 同じレポジトリにそのまま導入？ 🤔 　→少し試したところ、既存ファイルの影響で謎のエラーになったり、 Expoのドキュメント通り進まな い箇所が出てきて断念 別レポでExpoで新規作成して移行？ 🤔 　→検討したが、現行との差分確認も重要・既存コードの複製も手間なので却下
15. 導入計画 レポジトリ戦略 【結論】 同じレポジトリで導入 ただしExpoで必要なファイルのみを残しそれ以外は OLDディレクトリを作成して退避 • 既存の設定が干渉せずに済む • 後でOLDを削除することで余計なファイルを減らせる • 導入中に必要なファイルがあれば OLDから戻すだけ • 手元で新旧の差分比較がしやすい
16. 導入計画 ブランチ戦略
17. 進捗と気づき
18. 進捗と気づき 現在の進捗 できたこと ✅ 事前にNative Modulesなどを移行して動作確認 ✅ Expoを導入して、ローカルで Prebuildを実行しアプリを起動 ✅ 環境ごとのconfig分岐 対応中 ☑ Push通知→expo-notificationsを使うことに ☑ アイコン・スプラッシュスクリーンの設定 ☑ ビルド・リリース設定 ☑ 細かい動作確認
19. 進捗と気づき つまづいたこと LINEログイン • Native Modulesで実装しており簡単に移行できるかと思っていたら意外と大変だった • Expo ModulesのライフサイクルAPIの理解（後日Zennに書きます） • Native Modules実装との対応関係を整理して移行する必要があった envの扱い（react-native-config） • 環境変数の扱いの見直しが必要そうだと判明 • しかし、色々試した結果、 config-pluginsを使って暫定対応できた ◦ withReactNativeConfigPlugin.jsというファイルを自作
20. 進捗と気づき 悩んでいること OTA（EAS Update）の運用どうするか • 今はOSSで対応しているが、EASに乗り換えて料金を支払うべきか • OTAかストアリリースかの基準 ◦ 今はネイティブの変更を含まなければ OTAとしている ◦ ベストプラクティスが分からない
21. 今後
22. 今後 次の計画 対応中 ☑ Push通知の確認→expo-notificationsを使うことに ☑ アイコン・スプラッシュスクリーンの設定 ☑ ビルド・リリース設定 ☑ 細かい動作確認 Expo導入後 • EASを利用 • Expo Router入れる →導入後どうなったのかを、またどこかで発表できたら良いな 💭
23. ご清聴ありがとうございました
24. Appendix 参考文献 • Install Expo modules in an existing React Native project ◦ https://docs.expo.dev/bare/installing-expo-modules/ • Why Expo is a great fit for new and existing React Native apps ◦ https://expo.dev/blog/why-expo-is-a-great-fit-for-new-and-existing-react-na tive-apps • How I migrated my bare React Native app to Expo ◦ https://expo.dev/blog/how-i-migrated-my-bare-react-native-app-to-expo