Skip to main content
Version: v8

Updating from Ionic 6 to 7

note

This guide assumes that you have already updated your app to the latest version of Ionic 6. Make sure you have followed the Upgrading to Ionic 6 Guide before starting this guide.

Breaking Changes

For a complete list of breaking changes from Ionic 6 to Ionic 7, please refer to the breaking changes document in the Ionic Framework repository.

はじめ方​

Angular​

  1. Ionic 7 は Angular 14+に対応しています。 Angular Update Guide に従い、Angular の最新バージョンにアップデートしてください。
  2. プロジェクトで rxjs を使用している場合、Ionic 7 では rxjs の最低バージョンが 7.5.0 である必要があります：
npm install rxjs@7.5.0
  1. Ionic 7 の最新バージョンにアップデートしてください：
npm install @ionic/angular@7

Ionic Angular Server と Ionic Angular Toolkit を使用している場合は、必ずそちらも更新してください。

npm install @ionic/angular@7 @ionic/angular-server@7 @ionic/angular-toolkit@9

Note: @ionic/angular-toolkit@9 requires a minimum of Angular 15. If you are still on Angular 14, then you can skip updating to @ionic/angular-toolkit@9.

React​

  1. Ionic 7 は React 17+に対応しています。React の最新バージョンにアップデートしてください。
npm install react@latest react-dom@latest
  1. Ionic 7 の最新バージョンにアップデートします。
npm install @ionic/react@7 @ionic/react-router@7

Vue​

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

Core​

  1. Ionic 7 の最新バージョンにアップデートします。
npm install @ionic/core@7

あなたのコードのアップデート​

ブラウザサポート​

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

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

Chrome >=79
ChromeAndroid >=79
Firefox >=70
Edge >=79
Safari >=14
iOS >=14

型​

  1. ActionSheetAttributes、AlertAttributes、AlertTextareaAttributes、AlertInputAttributes、LoadingAttributes、ModalAttributes、PickerAttributes、PopoverAttributesおよび ToastAttributes は削除されました。開発者は、代わりに { [key: string]: any } を使用する必要があります。

Checkbox​

  1. CSS 変数 --background と --background-checked を使用している場合は、それぞれ --checkbox-background と --checkbox-background-checked にリネームします。

Datetime​

  1. value プロパティに空文字列('')を設定するコードを削除します
  2. value プロパティのタイムゾーン情報にアクセスするコードをすべて削除します。Datetime はタイムゾーンを管理しないので、提供されたタイムゾーン情報はすべて無視されます。

Input​

  1. detail ペイロードが値とイベントを含むオブジェクトになったので、ionInputイベントの detail ペイロードにアクセスするコードを event.detail から event.detail.value に更新します。
  1. Remove any usage of the swipeToClose property. Card modals are swipeable by default, so you can remove swipeToClose if you want your card modal to remain swipeable. Use the canDismiss property if you want to prevent a modal from dismissing.
  2. Remove any code that sets the canDismiss property to undefined. The canDismiss property now defaults to true, so this code is no longer needed.

Picker​

  1. ion-picker-column の refresh にアクセスするコードをすべて削除する。代わりに ion-picker の columns プロパティを使用してビューをリフレッシュする必要があります。
  1. detail ペイロードが値とイベントを含むオブジェクトになったので、ionInputイベントのdetailペイロードにアクセスするコードを event.detail から event.detail.value に更新します。

Segment​

  1. Remove any code that sets the value property to null. Developers should use either '' or undefined instead.

Slides​

  1. ion-slides、ion-slide、および関連する型を削除する。これらのコンポーネントは、Swiper.js を直接使用するために削除されました。この移行については、以下のガイドに詳細が記載されています。

Angular Migration Guide
React Migration Guide
Vue Migration Guide

Textarea​

  1. detail ペイロードが値とイベントを含むオブジェクトになったので、ionInputイベントのdetailペイロードにアクセスするコードを event.detail から event.detail.value に更新します。

Toggle​

  1. CSS 変数 --background と --background-checked を使用している場合は、それぞれ --track-background と --track-background-checked にリネームします。

Virtual Scroll​

ion-virtual-scrollとそれに関連する型を削除する。このコンポーネントは、JavaScript Frameworks が提供する仮想スクロールのソリューションを使用するために削除されました。この移行については、以下のガイドに詳細が記載されています。

Angular Migration Guide
React Migration Guide
Vue Migration Guide

アップグレードに助けが必要？​

Ionic 7 Breaking Changes Guide を必ず見てください。デフォルトのプロパティと CSS Variable の値について、開発者が注意する必要がある変更がいくつかありました。このページでは、ユーザーアクションが必要な変更点のみをリストアップしています。

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

Contents

Edit this page