一度 Expo の採用を断念したけど、 再度 Expo の導入を検討している話

React Native Meetup #20 ft. meta & callstack! 登壇資料
https://react-native-meetup.connpass.com/event/340533/

Transcript

1. 一度 Expo の採用を断念したけど、 再度 Expo の導入を検討している話 2025/02/18 React Native Meetup #20 Sponsor Talk
2. 自己紹介 Ichiki プロダクト開発部 リードエンジニア recruit → 起業 → freelance → seqsense (startup) → mybest (now) React 歴は7 年、React Native 歴は4年ぐらい (ブランクあり) •経歴 @ichiki1023 息子たち (2歳 & 0歳)と遊ぶこと •趣味
3. 一度 Expo の採用を断念したけど、 再度 Expo の導入を検討している話 内容としてはContinuous Native Generation(CNG)の話を中心にします 改めて本日のテーマ
4. 1. アプリ版マイベストの歴史 Index 3. (当時) なぜ Expo を断念したのか 4. なぜ再度 Expo の導入を検討しているのか 　　Continuous Native Generation ( CNG ) の登場 5. まとめ 2. (当時) なぜ Expo を採用したかったのか
5. 1. アプリ版マイベストの歴史
6. 1. アプリ版マイベストの歴史 20xx… 2025 2024 2023 2022 iOS版リリース Android版リリース ... アプリ版開発開始 Expoから 素のReact Nativeへ 2022年からReact Native x Expoでの開発を開始。その後2022年の末にExpoをやめて素のReact Nativeで作り直した。 素のReact Nativeでの開発
7. 2. (当時) なぜ Expo を採用したかったのか
8. 2. (当時) なぜ Expo を採用したかったのか (当時の) Expo の印象 (2019 ~ 2020 頃) • React Native製のフレームワーク • ネイティブ周りの設定・実装を触らずにネイティブの機能を開発できる • OTA(Over-The-Air)アップデートや証明書関連などアプリ開発に必要な周辺のエコシステムが充実し ている
9. 2. (当時) なぜ Expo を採用したかったのか (当時の) Expo と素の React Native の比較 (2019 ~ 2020 頃) Expo (Managed Workflow) • メリット ◦ ネイティブ環境の管理を Expo に任せて、JavaScript に集中できる • デメリット ◦ カスタマイズの自由度が制限され、特定のネイティブライブラリや機能にアクセスする際に制約が生じる 素のReact Native or expo eject (Bare Workflow) • メリット ◦ ネイティブコードのフルカスタマイズが可能で、自由度の高いアプリ開発ができる • デメリット ◦ ネイティブ設定やビルド管理を自分で行う必要があるので手間がかかる
10. 2. (当時) なぜ Expo を採用したかったのか (当時の) Expo と素のReact Native の比較 (2019 ~ 2020 頃) 特徴 Managed Workflow 素のReact Native or Bare Workflow 依存関係 Expo SDKとそのツールチェーンに依存 Expo SDKに依存しない、もしくは一部依存 設定の楽さ すべて自動で設定され、即座にアプリが動作 手動設定が必要で、iOSやAndroidの設定をカスタマイズでき る カスタマイズ 限定的なカスタマイズ（特定のExpo APIに依存） 高いカスタマイズ性（ネイティブコードを自由に変更可能） ネイティブコードアクセス Expo SDK経由でアクセス可能（全てのネイティブ コードは提供されていない） 完全なアクセスが可能（iOS/Androidディレクトリの変更が自 由）
11. 2. (当時) なぜExpo を採用したかったのか (当時の) Expo を採用する上での選択肢 (2019 ~ 2020 頃) • Expo SDK で提供されている範囲内でアプリ開発をする場合 → Expo (Managed Workflow) • 独自のネイティブ実装 or ネイティブのライブラリを利用したいケースが 1 つでもある場合 → 素のReact Native or Bare Workflow (expo eject)
12. Web の開発経験が多いチームだったので Expo (Managed Workflow) にしたかった
13. 3. (当時) なぜ Expo を断念したのか
14. 3. (当時) なぜ Expo を断念したのか ネイティブ依存なライブラリの利用 | 独自のネイティブ実装 or ネイティブのライブラリを利用したいケースが 1 つでもある場合 • Expo SDK 範囲外のネイティブ依存なライブラリを利用する必要があった • さらに認証周りでネイティブモジュールの実装が必要な箇所があった
15. 3. (当時) なぜ Expo を断念したのか ネイティブ依存なライブラリの利用 | 独自のネイティブ実装 or ネイティブのライブラリを利用したいケースが 1 つでもある場合 • Expo SDK 範囲外のネイティブ依存なライブラリを利用する必要があった • さらに認証周りでネイティブモジュールの実装が必要な箇所があった 最終的には Expo なしの 素の React Native なアプリの開発を選定
16. 4. なぜ再度 Expo の導入を検討しているのか
17. 4. なぜ再度 Expo の導入を検討しているのか Continuous Native Generation(CNG) と Expo Modules API の登場 • ExpoにContinuous Native Generation (CNG)という概念 と Expo Modules API が登場した 🎉 • これにより、素の React Native プロジェクトでも Expo をフレームワークとして選択することが可能に なった • 今回はその中の CNG について詳しく解説します！ 参考 - Continuous Native Generation - What is Continuous Native Generation?
18. What?
19. 4. なぜ再度Expoの導入を検討しているのか 一旦 素の React Native を整理 npx @react-native-community/cli@latest init AwesomeProject shell https://reactnative.dev/docs/getting-started-without-a-framework
20. 4. なぜ再度Expoの導入を検討しているのか 一旦 素の React Native を整理 npx @react-native-community/cli@latest init AwesomeProject shell 新しいOS ver が頻繁にリリースされるので、開発もその都度対応を行う必要がある 最新のOSアップデートへの追従が大変 プロジェクトが大きくなるにつれてサードパーティの依存関係が増えるので 複雑度が増し、修 正するのが大変になる 依存関係の複雑さ https://reactnative.dev/docs/getting-started-without-a-framework
21. そこで Continuous Native Generation(CNG) の登場
22. Continuous Native Generation(CNG) のアプローチ CNGでは、ios, androidのネイティブに関わる設定やカスタマイズの実装だけをプロジェクトで持つ。代わりにいくつかの設定ファイルを用意してネイティブの実装 に必要な定義をそこで宣言する。 input output 4. なぜ再度 Expo の導入を検討しているのか Native Template native project template 設定ファイル + ネイティブのプロジェクト は含まない CNG Lifecycle /ios xxx.xcodeproj ….etc /android build.gradle ….etc ネイティブ周りの設定 設定ファイル ネイティブ周りの設定
23. Expo の CNG (Expo Prebuild) だとこんな感じ prebuild時にExpoが提供するNativeのproject templateと合わせてios, androidのディレクトリがそれぞれ生成される。 npx expo prebuild prebuild前 prebuild後 4. なぜ再度 Expo の導入を検討しているのか Native Template native project template app.json package.json (OP) config plugins (OP) config plugins app.json package.json (OP) config plugins (OP) config plugins + + + .gitignore /ios /android prebuild lifecycle /ios xxx.xcodeproj ….etc /android build.gradle ….etc
24. 4. なぜ再度Expoの導入を検討しているのか CNG 登場後の React Native パターンを改めて整理 特徴 Expo 完全管理型 （従来の Managed Workflow） Expo ハイブリッド管理型 （CNG を活用するスタイル） 独自管理型 （従来の Bare Workflow or 素のReact Native） 依存関係 Expo SDKとそのツールチェーンに依 存 Expo SDKに依存し、ネイティブコード は自動で生成される Expo SDKに依存しない、もしくは一部依存 設定の楽さ すべて自動で設定され、即座にアプリ が動作 Expo SDKに依存し、iOSとAndroidの ネイティブコードが自動生成される 手動設定が必要で、iOSやAndroidの設定を カスタマイズできる カスタマイズ 限定的なカスタマイズ（特定のExpo APIに依存） 自動生成されたネイティブコードにカ スタマイズが可能 高いカスタマイズ性（ネイティブコードを自由に 変更可能） ネイティブコードアクセ ス Expo SDK経由でアクセス可能（全て のネイティブコードは提供されていな い） ネイティブコードは自動生成され、カス タマイズ可能 完全なアクセスが可能（iOS/Androidディレク トリの変更が自由）
25. 4. なぜ再度Expoの導入を検討しているのか Answer: CNG (= Expo Prebuild) の登場により、ネイティブ依存がある アプ リでも Expo の恩恵を十分に受けられるようになったから (Expo Modules API + Config Plugins と組み合わせる前提で)
26. 5. まとめ
27. • CNG の登場により、ネイティブ依存が多いプロジェクトでも Expo を採用する選択肢ができた • 素のReact Native (or Bare Workflow) から Expo 回帰する流れは今後増えそうな予感 まとめ
28. React Nativeに興味のある 新しい仲間を絶賛募集中！ We are hiring！
29. ご清聴ありがとうございました