Ionic 7 から 8 へのアップデート
このガイドでは、アプリを Ionic 7 の最新バージョンにアップデート済みであることを前提と しています。このガイドを始める前に、Ionic 7 へのアップグレードガイドに従っていることを確認してください。
Ionic 7 から Ionic 8 への変更点の完全なリストについては、Ionic Framework リポジトリの変更点ドキュメントを参照してください。
はじめ方
Angular
-
Ionic 8 は Angular 16+をサポートしています。Angular Update Guide](https://update.angular.io/)に従って、Angularの最新バージョンにアップデートしてください。
-
Ionic 8 の最新バージョンにアッ プデートします:
npm install @ionic/angular@latest
Ionic Angular Server と Ionic Angular Toolkit を使用している場合は、それらもアップデートしてください:
npm install @ionic/angular@latest @ionic/angular-server@latest @ionic/angular-toolkit@11
注意:
@ionic/angular-toolkit@11
には最低でも Angular 17 が必要です。Angular 16 の場合は、代わりに@ionic/angular-toolkit@10
にアップデートしてください。
@ionic/angular
からインポートしたIonBackButtonDelegate
の代わりにIonBackButton
をインポートするように更新する。
React
- Ionic 8 は React 17+をサポートしています。最新バージョンの React にアップデートしてください:
npm install react@17 react-dom@17
- Ionic 8 の最新バージョンにアップデートする:
npm install @ionic/react@8 @ionic/react-router@8
Vue
- Ionic 8 supports Vue 3.0.6+. Update to the latest version of Vue:
npm install vue@^3.0.6 vue-router@^3.0.6
- Ionic 8 の最新バージョンにアップデートする:
npm install @ionic/vue@8 @ionic/vue-router@8
Core
- Ionic 8 の最新バージョンにアップデートする:
npm install @ionic/core@8
推奨の変更
お手持ちのアプリケーションは引き続き動作するため、Ionic 8 へのアップデートに以下の変更は必要ありません。ただし、Ionic 8 の新機能を確実にご利用いただくために、以下の変更を行うことをお勧めします。
Light Palette
以前のバージョンでは、 theme/variables.scss
にライトパレット用のデフォルトカラー変数のセットが定義されていました:
/** Ionic CSS Variables **/
:root {
/** primary **/
--ion-color-primary: #3880ff;
--ion-color-primary-rgb: 56, 128, 255;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255, 255, 255;
/* ... */
}
Ionic Framework バージョン 8 では、core.css
がインポートされている限り、これらの色変数が含まれます。 theme/variables.scss
で定義された色変数は、インポートされたデフォルト変数を上書きしないように削除し、アプリが常に最新のパレットを使用するようにします。
このカラーパレットをカスタマイズしている開発者は、カスタム変数の値を保持し続けることができますが、デフォルト値を使用している変数はすべて削除する必要があります。
新しいカラーパレットについては、Ionic v8 のお知らせをご覧ください。
Dark Palette
In previous versions, it was recommended to define the dark palette in the following way:
@media (prefers-color-scheme: dark) {
body {
/* global app variables */
}
.ios body {
/* global ios app variables */
}
.md body {
/* global md app variables */
}
}
Ionic Framework バージョン 8 では、ダークパレットはインポート可能な css ファイルで配布されています。以下は Angular でダークパレットファイルをインポートする例です:
/* @import '@ionic/angular/css/palettes/dark.always.css'; */
/* @import "@ionic/angular/css/palettes/dark.class.css"; */
@import '@ionic/angular/css/palettes/dark.system.css';