jpskill.com
💬 コミュニケーション コミュニティ

upgrading-react-native

React Nativeアプリを新しいバージョンへアップグレードする際、テンプレートの差分適用、依存関係の更新、iOSやAndroidの設定移行、APIの変更対応などを自動化するSkillです。

📜 元の英語説明(参考)

Upgrades React Native apps to newer versions by applying rn-diff-purge template diffs, updating package.json dependencies, migrating native iOS and Android configuration, resolving CocoaPods and Gradle changes, and handling breaking API updates. Use when upgrading React Native, bumping RN version, updating from RN 0.x to 0.y, or migrating Expo SDK alongside a React Native upgrade.

🇯🇵 日本人クリエイター向け解説

一言でいうと

React Nativeアプリを新しいバージョンへアップグレードする際、テンプレートの差分適用、依存関係の更新、iOSやAndroidの設定移行、APIの変更対応などを自動化するSkillです。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o upgrading-react-native.zip https://jpskill.com/download/5526.zip && unzip -o upgrading-react-native.zip && rm upgrading-react-native.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/5526.zip -OutFile "$d\upgrading-react-native.zip"; Expand-Archive "$d\upgrading-react-native.zip" -DestinationPath $d -Force; ri "$d\upgrading-react-native.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して upgrading-react-native.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → upgrading-react-native フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-17
取得日時
2026-05-17
同梱ファイル
8

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

React Native のアップグレード

概要

Upgrade Helper を介したテンプレートの差分、依存関係の更新、Expo SDK の手順、および一般的な落とし穴など、React Native のアップグレードワークフロー全体を網羅しています。

標準的なアップグレード手順

  1. ルート: upgrading-react-native.md を介して適切なアップグレードパスを選択します。
  2. 差分: upgrade-helper-core.md を介して Upgrade Helper を使用して正規のテンプレート差分を取得します。
  3. 依存関係: upgrading-dependencies.md を介してサードパーティパッケージを評価し、更新します。
  4. React: react.md を介してアップグレードされた場合は React のバージョンを合わせます。
  5. Expo (該当する場合): expo-sdk-upgrade.md を介して Expo SDK レイヤーを適用します。
  6. 検証: upgrade-verification.md を介してアップグレード後のチェックを実行します。
# クイックスタート: 現在のバージョンを検出し、差分を取得します
npm pkg get dependencies.react-native --prefix "$APP_DIR"
npm view react-native dist-tags.latest

# 例: 0.76.9 から 0.78.2 へのアップグレード
# 1. テンプレートの差分を取得します
curl -L -f -o /tmp/rn-diff.diff \
  "https://raw.githubusercontent.com/react-native-community/rn-diff-purge/diffs/diffs/0.76.9..0.78.2.diff" \
  && echo "Diff downloaded OK" || echo "ERROR: diff not found, check versions"
# 2. 変更されたファイルを確認します
grep -n "^diff --git" /tmp/rn-diff.diff
# 3. package.json を更新し、ネイティブの変更を適用してから、インストールと再ビルドを行います
npm install --prefix "$APP_DIR"
cd "$APP_DIR/ios" && pod install
# 4. 検証: 両方のプラットフォームが正常にビルドされる必要があります
npx react-native build-android --mode debug --no-packager
xcodebuild -workspace "$APP_DIR/ios/App.xcworkspace" -scheme App -sdk iphonesimulator build

適用時期

以下のガイドラインを参照してください。

  • React Native アプリを新しいバージョンに移行する場合
  • Upgrade Helper からのネイティブ設定の変更を調整する場合
  • 破壊的変更のリリースノートを検証する場合

クイックリファレンス

ファイル 説明
upgrading-react-native.md ルーター: 適切なアップグレードパスを選択します
upgrade-helper-core.md コア Upgrade Helper のワークフローと信頼性ゲート
upgrading-dependencies.md 依存関係の互換性チェックと移行計画
react.md React および React 19 のアップグレード調整ルール
expo-sdk-upgrade.md Expo SDK 固有のアップグレードレイヤー (条件付き)
upgrade-verification.md アップグレード後の手動検証チェックリスト
monorepo-singlerepo-targeting.md Monorepo および単一リポジトリアプリのターゲット設定とコマンドスコープ

問題 → スキルマッピング

問題 開始点
React Native をアップグレードする必要がある upgrade-helper-core.md
依存関係のリスクトリアージと移行オプションが必要 upgrading-dependencies.md
React/React 19 パッケージの調整が必要 react.md
まずワークフローのルーティングが必要 upgrading-react-native.md
Expo SDK 固有の手順が必要 expo-sdk-upgrade.md
手動での回帰検証が必要 upgrade-verification.md
リポジトリ/アプリのコマンドスコープが必要 monorepo-singlerepo-targeting.md
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Upgrading React Native

Overview

Covers the full React Native upgrade workflow: template diffs via Upgrade Helper, dependency updates, Expo SDK steps, and common pitfalls.

Typical Upgrade Sequence

  1. Route: Choose the right upgrade path via upgrading-react-native.md
  2. Diff: Fetch the canonical template diff using Upgrade Helper via upgrade-helper-core.md
  3. Dependencies: Assess and update third-party packages via upgrading-dependencies.md
  4. React: Align React version if upgraded via react.md
  5. Expo (if applicable): Apply Expo SDK layer via expo-sdk-upgrade.md
  6. Verify: Run post-upgrade checks via upgrade-verification.md
# Quick start: detect current version and fetch diff
npm pkg get dependencies.react-native --prefix "$APP_DIR"
npm view react-native dist-tags.latest

# Example: upgrading from 0.76.9 to 0.78.2
# 1. Fetch the template diff
curl -L -f -o /tmp/rn-diff.diff \
  "https://raw.githubusercontent.com/react-native-community/rn-diff-purge/diffs/diffs/0.76.9..0.78.2.diff" \
  && echo "Diff downloaded OK" || echo "ERROR: diff not found, check versions"
# 2. Review changed files
grep -n "^diff --git" /tmp/rn-diff.diff
# 3. Update package.json, apply native changes, then install + rebuild
npm install --prefix "$APP_DIR"
cd "$APP_DIR/ios" && pod install
# 4. Validate: both platforms must build successfully
npx react-native build-android --mode debug --no-packager
xcodebuild -workspace "$APP_DIR/ios/App.xcworkspace" -scheme App -sdk iphonesimulator build

When to Apply

Reference these guidelines when:

  • Moving a React Native app to a newer version
  • Reconciling native config changes from Upgrade Helper
  • Validating release notes for breaking changes

Quick Reference

File Description
upgrading-react-native.md Router: choose the right upgrade path
upgrade-helper-core.md Core Upgrade Helper workflow and reliability gates
upgrading-dependencies.md Dependency compatibility checks and migration planning
react.md React and React 19 upgrade alignment rules
expo-sdk-upgrade.md Expo SDK-specific upgrade layer (conditional)
upgrade-verification.md Manual post-upgrade verification checklist
monorepo-singlerepo-targeting.md Monorepo and single-repo app targeting and command scoping

Problem → Skill Mapping

Problem Start With
Need to upgrade React Native upgrade-helper-core.md
Need dependency risk triage and migration options upgrading-dependencies.md
Need React/React 19 package alignment react.md
Need workflow routing first upgrading-react-native.md
Need Expo SDK-specific steps expo-sdk-upgrade.md
Need manual regression validation upgrade-verification.md
Need repo/app command scoping monorepo-singlerepo-targeting.md

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。