Zenn
Fusic 技術ブログPublicationへの投稿
😺

Expoキャッチアップ会 〜Expo SDK 50まとめ〜

taketada323
2024/01/31に公開
JavaScript
React Native
Expo
tech

みなさんこんにちは、株式会社Fusicのフロントエンドチーム「雅」の夛田です。

チーム雅では、スマートフォンアプリ開発にReact Nativeの開発プラットフォームであるExpoを利用しております、今回はチーム内でExpo SDK 50のリリースノートの読み合わせをしたものをまとめました。

Expo SDK50 リリースノート

Expo SDK 50 - Expo Changelog

Introducing Expo Dev Tools Plugins

これは、開発者（特にライブラリ開発者）が、ライブラリ／アプリをデバッグするためのブラウザベースの基盤が提供される、よく利用されるツールのプラグインも作成しているとのこと。

  • Apollo Client
  • TanStack Query
  • TinyBase
  • React Native Async Storage
  • React Navigation（Expo Routerとも互換性あり）

詳細はexpo/dev-pluginsリポジトリ参照

GitHub - expo/dev-plugins: Out-of-tree Expo devtools plugins for packages that haven't adopted the Expo devtools plugin system yet.

Dev tools plugins に関しての詳細は下記で紹介されている。

Dev tools plugins

New and improved SQLite and Camera APIs

expo-sqlite/next

expo-sqlite/next

  • Expoの旧SQLiteライブラリを書き直したSQLite(Next)

  • 同期的や非同期両方に対応したメソッドを用意した（例: executeSync() or executeAsync()など）

  • Prepared statements （PREPAREやEXECUTE）

    • Callbackの変更もあり
    • Blob型のサポート
    • OSに依存したSQLiteバージョンではなく、両方3.42.0へ統一された
    • これによりCR-SQLite （Gitみたいなもの）のようなSQLite拡張をサポートできるようになった

  • local-first applifcation architecture などのパターンが出てきており、SQLiteはより重要になってきている

expo-camera/next

expo-camera/next

  • 新しいCamera API

  • iOS用のStatic Methodsが増えている（dismissScanner() や launchScanner() など）

  • コンポーネント名が Camera → CameraView に変更

Introducing @expo/fingerprint

アプリのJavaScriptバンドルと、アプリの特定のビルドと互換性の確認を可能にするfingerprintが用意された。フィンガープリントに差分がない場合はOTAアップデートの互換性が担保されている。逆にフィンガープリントに差分がある場合は、ネイティブモジュールに変更があることを意味しOTAアップデートでは適応できない変更を含んでいる。GitHub Actionsも用意されており、PRごとに検知できる可能。
ただし、config-pluginsを利用している場合は正しくフィンガープリントが生成されない場合があるので、config-pluginsを（無名関数を使わないなど）修正が必要な場合がある。詳しくはこちらを参照

Expo Router v3

  • 多くのバグフィックスと安定性の向上、ドキュメントの改善、Webサポート、テスト、およびタイプの改良が行われた。
  • 静的ウェブサイト（ npx expo export -p web）のエクスポートが2倍高速化が2倍以上高速化された。
  • webプラットフォームの基本バンドルサイズが30%小さくなった。
  • ユニバーサルAPIルートの実験的なサポート。Expo Router v3のAPIルートを使用すると、アプリディレクトリ内で、すべてのプラットフォーム用のサーバーコードを記述可能に。
    • カスタムサーバロジックを実装できる。
    • クライアント側では書くとまずいAPI keyなど機密情報を含む処理を書ける。
    • WinterCG に準拠した環境で実行可能。
    • 拡張子が +api.js と定義すると、APIルートと判定される。
    • 実験的ではあるが、Netlify・Vercelにデプロイ可能。
  • Expo Router v3はsdk50のみで動作するため、Expo Router v3を利用する場合はsdkのバージョンアップが必要。

EAS Build

  • Xcode 15.2がデフォルトのmacOSワーカーになった。詳細はこちら
  • JDK 17とUbuntu 20がデフォルトのLinuxワーカーになった。詳細はこちら
  • 2023/11/27からNode 18がデフォルトになった。詳細はこちら
  • EAS Buildのダッシュボードに表示されるビルドログの警告とエラーが向上。詳細はこちら
  • CocoaPodsのキャッシュによるビルド高速化。詳細はこちら
  • Expo Orbit v1リリース。詳細はこちら
  • Bunのサポート
  • .nvmrcをEAS CLIが読むようになったのでNodeバージョンを設定できるようになった。
  • eas build:delete コマンドの追加
  • ビルドをフルカスタマイズ（GitHub Actionsのように）できるようになった（今はPreviewだが数ヶ月後にはGAになる予定）。詳細はこちら

