bare work flowのExpo SDKを49から50に更新した話

menu事業部 フロントエンドエンジニアの午菴です。 先日、AppleからApp Store Connectへのアップロード要件にXcode 15でビルドしていることが追加され、Expo SDKのバージョンを49から50へ更新する必要がありました。 menuはbare workflowで開発しており、更新作業はほとんど手動で行う必要があります。今回は更新手順と得た学びについて書いていきます

更新手順

[前提: 現環境の主要ライブラリとバージョン]
- expo: v49.0.22 ★
- react: v18.2.0
- react-native: v0.72.6
- redux: v4.0.5
- typescript: v5.1.3
- lottie-react-native: v5.1.6 ★
- yarn: v1.22.19
- node: v18.19.0
★: 本題に関わる部分

  1. Expoのバージョンを更新
    yarn add expo@latest*1
  2. sentryのライブラリをsentry-expoから@sentry/react-nativeに変更
    こちらのガイドを参考に、以下のコマンドを実行
    yarn remove sentry-expo && npx expo install @sentry/react-native && npx @sentry/wizard@latest -s -i reactNative*1
  3. 各種ライブラリの更新
    npx expo install --fix
    3.5. lottie-react-nativeの更新対応 バージョンが5系から6系に更新されたので、ドキュメントを参考にimportの変更やコンポーネントの変更に対応
  4. iOSおよびAndroidのコードを変更
    それぞれこちらのリンクを参考にネイティブコードを変更。iOSは追加対応として、npx pod-installコマンドを実行し、Androidでは、R8の更新があったので必要なルールを追加
  5. 最後に、全ての変更が正しいことを確認するため、ログイン機能と注文機能、更にOTAアップデートが正常に動作するか検証

更新のメリット・デメリット

この更新によりプラットフォームの変更に追従したり、Expoの新機能を利用できるようになりました。 しかし、ライブラリの更新によっては下位互換性を失い、新たな不具合が発生する可能性があります。また、更新作業は時間がかかり、それが開発全体に対する負荷となります。

学び

これまでExpo SDKの更新は主にシニアエンジニアが担当していましたが、今回私たちジュニアも直接経験することで、ネイティブコードや難読化、sentryに関する新しい知識を得ることができました。

結論

開発工数を考慮すると、多くの変更箇所を伴うbare workflowは、必要性が強く感じられない限り更新が困難です。更新頻度が低下すると、大きなバージョン差を埋める際に取るべき工数や発生しうるリスクが増大します。CNG*2に移行することでアップデートに対するハードルが下がり、より定期的な更新が可能になると思います。

*1: latestは更新作業時点のバージョンです
*2: CNG(Continuous Native Generation)とは、ネイティブコードを生成するためのコードを事前に用意しておく概念のことです。 docs.expo.dev