claude-skills/

Anthropic公式スキル・プラグインの日本語ディレクトリ

last sync 22h ago
スキルOfficialdevelopment

📦upgrading-expo

プラグイン
expo
ライセンス
MIT

説明

Expo SDKのバージョンアップグレードおよび依存関係の問題修正に関するガイドライン

原文を表示

Guidelines for upgrading Expo SDK versions and fixing dependency issues

ユースケース

  • Expo SDKをバージョンアップグレードするとき
  • 依存関係の問題を修正するとき

本文(日本語訳)

リファレンス

  • ./references/react-19.md — SDK +54: React 19 の変更点(useContextuseContext.ProviderContextforwardRef の廃止)
  • ./references/new-architecture.md — SDK +53: New Architecture 移行ガイド
  • ./references/react-compiler.md — SDK +54: React Compiler のセットアップと移行ガイド
  • ./references/native-tabs.md — SDK +55: Native tabs の変更点(Icon / Label / BadgeNativeTabs.Trigger.* 経由でアクセス)
  • ./references/expo-av-to-audio.md — SDK +55: 音声の再生・録音を expo-av から expo-audio へ移行
  • ./references/expo-av-to-video.md — SDK +55: 動画再生を expo-av から expo-video へ移行
  • ./references/react-navigation-to-expo-router.md — SDK +56: @react-navigation/* のインポートを expo-router エントリーポイントへ移行(codemod + 手動マッピング)

ベータ / プレビューリリース

ベータ版はサフィックスに .preview を使用します(例: 55.0.0-preview.2)。@next タグで公開されます。

最新版がベータかどうかの確認: https://exp.host/--/api/v2/versions(`expoVersion`-preview が含まれているか確認)

npx expo install expo@next --fix  # ベータ版をインストール

アップグレードの手順

  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

まず、プロジェクトに ios/ および android/ ディレクトリが存在するか確認してください。 どちらのディレクトリも存在しない場合、そのプロジェクトは CNG(Continuous Native Generation)を使用しており、ネイティブプロジェクトはビルド時に再生成されます。このセクションと「bare ワークフローのキャッシュクリア」は完全にスキップしてください。

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

npx expo prebuild --clean

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


bare ワークフローのキャッシュクリア

以下の手順は、プロジェクトに ios/ および/または android/ ディレクトリが存在する場合にのみ適用されます。

  • iOS の CocoaPods キャッシュをクリア: cd ios && pod install --repo-update
  • Xcode の Derived Data をクリア: npx expo run:ios --no-build-cache
  • Android の Gradle キャッシュをクリア: cd android && ./gradlew clean

ハウスキーピング

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

非推奨パッケージ

旧パッケージ 代替
expo-av expo-audio および expo-video
expo-permissions 各パッケージ個別のパーミッション API
@expo/vector-icons expo-symbols(SF Symbols 向け)
AsyncStorage expo-sqlite/localStorage/install
expo-app-loading expo-splash-screen
expo-linear-gradient experimental_backgroundImage + View での CSS グラデーション

非推奨パッケージを移行する際は、旧パッケージを削除する前に、すべてのコードの使用箇所を更新してください。 expo-av の移行については、移行リファレンスを参照し、Audio.SounduseAudioPlayerAudio.RecordinguseAudioRecorderVideo コンポーネント → useVideoPlayer を使った VideoView へそれぞれ変換してください。


expo.install.exclude の確認

package.json に除外パッケージが設定されていないか確認してください:

{
  "expo": { "install": { "exclude": ["react-native-reanimated"] } }
}

除外設定はアップグレード後に不要になっているワークアラウンドであることが多いため、各項目を見直してください。


パッチの削除

patches/ ディレクトリに古くなったパッチがないか確認し、不要になったものは削除してください。


PostCSS

  • autoprefixer は SDK +53 以降では不要です。依存関係から削除し、postcss.config.js または postcss.config.mjs のプラグインリストからも削除してください。
  • SDK +53 以降では postcss.config.mjs を使用してください。

Metro

冗長な Metro の設定オプションを削除してください:

  • resolver.unstable_enablePackageExports は SDK +53 でデフォルト有効になりました。
  • experimentalImportSupport は SDK +54 でデフォルト有効になりました。
  • EXPO_USE_FAST_RESOLVER=1 は SDK +54 で廃止されました。
  • cjs および mjs 拡張子は SDK +50 以降デフォルトでサポートされています。
  • Expo webpack は非推奨です。Expo Router と Metro web へ移行してください。

Hermes エンジン v1

SDK 55 以降、ランタイムパフォーマンス向上のため Hermes エンジン v1 をオプトインで利用できます。 expo-build-properties config plugin の設定で useHermesV1: true を指定する必要があり、特定バージョンの hermes-compiler npm パッケージが必要になる場合があります。 Hermes v1 は将来の SDK リリースでデフォルトになる予定です。


New Architecture

New Architecture はデフォルトで有効になりました。app.json"newArchEnabled": true フィールドはデフォルト値となったため、記載は不要です。 Expo Go は SDK +53 以降、New Architecture のみをサポートします。

原文(English)を表示

References

  • ./references/react-19.md -- SDK +54: React 19 changes (useContext → use, Context.Provider → Context, forwardRef removal)
  • ./references/new-architecture.md -- SDK +53: New Architecture migration guide
  • ./references/react-compiler.md -- SDK +54: React Compiler setup and migration guide
  • ./references/native-tabs.md -- SDK +55: Native tabs changes (Icon/Label/Badge now accessed via NativeTabs.Trigger.*)
  • ./references/expo-av-to-audio.md -- SDK +55: Migrate audio playback and recording from expo-av to expo-audio
  • ./references/expo-av-to-video.md -- SDK +55: Migrate video playback from expo-av to expo-video
  • ./references/react-navigation-to-expo-router.md -- SDK +56: Migrate @react-navigation/* imports to expo-router entry points (codemod + manual mapping)

Beta/Preview Releases

Beta versions use .preview suffix (e.g., 55.0.0-preview.2), published under @next tag.

Check if latest is beta: https://exp.host/--/api/v2/versions (look for -preview in expoVersion)

npx expo install expo@next --fix  # install beta

Step-by-Step Upgrade Process

  1. Upgrade Expo and dependencies
npx expo install expo@latest
npx expo install --fix
  1. Run diagnostics: npx expo-doctor

  2. Clear caches and reinstall

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

Breaking Changes Checklist

  • Check for removed APIs in release notes
  • Update import paths for moved modules
  • Review native module changes requiring prebuild
  • Test all camera, audio, and video features
  • Verify navigation still works correctly

Prebuild for Native Changes

First check if ios/ and android/ directories exist in the project. If neither directory exists, the project uses Continuous Native Generation (CNG) and native projects are regenerated at build time — skip this section and "Clear caches for bare workflow" entirely.

If upgrading requires native changes:

npx expo prebuild --clean

This regenerates the ios and android directories. Ensure the project is not a bare workflow app before running this command.

Clear caches for bare workflow

These steps only apply when ios/ and/or android/ directories exist in the project:

  • Clear the cocoapods cache for iOS: cd ios && pod install --repo-update
  • Clear derived data for Xcode: npx expo run:ios --no-build-cache
  • Clear the Gradle cache for Android: cd android && ./gradlew clean

Housekeeping

  • Review release notes for the target SDK version at https://expo.dev/changelog
  • If using Expo SDK 54 or later, ensure react-native-worklets is installed — this is required for react-native-reanimated to work.
  • Enable React Compiler in SDK 54+ by adding "experiments": { "reactCompiler": true } to app.json — it's stable and recommended
  • Delete sdkVersion from app.json to let Expo manage it automatically
  • Remove implicit packages from package.json: @babel/core, babel-preset-expo, expo-constants.
  • If the babel.config.js only contains 'babel-preset-expo', delete the file
  • If the metro.config.js only contains expo defaults, delete the file

Deprecated Packages

Old Package Replacement
expo-av expo-audio and expo-video
expo-permissions Individual package permission APIs
@expo/vector-icons expo-symbols (for SF Symbols)
AsyncStorage expo-sqlite/localStorage/install
expo-app-loading expo-splash-screen
expo-linear-gradient experimental_backgroundImage + CSS gradients in View

When migrating deprecated packages, update all code usage before removing the old package. For expo-av, consult the migration references to convert Audio.Sound to useAudioPlayer, Audio.Recording to useAudioRecorder, and Video components to VideoView with useVideoPlayer.

expo.install.exclude

Check if package.json has excluded packages:

{
  "expo": { "install": { "exclude": ["react-native-reanimated"] } }
}

Exclusions are often workarounds that may no longer be needed after upgrading. Review each one.

Removing patches

Check if there are any outdated patches in the patches/ directory. Remove them if they are no longer needed.

Postcss

  • autoprefixer isn't needed in SDK +53. Remove it from dependencies and check postcss.config.js or postcss.config.mjs to remove it from the plugins list.
  • Use postcss.config.mjs in SDK +53.

Metro

Remove redundant metro config options:

  • resolver.unstable_enablePackageExports is enabled by default in SDK +53.
  • experimentalImportSupport is enabled by default in SDK +54.
  • EXPO_USE_FAST_RESOLVER=1 is removed in SDK +54.
  • cjs and mjs extensions are supported by default in SDK +50.
  • Expo webpack is deprecated, migrate to Expo Router and Metro web.

Hermes engine v1

Since SDK 55, users can opt-in to use Hermes engine v1 for improved runtime performance. This requires setting useHermesV1: true in the expo-build-properties config plugin, and may require a specific version of the hermes-compiler npm package. Hermes v1 will become a default in some future SDK release.

New Architecture

The new architecture is enabled by default, the app.json field "newArchEnabled": true is no longer needed as it's the default. Expo Go only supports the new architecture as of SDK +53.

原文・著作権は Anthropic および各プラグイン作者に帰属します。日本語訳は Claude API による自動翻訳です。