EAS Update

useUpdate() フックの追加

useUpdates()という、updates APIとのやり取りをシンプルに実装できるフックが利用できるようになった。

import { useUpdates } from 'expo-updates';

export default function App() {
  const {
    currentlyRunning,
    availableUpdate,
    isUpdateAvailable,
    isUpdatePending,
    // and so on!
  } = useUpdates();

  // etc..
}

詳細については、下記に記載。

Updates

デモも用意されており、Updates周りの実装にとても参考になる。

GitHub - expo/UpdatesAPIDemo: Demo app showing the useUpdates() API

ダッシュボードに新機能が追加

SDK50と直接関連があるわけではありませんが、Expo ダッシュボードにて、新しいチャンネルの作成や削除、アップデートの再公開などが実施できるようになった。

EAS Update: new dashboard UI features - Expo Changelog

Rollbacks

Eas Updatesを取り消すことができるようになった。

この機能によって、誤ってEas Updatesを実施してしまった時に、以前のEas Updatesした状態、もしくはEas Buildsした時の状態に戻すことができるようになった。

今までは、誤ってEas Updatesを実施した場合、誤った箇所を修正するEas Updatesを再度実施するしかなかったため、Rollbacks により状態を戻せるようになったのはとても朗報。

詳細は下記に記載されています。

Rollbacks

Rollouts

今までは、EAS Updateを実施すると対象全てにUpdateが実施されていたが、Rollouts機能により、順次反映ができるようになった。

Rolloutsを実施するユーザーの割合も決めれるようで、慎重にリリースしたい機能に利用するととても便利そう。

Rollouts

Basic Expo Modules support for tvOS and macOS

Expo Modules APIを使ってtvOSとmacOSのネイティブモジュールをビルドできるようになった。

  • use_expo_modules! メソッド（Expoモジュールをオートリンクしてくれる）がtvOSとmacOSターゲットで使えるようになった（podspecでplatformを指定する必要あり）。https://github.com/expo/orbit/pull/130
  • いくつかのパッケージがtvOSに対応した（expo-application, expo-av, expo-constants, expo-device, expo-file-system, expo-font, expo-image, expo-keep-awake, expo-localization, expo-splash-screen, expo-updates, @expo/cli）。詳細はこちら。
  • いくつかのパッケージがmacOSに対応した（expo-constants, expo-file-system, expo-keep-awake）。今後も増える予定。さらに npx expo start も対応させる予定。
  • Expo Orbitでも使われている。

First-class Expo support in Sentry

Other Highlights

  • React Nativeのバージョンが0.73に
  • expo-font config pluginでネイティブ・プロジェクトにフォントを埋め込むことが可能に。
  • expo-secure-storeが改良された。iOS・Androidでネイティブレベルでの実装の差分以外は、可能な限り動作が統一された模様。これまでsecure-storeに内データへのアクセスはiOSではnullを返し、Androidでは例外がスローされていたが、Androidでもnullを返すように統一された。
  • expo-dev-clientで開発ビルドを起動したときに、デフォルトで最近開いたプロジェクトを読み込むようになった。
  • npx expo runコマンドが追加。プラットフォームの指定がない場合は、対話型でiOSかAndroidの選択肢が表示される。
  • npx expo install --fixで expoのパッケージを最新のパッチバージョンにアップグレードできるようになった。
  • MetroでWebのバンドル分割がデフォルトで有効化
  • エラーメッセージの改善。コンポーネントベースのエラーに対する完全なスタックトレースが提供されるようになった。
  • React Native JS debugger UIのプレビュー版が利用可能に。
  • @expo/webpack-configのdeprecatedに。将来、削除される予定
  • web版ではデフォルトでCSSが利用可能に。
  • Xcodeからアプリを実行する際に、Bundlerが自動的に起動しなくなった。

