Skip to main content
Version: v8

Ionic 7 から 8 への更新

note

このガイドでは、アプリをすでに 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 supports Vue 3.0.6+. Update to the latest version of Vue:
npm install vue@^3.0.6 vue-router@^3.0.6
  1. Ionic 8 を最新バージョンに更新してください:
npm install @ionic/vue@8 @ionic/vue-router@8

Core​

  1. 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';

ダークパレットは、bodyセレクターではなく、現在:rootセレクターに適用されています。:rootセレクターは<html>要素を表しており、htmlセレクターと同一ですが、特異性はより高くなっています。

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

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

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

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

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

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

Before:

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

After:

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

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

Before:

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

After:

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

The stepped color generator has been updated to generate text and background color stepped variables.

ダイナミックフォント​

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

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

以前にグローバルスタイルシートで動的フォントスケーリングを有効にすることでそれを選択した開発者は、カスタム CSS を削除することでデフォルト設定に戻すことができます。そうすることで、アプリケーションは以前と同様にシームレスに動的フォントスケーリングを利用し続けます。html 要素のフォントサイズを変更すると、動的フォントスケーリングの正しい動作が妨げられる可能性があるため、変更は避けることが重要です。

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

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

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

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

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

Before:

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

After:

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

必要な変更​

ブラウザサポート​

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

browserslist または .browserslistrc ファイルをお持ちの場合、次の内容で更新してください:

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

Checkbox​

  1. Migrate any remaining instances of Checkbox to use the modern form control syntax. Additionally, remove any usages of the legacy property as the legacy form control syntax has been removed.

Input​

  1. Remove any usages of the size property. CSS should be used to specify the visible width of the input instead.
  2. Remove any usages of the accept property.
  3. Migrate any remaining instances of Input to use the modern form control syntax. Additionally, remove any usages of the legacy property as the legacy form control syntax has been removed.

Item​

  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 の使用を更新し、返される値にアクセスする前に await を呼び出してください。このメソッドは number ではなく Promise<number> を返すようになりました。

Picker​

  1. Ionic 8 ではインライン ion-picker コンポーネントが同梱されるようになりました。従来のピッカーを引き続き使用したい開発者は、ion-picker の使用を ion-picker-legacy に更新してください。pickerController のインポートは変更されません。なお、ion-picker-legacy コンポーネントは今後の Ionic のメジャーリリースで削除される予定です。使用方法については ピッカーのドキュメント を参照してください。

Toast​

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

Radio​

  1. Migrate any remaining instances of Radio to use the modern form control syntax. Additionally, remove any usages of the legacy property as the legacy form control syntax has been removed.

Select​

  1. Migrate any remaining instances of Select to use the modern form control syntax. Additionally, remove any usages of the legacy property as the legacy form control syntax has been removed.

Textarea​

  1. Migrate any remaining instances of Textarea to use the modern form control syntax. Additionally, remove any usages of the legacy property as the legacy form control syntax has been removed.

Toggle​

  1. Migrate any remaining instances of Toggle to use the modern form control syntax. Additionally, remove any usages of the legacy property as the legacy form control syntax has been removed.

アップグレードに関してヘルプが必要ですか?​

必ずIonic 8 Breaking Changes Guideを確認してください。デフォルトのプロパティや CSS 変数の値にいくつか変更があり、開発者は注意が必要な場合があります。このページには、ユーザーによる対応が必要な破壊的変更のみが記載されています。

アップグレードのサポートが必要な場合は、Ionic Forumにスレッドを投稿してください。

Contents

Edit this page