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

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

taketada323
2023/09/05に公開
React Native
TypeScript
Expo
tech

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

チーム雅では、スマートフォンアプリ開発にReact Nativeの開発プラットフォームであるExpoを利用しております。
今回はチーム内で以下のExpo SDK 49のブログを読んだものをまとめて、コメントを加えています。

https://blog.expo.dev/expo-sdk-49-c6d398cdf740

Integrated network debugging and React devtools

  • React devtoolsでネットワークデバッグができるようになった、これは嬉しい機能。
  • 今までネットワークデバッグの際にはCharlesなどを利用していた。
  • Hermesエンジンでの動作の仕組みに注目。
  • React devtoolsがExpo CLIに組み込まれている。

Debug in VS Code with the Expo Tools Extension

  • VS CodeのExpo Tools Extensionで実験的にデバッグできるようになった。
  • VS Code画面からデバイスやシミュレータ上にアプリを起動できるようになった。
  • 機会があれば使ってみたい。

Expo Router v2.0

  • v2.0ではTyped routesがサポートされた。
  • Next.jsのようなファイルベースのルーティングをもとに型が生成されるので便利。

Other Highlights

  • An assortment of improvements to Expo SDK modules

    • Expo SDKモジュールが色々改善。
    • 詳しくはCHANGELOGを確認。

  • Expo Modules API improvements.

    • npx create-expo-module --local で既存プロジェクトでカスタムのExpo Modules APIを使ったネイティブモジュールが導入できるようになった。
    • もともとスタンドアロンで作るしかなかった。
    • 早速使う案件で機会があったが、そのプロジェクト専用のネイティブモジュールが作れて便利だった。

  • Expo Go for the iOS simulator now runs natively on Apple silicon.

    • AppleシリコンのMacでExpo Goがインストールできるようになった。
    • TestFlightをMacでインストールしてからテストに参加したらインストール可能。
    • Simulator起動せずにMacで開発できるから便利では？
    • 使ってみたらちょっとUIに問題あり（レスポンシブになってないなど）。

  • Metro is now recommended for web. The @expo/webpack-config

    • Webアプリを作る時にはバンドラーの選択肢はWebpackとMetroの2つがあった。
    • Webpackのサポートはメンテナンスモードに入ったので、今後はMetroを使うのを推奨。

  • npx expo start no longer requires the --dev-client flag for development builds.

    • Developmentビルドで起動したい時に --dev-client をつけなくて良くなった。

  • expo export:embed has replaced the@react-native-community/cli bundle command in the “Bundle React Native code and images” build phase.

    • expo export:embed コマンドでエントリポイントがカスタマイズできるようになった。

  • Expo CLI now has built-in support for environment variables in Metro

    • .envに EXPO_PUBLIC_ プレフィックスをつけて、環境変数を設定するとビルドタイムで process.env.EXPO_PUBLIC_API_KEY のように使えるようになった。
    • 今までapp.jsonのextraとかに渡していたので便利。

  • Selectively opt out of package version validations.

    • npx expo install で各パッケージのバージョンがExpo SDKバージョンによって固定されていたのが、除外したいパッケージは expo.install.exclude キーをpackage.jsonに設定することで固定されるのを防げる。
    • あるパッケージがバグってたときの回避策として使えそう。

  • scheme in app config can now be an array.

    • スキームを複数指定したい時はConfig Pluginを使わなければいけなかったが、app.jsonでscheme: ['myapp', 'fb1234'] のように書けるようになった。

  • Experimental support for Fabric in expo-dev-client.

    • npx create-expo-app@latest -e with-new-arch　でexpo-dev-clientでNew Architectureで動かせるようになった。

  • Updated recommended TypeScript version to ^5.1.3.

    • Expo SDK 49からTypeScript 5になった。

  • React Native 0.72.3, React Native Web 0.19.6.

    • React NativeではMetroの変更が少し入ってるのと、エラーログが少し見やすくなった。
    • 詳しくはそれぞれのリリースノート（React Native / React Native Web）を確認。

