production.log

株式会社リブセンスでエンジニアをやっている星直史のブログです。

SnapmartアプリのExpo SDKのバージョンをv35.0.0からv37.0.0にアップグレードで対応したこと

概要

4月1日にExpo SDK v37.0.0がリリースされました。
Expo SDK 37 is now available - Exposition

自分が開発に携わっているSnapmartアプリではExpo SDK v35.0.0を使用していました。
Expo SDK v36.0.0がリリースされた際は、Snapmartアプリにとって、アップグレードを行う強いモチベーションがなかったのですが、Expo SDK v37.0.0では、以下の機能が追加されたため、いち早く導入するためにアップグレードを行いました。

  1. Firebase Analyticsが使用可能になった
  2. SMS認証が使用可能になった

これまで、Expoマネージドのアプリ(ejectをしていないアプリ)では、アプリの解析に使用できるサービスはAmplitudeに限定されていました。
新興サービスであるため、情報が非常に少ないことや、安定性(=サービスの継続性)も非常に不安でした。
しかし、Expoマネージドアプリを運用する限りは、Amplitudeを使うしか道がない。という状態です。
今回のExpo SDKのアップデートでFirebase Analyticsを使用可能になったため、筆者はあえてAmplitudeを選択する理由はないと思い、既存のバージョン v35.0.0からv37.0.0のアップグレードを行うことにしました。

この記事ではSnapmartアプリのExpo SDKのバージョンをv35.0.からv37.0.0にアップグレードで対応したことを書き記したいと思います。

大まかな対応手順

対応は大まかに以下の手順にしたがって行います。

  1. Expoから提供されているexpo upgradeコマンドで、機械的にアップグレードを任せる
  2. 修正箇所を把握するために、changelogを確認し、Breaking changesを確認 & 修正を行う
  3. Expo Clientをアップグレードして動作確認
  4. 動作確認中に発生したエラーと警告を修正

ざっくりこんな感じです。作業の多くは、2, 4です。以下に説明を書いていきます。

Breaking changesを確認 & 修正

今回はExpo SDK v35.0.0 => v37.0.0のアップグレードとメジャーバージョン2つ分確認する必要があります。
影響の範囲を狭くしたほうが、問題の切り分けをスムーズに行えるため、まずはv35.0.0からv36.0.0と一つずつバージョンアップすることを強くオススメします。

Breaking changesを確認すると、Snapmartアプリで影響を受けそうな変更は以下でした。 *1

  • CameraRoll: Removed CameraRoll from react-native core, developers are encouraged to use expo-media-library instead

これは「react-native coreからCameraRollから削除されたため、expo-media-libraryせよ」という内容です。
Snapmartアプリではカメラから写真を選択し、アップロードする機能があり、これにCameraRoll.getPhotosを使用していました。

CameraRollからMediaLibraryへ変更

CameraRollからMediaLibraryへ変更する際、よかったことは、MediaLibraryはCameraRollの不具合が修正されていたことと、機能的に良くなっている点です。
具体的には、以下の通りです。

  • ファイルの種類の絞り混みで不具合が発生しない
  • アルバム名で絞り込みが正常に動作するようになった(不具合の修正)
  • 写真のソートができるようになった
  • アルバムの一覧を取得できるようになった

特にアルバムの一覧を取得できるようになったのは、かつて全ての素材をforEachでブン回してアルバム名を取得していたため、大幅な改善だと思います。

一方、MediaLibraryの唯一最大の難点は、写真の詳細情報をMediaLibrary.getAssetInfoAsync(asset)を使用しなければならないことです。
もちろんhasNextPageとendCursorを使用すれば、少しずつ取得できるため、オーバーヘッドは少なくなるはずなので、問題ありませんが、
全件取得し、全件詳細が必要な場合は、処理速度が問題になります。

動作確認中に発生したエラーと警告を修正

Breaking changesを使用したあとは実際に動作確認をしてみます。ここで発生したエラーと警告を修正していきます。*2

具体的に遭遇したエラーと警告で大きなものは「React 17で廃止されるunsafe lifecycle methodsの移行」です。 これは、React 16.9から警告が出るようになったため、このタイミングで対応することにしました。
もちろん、まずはバージョンアップしたアプリをリリースし、この警告は別途対応するという方針も有りだと思います。

手順は以下の通りです。

  1. 自前で書いているunsafe lifecycleを修正する
  2. インストールしているパッケージのライブラリのバージョンからlatestのバージョンまでのリリースノートに問題が修正されている確認
  3. 2で修正されている場合は、対応されているバージョン以上にupgradeする

今回は、警告が出た全てのパッケージがunsafe lifecycleの対応がされていたので、非常に助かりました。改めて、コントリビューターが多いOSSを選択することの重要さを感じました。

まとめ

今回は、SnapmartアプリのExpo SDKのバージョンをv35.0.0からv37.0.0にアップグレードで対応したことをまとめました。 大きくは、以下の対応を行いました。

  1. Breaking changesの修正
  2. React 17で廃止されるunsafe lifecycle methodsの修正

修正しなければならない箇所が比較的少なかったので対応期間も短くで済んだのは良かったです。 反省点としては、メジャーバージョンを一つ飛ばしてアップグレード対応をしたことです。
今回はそれによる影響が少なかったから良かったものの、問題の切り分けなどが難しくなりそうであるため、バージョンアップ対応は一段階ずつ行うのが良いと思います。

*1:以外と少なくてよかったです

*2:厳密には警告であるため修正する必要は必ずしもありませんが、多くは「次のメジャーバージョンで削除予定だよ」という類が多いので、今のうちに修正しておくことをオススメします