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

Ionic 6から7へのアップデート

注記

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

破壊的変更

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

はじめに​

Angular​

  1. Ionic 7はAngular 14以降をサポートしています。Angularアップデートガイドに従って、最新の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

注記: @ionic/angular-toolkit@9はAngular 15以上が必要です。まだAngular 14を使用している場合は、@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

コア​

  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 }を使用してください。

チェックボックス​

  1. --backgroundおよび--background-checked CSS変数の使用箇所をそれぞれ--checkbox-backgroundおよび--checkbox-background-checkedに名前変更してください。

日付時刻​

  1. valueプロパティを空文字列（''）に設定するコードを削除してください。
  2. valueプロパティでタイムゾーン情報にアクセスするコードを削除してください。日付時刻はタイムゾーンを管理しないため、提供されたタイムゾーン情報は無視されます。

入力​

  1. ionInputイベントのdetailペイロードへのアクセスコードをevent.detailからevent.detail.valueに更新してください。detailペイロードは、値とイベントを含むオブジェクトになりました。
  1. swipeToCloseプロパティの使用を削除してください。カードモーダルはデフォルトでスワイプ可能です。カードモーダルをスワイプ可能なままにする場合は、swipeToCloseを削除できます。canDismissプロパティを使用して、モーダルの閉じ込みを防止できます。
  2. canDismissプロパティをundefinedに設定するコードを削除してください。canDismissプロパティは、現在はデフォルトでtrueになります。そのため、このコードは不要になりました。

ピッカー​

  1. ion-picker-columnでrefreshにアクセスするコードを削除してください。代わりに、ion-pickerのcolumnsプロパティを使用してビューを更新してください。
  1. ionInputイベントのdetailペイロードへのアクセスコードをevent.detailからevent.detail.valueに更新してください。detailペイロードは、値とイベントを含むオブジェクトになりました。

セグメント​

  1. valueプロパティをnullに設定するコードを削除してください。代わりに''またはundefinedを使用してください。

スライド​

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

Angular移行ガイド
React移行ガイド
Vue移行ガイド

テキストエリア​

  1. ionInputイベントのdetailペイロードへのアクセスコードをevent.detailからevent.detail.valueに更新してください。detailペイロードは、値とイベントを含むオブジェクトになりました。

トグル​

  1. --backgroundおよび--background-checked CSS変数の使用箇所をそれぞれ--track-backgroundおよび--track-background-checkedに名前変更してください。

バーチャルスクロール​

  1. ion-virtual-scrollおよび関連する型を削除してください。このコンポーネントは、JavaScriptフレームワークが提供するバーチャルスクロールソリューションの使用に変更されました。以下のガイドでは、この移行に関する詳細情報が記載されています。

Angular移行ガイド
React移行ガイド
Vue移行ガイド

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

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

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

目次

このページを編集する