Introducing EAS Insights

  • 利用ユーザー分析情報がダッシュボードで見れるようになった。
  • プレビューの間は無料で使える。
  • Expo SDK49のアプリじゃなくても既に一部は見れてそう。
  • 詳しい分析情報が不要ならわざわざFirebase Analyticsなどの他サービス使わなくてもこれで良さそう。

EAS Build

  • Added Xcode 14.3.1 image, the default for SDK 49 / React Native 0.72.

    • 新しいXcode14.3.1のイメージが追加。
    • デフォルトがSDK 49/React Native 0.72でビルドされる。

  • Large workers are now available for both Android and iOS builds.

    • Largeサイズのワーカーが利用可能になった。
    • LargeにするとiOSのビルドはM2 Mac環境で実行される。

  • Rename devices registered for iOS internal distribution with eas device:rename

    • iOS内部配信時の登録デバイスの名前をコマンドで変更できるようになった。
    • 従来は識別子のみ表示され、実際どの端末が分かりにくかった。

EAS Update

  • Expo Go is now more flexible and will open your project as long as the version of its expo dependency matches a supported SDK version.

  • Updates.checkForUpdateAsync (🔗) and Updates.fetchUpdateAsync (🔗) will no longer throw an error when the client successfully contacts the update server but there isn’t an update available.

    • expo-updatesでアップデートサーバーに問い合わせて更新がなかった場合　、HTTP 204 No Contentが返るようになった。
    • OTAアップデート中のタイムアウトエラーを補足処理は引き続き必要。

  • expo-updates on Android app now uses Brotli compression

    • expo-updatesでBrotliという圧縮形式を利用するようになった。
    • 15%以上JavaScriptの圧縮サイズが削減。
    • これはOTAアップデート時にダウンロードするサイズ減少に期待。

  • With the release of EAS Update, we are sunsetting “expo publish” and Classic Updates next year.

    • 来年Classic Updateが作成不能になる。
    • ただClassic Update終了前に公開された更新はその後も受信可能。
    • SDK49がClassic Updateをサポートする最後のバージョンとなる。

Deprecations, renamings, and removals

  • Updating your Android Expo Modules for Gradle 8:

  • sentry-expo major version bump:

    • 内部で使われているSentry React Native SDKがv5にメジャーアップグレード。
    • New Architecture対応。
    • v4使っている場合はマイグレーションページを要確認。

  • Expo CLI now defaults to port 8081 for all projects, rather than 19000.

    • Expo CLIのデフォルトポートは8081に変更される。

  • Remote debugging for JSC is disabled in Expo Go and expo-dev-client.

    • JSCによるリモートデバッグが無効になった。

  • Constants.manifest is deprecated; use Constants.expoConfig instead.

    • Constants.manifest がdeprecatedになった。
    • 既存プロジェクトではExpo SDKあげる際に対応していたので問題なし。
    • この変更はClassic UpdateからEAS Updateに変わった関係で行われた。

  • AuthSession proxy has been removed:

    • expo-auth-sessionのproxy機能が使えなくなる。
    • 理由はセキュリティの観点でexpo-auth-sessionでのGoogleやFacebookなどのサードパーティプロバイダに対応したログイン機能をやらない方が良いため。
    • 既に導入済みのプロジェクトはExpo GoからDevelopment buildに切り替える必要がある。
    • GoogleやFacebookログインはそれぞれのReact Nativeライブラリを使うのがおすすめ。

  • android:usesCleartextTraffic is now based on system defaults.

    • Android API 27以下ではusesCleartextTrafficがデフォルトtrueだった。
    • API 28からデフォルトfalseになる。
    • Charlesを導入するときに設定が必要になりそう。
    • セキュアじゃないネットワークリクエストを許可したい場合はexpo-build-propertiesでusesCleartextTrafficをtrueにしてあげる必要がある。

  • Reanimated 3 drops support for the legacy Reanimated API.

    • react-native-reanimated がレガシーAPIの対応を打ち切った。
    • 影響でるライブラリが多そう。

  • Support for expo-face-detector has been removed from Expo Go.

    • Expo GoのAppleシリコン対応のため、Expo Goでのexpo-face-detectorサポートがされなくなった。
    • このライブラリ自体あまり使う機会がないので特に影響なし。
    • 使うことになったとしてもexpo-dev-clientを利用すれば良い。

