メインコンテンツへスキップ
バージョン: v8

Ionic 7から8への更新

注意

このガイドは、アプリをIonic 7の最新バージョンに既に更新していることを前提としています。このガイドを開始する前に、Ionic 7へのアップグレードガイドに従っていることを確認してください。

破壊的な変更

Ionic 7からIonic 8への破壊的な変更の完全なリストについては、Ionic Frameworkリポジトリの破壊的な変更に関するドキュメントを参照してください。

はじめに​

Angular​

  1. Ionic 8はAngular 16以上をサポートしています。Angular更新ガイドに従って、Angularの最新バージョンに更新してください。

  2. 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にのみ更新することをお勧めします。

  1. @ionic/angularからのIonBackButtonDelegateインポートを、代わりに@ionic/angularからIonBackButtonをインポートするように更新します。

React​

  1. Ionic 8はReact 17以上をサポートしています。Reactの最新バージョンに更新してください
npm install react@17 react-dom@17
  1. Ionic 8の最新バージョンにアップデートしてください
npm install @ionic/react@8 @ionic/react-router@8

Vue​

  1. Ionic 8はVue 3.0.6以上をサポートしています。Vueの最新バージョンに更新してください
npm install vue@^3.0.6 vue-router@^3.0.6
  1. Ionic 8の最新バージョンにアップデートしてください
npm install @ionic/vue@8 @ionic/vue-router@8

コア​

  1. Ionic 8の最新バージョンにアップデートしてください
npm install @ionic/core@8

以下の変更は、アプリケーションが動作し続けるため、Ionic 8にアップデートするために必須ではありません。ただし、Ionic 8の新機能を利用できるようにするために、以下の変更を行うことをお勧めします。

ライトパレット​

以前のバージョンでは、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発表をご覧ください。

ダークパレット​

以前のバージョンでは、ダークパレットを次の方法で定義することが推奨されていました

@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';

ダークパレットは、bodyセレクターではなく、:rootセレクターに適用されるようになりました。:rootセレクターは、<html>要素を表し、セレクターhtmlと同じですが、その特異度が高くなっています。

新しいダークパレットファイルを含めるように移行しても、破壊的な変更を引き起こす可能性は低いですが、これらの新しいセレクターは、カスタムCSS変数がbody要素に設定されている場合、予期しないオーバーライドにつながる可能性があります。グローバルアプリケーション変数が設定されているすべてのインスタンスを、代わりに:rootセレクターをターゲットにするように更新することをお勧めします。

新しいダークパレットファイルの詳細については、ダークモードドキュメントを参照してください。

ステップカラートークン​

Ionic 8のハイコントラストパレットをより良くサポートするために、テキストと背景色に個別のステップカラートークンが導入されました。以前は、テキストと背景色の両方が、単一の--ion-color-step-[number]トークンのセットによって制御されていました。

上記で言及した新しくインポートされたダークパレットを使用すると、これらの新しいステップカラートークンもインポートされます。ただし、開発者はアプリケーションで手動で定義されたステップカラートークンを更新する必要があります。

背景色の--ion-color-step-[number]の使い方は、トークンを--ion-background-color-step-[number]に名前を変更することで移行できます。

前:

button { background: var(--ion-color-step-400); }

後:

button { background: var(--ion-background-color-step-400); }

テキストの色の--ion-color-step-[number]の使い方は、トークンを--ion-text-color-step-[number]に名前を変更し、1000から数を引くことで移行できます。

前:

button { color: var(--ion-color-step-400); }

後:

button { color: var(--ion-text-color-step-600); /* 1000 - 400 = 600 */ }

ステップカラージェネレーターは、テキストと背景色のステップ変数を生成するように更新されました。

ダイナミックフォント​

core.cssファイルは、デフォルトでダイナミックフォントスケーリングを有効にするように更新されました。

--ion-default-dynamic-font変数は削除され、--ion-dynamic-fontに置き換えられました。

グローバルスタイルシートで有効にすることで、以前にダイナミックフォントスケーリングを選択した開発者は、カスタムCSSを削除することでデフォルト設定に戻ることができます。そうすることで、アプリケーションは以前と同様にシームレスにダイナミックフォントスケーリングを利用し続けます。html要素のfont-sizeを変更すると、ダイナミックフォントスケーリングの適切な機能が中断される可能性があることに注意することが重要です。

