ionic-app-upgrades

Ionic アプリのアップグレード

Ionic Framework アプリを新しいメジャーバージョン（4 から 5、5 から 6、6 から 7、または 7 から 8）にアップグレードします。

前提条件

対象バージョン	Angular	React	Vue
5	8.2+	16+	N/A
6	12+	17+	3.0.6+
7	14+	17+	3.0.6+
8	16+	17+	3.0.6+

手順

ステップ 1：現在のバージョンを確認する

package.json の dependencies または devDependencies から @ionic/angular、@ionic/react、または @ionic/vue のバージョンを確認します。現在のメジャーバージョンと、使用しているフレームワーク（Angular、React、Vue、または Core/Standalone）を特定します。

ユーザーに対象バージョンを確認します。指定がない場合は、最新バージョン（8）をデフォルトとして使用します。

ステップ 2：アップグレードを実行する

現在のバージョンから対象バージョンまでのメジャーバージョンの移行ごとに、対応するアップグレードガイドを順番に適用します。

移行元から移行先	参照
4 から 5	references/upgrade-v4-to-v5.md
5 から 6	references/upgrade-v5-to-v6.md
6 から 7	references/upgrade-v6-to-v7.md
7 から 8	references/upgrade-v7-to-v8.md

複数バージョンをまたいで移行する場合（例：5 から 8）は、各アップグレードを順番に適用します。

1. references/upgrade-v5-to-v6.md を読み、内容を適用します
2. プロジェクトをビルドし（npm run build）、エラーを修正して、アプリが動作することを確認します
3. references/upgrade-v6-to-v7.md を読み、内容を適用します
4. プロジェクトをビルドし（npm run build）、エラーを修正して、アプリが動作することを確認します
5. references/upgrade-v7-to-v8.md を読み、内容を適用します
6. プロジェクトをビルドし（npm run build）、エラーを修正して、アプリが動作することを確認します

中間バージョンをスキップしないでください。

ステップ 3：最終確認

すべてのアップグレード手順が完了したら、次を実行します。

npm run build

プロジェクトで Capacitor を使用している場合は、次も実行します。

npx cap sync

エラー処理

• アップグレード手順の後に npm run build が失敗した場合は、コンパイラーのエラーを確認します。多くのエラーは、参照ファイルに記載されているコンポーネントプロパティの削除、CSS 変数の名前変更、またはイベントハンドラーのシグネチャの変更が原因です。
• Jest またはユニットテストが失敗した場合は、transformIgnorePatterns の設定を確認します。Ionic 6 以降は ES Modules として提供されるため、Babel/Jest の設定更新が必要です。
• アップグレード後に CSS スタイルが崩れた場合は、そのバージョンの参照ファイルで削除された CSS Shadow Parts と名前が変更された CSS 変数を確認します。
• 複数バージョンにまたがるアップグレードが途中で失敗した場合は、次に進む前に、現在のバージョンへの移行手順の問題を修正します。
• プロジェクトで Capacitor も使用していて、プラットフォームのビルドが失敗する場合は、Capacitor のバージョンもアップグレードが必要な可能性があります。capacitor-app-upgrades スキルを使用します。

関連スキル

• capacitor-app-upgrades — Ionic と併せて Capacitor もアップグレードする必要がある場合は、このスキルを使用して Capacitor 固有のアップグレード手順を実施します。
• ionic-app-development — Ionic 開発全般のガイダンスです。
• capacitor-plugins — アプリのアップグレード後にプラグインをインストールまたは再設定する場合に使用します。