Known Regressions

  • H̶e̶r̶m̶e̶s̶ ̶d̶e̶b̶u̶g̶g̶e̶r̶ ̶f̶o̶r̶ ̶A̶n̶d̶r̶o̶i̶d̶ ̶i̶s̶ ̶c̶u̶r̶r̶e̶n̶t̶l̶y̶ ̶n̶o̶t̶ ̶w̶o̶r̶k̶i̶n̶g̶ ̶i̶n̶ ̶E̶x̶p̶o̶ ̶G̶o̶ ̶f̶o̶r̶ ̶A̶n̶d̶r̶o̶i̶d̶ ̶(̶d̶u̶e̶ ̶t̶o̶ ̶a̶ ̶r̶e̶g̶r̶e̶s̶s̶i̶o̶n̶ ̶i̶n̶ ̶R̶e̶a̶c̶t̶ ̶N̶a̶t̶i̶v̶e̶ ̶0̶.̶7̶2̶ ̶-̶ ̶s̶e̶e̶ ̶G̶i̶t̶H̶u̶b̶ ̶f̶o̶r̶ ̶c̶o̶n̶t̶e̶x̶t̶)̶
    • 解決済み
  • “No ‘projectId’ found…” in expo-notifications getExpoPushTokenAsync (expo#23225)
    • オプションprojectIdを渡すことでワークアラウンドできる。
  • There have been reports of eas update hanging after printing “Export was successful.” (eas-cli#1907).
    • eas updateがハングする問題。
    • 再現できず、現在調査中。
  • npx expo run:[android|ios] in a bare React Native 0.72 project that does not extend@expo/metro-config in metro.config.js currently will fail to bundle.
    • bare workflowで@expo/metro-configを使ってないプロジェクトでバンドルに失敗する問題
    • 既に修正PRを送っており、0.72.2では修正されている模様。
  • ̶r̶e̶a̶c̶t̶-̶n̶a̶t̶i̶v̶e̶-̶m̶a̶p̶s̶ ̶w̶i̶t̶h̶ ̶t̶h̶e̶ ̶s̶h̶o̶w̶s̶U̶s̶e̶r̶L̶o̶c̶a̶t̶i̶o̶n̶ ̶p̶r̶o̶p̶ ̶m̶a̶y̶ ̶c̶r̶a̶s̶h̶ ̶y̶o̶u̶r̶ ̶A̶n̶d̶r̶o̶i̶d̶ ̶a̶p̶p̶.̶ ̶Y̶o̶u̶ ̶c̶a̶n̶ ̶W̶e̶ ̶a̶r̶e̶ ̶i̶n̶v̶e̶s̶t̶i̶g̶a̶t̶i̶n̶g̶ ̶a̶ ̶f̶i̶x̶.̶ ̶Y̶o̶u̶ ̶c̶a̶n̶ ̶w̶o̶r̶k̶ ̶a̶r̶o̶u̶n̶d̶ ̶t̶h̶i̶s̶ ̶b̶y̶ ̶u̶s̶i̶n̶g̶ ̶r̶e̶a̶c̶t̶-̶n̶a̶t̶i̶v̶e̶-̶m̶a̶p̶s̶@̶~̶2̶.̶0̶.̶0̶-̶b̶e̶t̶a̶.̶1̶0̶ ̶i̶n̶ ̶t̶h̶e̶ ̶m̶e̶a̶n̶t̶i̶m̶e̶.
    • 解決済み

Dropped SDK 46; will drop SDK 47 and 48 next release

  • このリリースでSDK 46のサポートが切れて最新のExpo Goアプリで利用不可となる。
  • SDK50が出るとSDK47/48のサポートが切れる。
Fusic 技術ブログ
Fusic 技術ブログPublication

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

Discussion