Notable breaking changes

  • Android SDK 34、AGP 8、Java 17に上がります。ローカルでビルドする場合はJDK17が必要になった。
  • Androidの最小サポートバージョンがAndroid 6（API 23）に引き上げられた。
  • iOSの最小デプロイメントターゲットが13.4に引き上げられた。
  • Expo CLIとReact NativeにはNode 18+が必要になりました。また、11月27日にEASビルドのデフォルトのNodeバージョンをNode 18に引き上げられた。
  • Expo SDK 50を使用するプロジェクトはクラシックアップデートをサポートされない。
  • @expo/vector-iconsが更新され、react-native-vector-icons@10.0.0: FontAwesome6のサポートが追加され、IoniconsとMaterialIconsも変更されました。特に、Ioniconsのios-とmd-接頭辞付きのアイコン名は、接頭辞がなくなった。TypeScriptを使用している場合は、アップデート時に変更されたアイコン名について警告が表示されるようになる。
  • ほとんどの expo-updates JavaScript API は Expo Go または expo-dev-client を使用した開発ビルドでは利用できなくなった。expo-updates JavaScript インターフェースを通じて公開される API の大部分 (たとえば、checkForUpdateAsync、fetchUpdateAsync など) は、実運用ビルドで使用するように設計されている。開発ビルドでは、Expo GoとExpo-dev-clientが、これらの環境での更新のロード方法を制御される。
  • React Native 0.73では、AndroidのMain*クラスにある。MainApplication.java/MainActivity.javaがMainApplication.kt/MainActivity.ktのようにJavaからKotlinに変更されました。これらのファイルを変更するために破壊的な変更を使用する設定プラグインに依存している場合、SDK 50のサポートのために更新する必要があるので注意。
  • React NativeのProgressBarAndroidとProgressViewIOSコンポーネントは、長い間非推奨となっていましたが、0.73で削除された。
  • プロジェクトでExpo Router v3 betaを使用している場合は、こちらのセクションを参照。

🧹 Expo Go: Dropped SDK 47 and 48

  • Expo Goでサポートバージョンの数を減らすため、SDK 47および48のプロジェクトは最新バージョンのExpo Goでは動作しなくなる。Androidデバイス/エミュレータまたはiOSシミュレータ用の旧バージョンのExpo Goをインストール可能。詳しくはこちら

サポート対象外となった背景

  • 元々はSDK 49用のExpo GoはSDK 47、48、49のプロジェクトをサポートしていたように複数のSDKバージョンをサポートしていたが、その後方互換性がリリースに対する負荷となってしまった。
  • Expo SDKの単一バージョンをExpo Goに含めても、Expoツールを使用するほとんどの開発者に大きな影響はないと予想しているため旧バージョンのサポートは不要だと判断。

Known issues

  • SDK50のSnackサポートはまだ。
  • Expo Go for iOSでは、ソースマップが正しく動作せず、JavaScriptデバッガが接続されない。この問題は、development buildsでは発生しない模様。

➡️ Upgrading your app

アプリをExpo SDK49から50にアップグレードする方法まとめ

  • EAS CLIの最新バージョンにアップデート。

    npm i -g eas-cli

  • 新しいバージョンのExpoパッケージをインストール。

    npm install expo@^50.0.0

  • すべての依存関係をSDK 50に合わせる。

    npx expo install --fix

  • package.jsonにresolutions/overridesがある場合は確認する必要がある例えば、以前のSDKリリースでexpo-router用に追加した場合は、metroとmetro-resolverのオーバーライドを削除する必要がある。

  • 既存の問題がないかを確認。

    npx expo-doctor@latest

  • アプリに影響を与える可能性の高い変更については、"Deprecations, renamings, and removals”のセクションを参照。

  • その他の変更点については、こちらを参照。

  • 必要に応じてXcodeをアップグレードする。

    ネイティブのiOSプロジェクトをコンパイルするにはXcode 15が必要。SDK 50はXcode 15.2が推奨される。EAS Buildの場合、イメージの指定がないプロジェクトのデフォルトはXcode 15.2になる。

  • Expo Routerを使用する場合はv3の変更点を確認。

  • Continuous Native Generationを使用していない場合かつiOSプロジェクトが存在している場合は、以下を実行。

    npx pod-install

  • Expoモジュールを管理している場合は…

    • androidの場合

      この変更に合わせてライブラリの build.gradle を更新。

      またこのFYIページで説明されているように、JVMターゲットバージョン設定を削除することも可能。

    • iOSの場合

      この変更に合わせて、プラットフォームのデプロイメントターゲットを '13.0' から '13.4' に更新。

  • configプラグインを変更している場合は、MainActivity.javaとMainApplication.javaがKotlinへの移行の影響で動作しない場合があるので確認する必要がある。

  • Expo Goを使用している場合は、デバイスならアプリのアップデートが必要。シミュレータなら自動更新される。

  • expo-dev-clientでビルドを使用する場合は、アップグレード後に再度新しいビルドを作成する。

Fusic 技術ブログ
Fusic 技術ブログPublication

さまざまな個性を受け入れて有機的につなぐ社内環境を整える。あらゆる事業機会の創出と実現を繰り返し、世の中に対する視点を絶えず増やして成長していく。あっと驚くような角度から発展できるポイントを見つけ、そこにいい感じにフィットする形でテクノロジーを組み込んで、世の中をちょっとずつ、時には大胆にアップデートしつづけていく。

Discussion