mcpField
U
upgrading-expo

upgrading-expo

github.com/gigs-slc開発359 回インストール40 週間前に更新
リポジトリ

upgrading-expo について

upgrading-expoは、Expo SDKプロジェクトを更新する開発者向けの移行スキルです。アップグレード手順や診断、キャッシュ削除に加え、バージョンごとの破壊的変更と非推奨パッケージの確認事項をまとめています。

主な機能

  1. 01Expoの段階的なアップグレード手順
  2. 02Expo診断の実行
  3. 03キャッシュ削除と依存関係の再インストール
  4. 04破壊的変更と非推奨パッケージの確認
  5. 05ネイティブのprebuild変更への対応

活用シーン

  1. 01プロジェクトを新しいExpo SDKへ更新
  2. 02依存関係更新後の問題の診断
  3. 03必要なネイティブ変更に向けたプロジェクト準備

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/gigs-slc/react-native-skills --skill upgrading-expo

インストール後、Claude Code で/upgrading-expoを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
new-architecture.md
react-19.md
react-compiler.md

詳細

参考資料

  • ./references/new-architecture.md -- SDK +53：新アーキテクチャへの移行ガイド
  • ./references/react-19.md -- SDK +54：React 19 の変更点（useContext → use、Context.Provider → Context、forwardRef の削除）
  • ./references/react-compiler.md -- SDK +54：React Compiler のセットアップと移行ガイド

アップグレードの手順

  1. Expo と依存関係をアップグレードする
npx expo install expo@latest
npx expo install --fix

  1. 診断を実行する：npx expo-doctor

  2. キャッシュを消去して再インストールする

npx expo export -p ios --clear
rm -rf node_modules .expo
watchman watch-del-all

破壊的変更のチェックリスト

  • リリースノートで削除された API を確認する
  • 移動したモジュールのインポートパスを更新する
  • prebuild が必要なネイティブモジュールの変更を確認する
  • カメラ、オーディオ、ビデオのすべての機能をテストする
  • ナビゲーションが引き続き正常に動作することを確認する

ネイティブの変更に備えて prebuild を実行する

アップグレードでネイティブの変更が必要な場合：

npx expo prebuild --clean

これにより、ios ディレクトリと android ディレクトリが再生成されます。このコマンドを実行する前に、プロジェクトが bare workflow アプリではないことを確認してください。

bare workflow のキャッシュを消去する

  • iOS の CocoaPods キャッシュを消去します：cd ios && pod install --repo-update
  • Xcode の派生データを消去します：npx expo run:ios --no-build-cache
  • Android の Gradle キャッシュを消去します：cd android && ./gradlew clean

整理

  • 対象の SDK バージョンのリリースノート（https://expo.dev/changelog）を確認します
  • Expo SDK 54 以降を使用している場合は、react-native-worklets がインストールされていることを確認します。react-native-reanimated の動作に必要です。
  • SDK 54 以降で React Compiler を有効にするには、app.json に "experiments": { "reactCompiler": true } を追加します。これは安定しており、推奨されています。
  • Expo が自動的に管理できるよう、app.json から sdkVersion を削除します
  • package.json から暗黙的に含まれるパッケージ @babel/core、babel-preset-expo、expo-constants を削除します。
  • babel.config.js の内容が 'babel-preset-expo' のみの場合は、ファイルを削除します
  • metro.config.js の内容が Expo のデフォルト設定のみの場合は、ファイルを削除します

非推奨のパッケージ

古いパッケージ置き換え先
expo-avexpo-audio と expo-video
expo-permissions個別パッケージの権限 API
@expo/vector-iconsexpo-symbols（SF Symbols 用）
AsyncStorageexpo-sqlite/localStorage/install
expo-app-loadingexpo-splash-screen
expo-linear-gradientexperimental_backgroundImage と View の CSS グラデーション

パッチの削除

patches/ ディレクトリに古くなったパッチがないか確認します。不要になったパッチは削除します。

Postcss

  • SDK +53 では autoprefixer は不要です。
  • SDK +53 では postcss.config.mjs を使用します。

Metro

冗長な Metro 設定オプションを削除します：

  • SDK +53 では resolver.unstable_enablePackageExports がデフォルトで有効です。
  • SDK +54 では experimentalImportSupport がデフォルトで有効です。
  • SDK +54 では EXPO_USE_FAST_RESOLVER=1 が削除されています。
  • SDK +50 では cjs と mjs の拡張子がデフォルトでサポートされています。
  • Expo webpack は非推奨です。Expo Router と Metro web に移行してください。

新アーキテクチャ

新アーキテクチャはデフォルトで有効になっているため、app.json の "newArchEnabled": true フィールドは不要です。SDK +53 以降、Expo Go は新アーキテクチャのみをサポートします。

コメント

Markdown 対応