動的なフォントスケーリングを無効にしたい開発者は、グローバルスタイルシートに--ion-dynamic-font: initial;を設定できます。ただし、これは推奨されません。フォントサイズの拡大に依存しているユーザーにとってアクセシビリティ上の問題が生じる可能性があるためです。

動的フォントの詳細については、動的フォントスケーリングのドキュメントを参照してください。

(Angular のみ) angular.json CSS インポート順序​

angular.jsonファイルは現在、src/global.scssをインポートする前にsrc/theme/variables.scssをインポートしています。これにより、新しいダークパレットの変更をカスタマイズする際に、間違ったスタイルが適用される可能性があります。

代わりに、最初にsrc/global.scssファイルをインポートすることをお勧めします。

前:

  "styles": ["src/theme/variables.scss", "src/global.scss"],

後:

  "styles": ["src/global.scss", "src/theme/variables.scss"],

必要な変更​

ブラウザサポート​

Ionic がサポートするブラウザのリストが変更されました。ブラウザサポートガイドを確認して、サポートされているブラウザにアプリを展開していることを確認してください。

browserslistまたは.browserslistrcファイルがある場合は、次の内容で更新してください。

Chrome >=89
ChromeAndroid >=89
Firefox >=75
Edge >=89
Safari >=15
iOS >=15

チェックボックス​

  1. 残りのチェックボックスのインスタンスをすべて、最新のフォームコントロール構文を使用するように移行します。また、レガシーフォームコントロール構文は削除されたため、legacyプロパティの使用もすべて削除してください。

入力​

  1. sizeプロパティの使用はすべて削除してください。代わりに、CSS を使用して入力の表示幅を指定する必要があります。
  2. acceptプロパティの使用はすべて削除してください。
  3. 残りの入力のインスタンスをすべて、最新のフォームコントロール構文を使用するように移行します。また、レガシーフォームコントロール構文は削除されたため、legacyプロパティの使用もすべて削除してください。

アイテム​

  1. counterまたはcounterFormatterプロパティの使用はすべて削除してください。代わりに、ion-inputとion-textareaの同じ名前のプロパティを使用してください。
  2. helperまたはerrorスロットの使用はすべて削除してください。代わりに、ion-inputとion-textareaのhelperTextおよびerrorTextプロパティを使用してください。
  3. fillまたはshapeプロパティの使用はすべて削除してください。代わりに、ion-input、ion-textarea、およびion-selectの同じ名前のプロパティを使用してください。
  1. getLengthの使用をすべて更新して、このメソッドがnumberの代わりにPromise<number>を返すようになったため、戻り値にアクセスする前に呼び出しをawaitするようにします。

ピッカー​

  1. Ionic 8 には、インラインのion-pickerコンポーネントが付属するようになりました。レガシーピッカーの使用を継続したい開発者は、ion-pickerの使用をすべてion-picker-legacyに更新する必要があります。pickerControllerのインポートは変更されません。ion-picker-legacyコンポーネントは、Ionic の今後のメジャーリリースで削除されることに注意してください。使用方法については、ピッカーのドキュメントを参照してください。

トースト​

  1. ToastButtonからcssClassプロパティの使用をすべて削除してください。代わりに、button CSS シャドウパートを使用する必要があります。

ラジオ​

  1. 残りのラジオのインスタンスをすべて、最新のフォームコントロール構文を使用するように移行します。また、レガシーフォームコントロール構文は削除されたため、legacyプロパティの使用もすべて削除してください。

セレクト​

  1. 残りのセレクトのインスタンスをすべて、最新のフォームコントロール構文を使用するように移行します。また、レガシーフォームコントロール構文は削除されたため、legacyプロパティの使用もすべて削除してください。

テキストエリア​

  1. 残りのテキストエリアのインスタンスをすべて、最新のフォームコントロール構文を使用するように移行します。また、レガシーフォームコントロール構文は削除されたため、legacyプロパティの使用もすべて削除してください。

トグル​

  1. 残りのトグルのインスタンスをすべて、最新のフォームコントロール構文を使用するように移行します。また、レガシーフォームコントロール構文は削除されたため、legacyプロパティの使用もすべて削除してください。

アップグレードのヘルプが必要ですか？​

Ionic 8 の破壊的変更ガイドを必ず確認してください。開発者が知っておく必要がある可能性のある、デフォルトのプロパティと CSS 変数の値に対するいくつかの変更がありました。このページには、ユーザーの操作が必要な破壊的変更のみがリストされています。

アップグレードのヘルプが必要な場合は、Ionic フォーラムにスレッドを投稿してください。

目次

このページを編集