Updating from Ionic 5 to 6
This guide assumes that you have already updated your app to the latest version of Ionic 5. Make sure you have followed the Updating to Ionic 5 Guide before starting this guide.
For a complete list of breaking changes from Ionic 5 to Ionic 6, please refer to the breaking changes document in the Ionic Framework repository.
はじめ方
Angular
- Ionic 6 は Angular 12+ をサポートしています。 Angular Update Guide に沿って、最新バージョンの Angular に更新します。.
- Ionic6 の最新バージョンに更新します。
npm install @ionic/angular@6
Ionic Angular Server を使用している場合は、それも必ず更新してください:
npm install @ionic/angular@6 @ionic/angular-server@6
- Remove any usage of
Config.set()
. Instead, set your config inIonicModule.forRoot()
. See the Angular Config Documentation for more examples. - Remove any usage of the
setupConfig
function previously exported from@ionic/angular
. Set your config inIonicModule.forRoot()
instead.
React
- Ionic 6 は React 17+ をサポートしています。React の最新バージョンに更新します:
npm install react@latest react-dom@latest
- Ionic 6 の最新バージョンに更新します:
npm install @ionic/react@6 @ionic/react-router@6
package.json
のscripts
オブジェクトにあるtest
フィールドを更新して、transformIgnorePatterns
を含めます:
"scripts": {
"test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'",
...
}
- あなたの
App
コンポーネントでsetupIonicReact
を呼び出して下さい。もうsetupConfig
を利用している場合は、setupIonicReact
に置き換えてください:
Before
import { setupConfig } from '@ionic/react';
...
setupConfig({
mode: 'md'
});
After
import { setupIonicReact } from '@ionic/react';
...
setupIonicReact({
mode: 'md'
});
開発者は、 setupIonicReact
カスタム構成を設定していない場合でも、インポートして呼び出す必要があります。
See the React Config Documentation for more examples.
5.すべてのコントローラのインポートを @ionic/core
から @ionic/core/components
に更新します。例として、menuController
のマイグレーションを紹介します。
Before
import { menuController } from '@ionic/core';
After
import { menuController } from '@ionic/core/components';
Vue
- Ionic 6 は Vue 3.0.6+ をサポートしています。Vue の最新バージョンに更新ください。
npm install vue@3 vue-router@4
- Vue CLI を使用するアプリの場合は、Vue CLI 5 をインストールします。
npm install -g @vue/cli@next
次に、すべての Vue CLI プラグインをアップグレードします。
vue upgrade --next
- Ionic 6 の最新バージョンに 更新します。
npm install @ionic/vue@6 @ionic/vue-router@6
package.json
のjest.config.js
かjest
のどちらかにtransformIgnorePatterns
を含めます。
module.exports = {
...
transformIgnorePatterns: ['/node_modules/(?!@ionic/vue|@ionic/vue-router|@ionic/core|@stencil/core|ionicons)']
}
{
...
"jest": {
"transformIgnorePatterns": ["/node_modules/(?!@ionic/vue|@ionic/vue-router|@ionic/core|@stencil/core|ionicons)"]
}
}
詳しくは Testing section below をご覧ください。
-
Remove any usage of the
setupConfig
function previously exported from@ionic/vue
. Set your config when installing theIonicVue
plugin instead. See the Vue Config Documentation for more examples. -
useIonRouter
で利用してる型IonRouter
をUseIonRouterResult
に変更してください。 -
useKeyboard
で利用してる型IonKeyboardRef
をUseKeyboardResult
に変更してください。 -
すべてのオーバーレイイベントリスナーの名前を変更し、新しいフォーマットを使用するようにします。
Before
<ion-modal
:is-open="modalOpenRef"
@onWillPresent="onModalWillPresentHandler"
@onDidPresent="onModalDidPresentHandler"
@onWillDismiss="onModalWillDismissHandler"
@onDidDismiss="onModalDidDismissHandler"
>
...
</ion-modal>
After
<ion-modal
:is-open="modalOpenRef"
@willPresent="onModalWillPresentHandler"
@didPresent="onModalDidPresentHandler"
@willDismiss="onModalWillDismissHandler"
@didDismiss="onModalDidDismissHandler"
>
...
</ion-modal>
これらは ion-action-sheet
, ion-alert
, ion-loading
, ion-modal
, ion-picker
, ion-popover
, ion-toast
に適用されます。
ion-router-outlet
をion-tabs
の中にいれて利用します。
Before
<ion-tabs>
<ion-tab-bar slot="bottom"> ... </ion-tab-bar>
</ion-tabs>
<script>
import { IonTabs, IonTabBar } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonTabs, IonTabBar },
});
</script>
After
<ion-tabs>
<ion-router-outlet></ion-router-outlet>
<ion-tab-bar slot="bottom"> ... </ion-tab-bar>
</ion-tabs>
<script>
import { IonTabs, IonTabBar, IonRouterOutlet } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonTabs, IonTabBar, IonRouterOutlet },
});
</script>
- タブ内の追加ルートは、子ルートではなく兄弟ルートとして書き直す必要があります。
Before
const routes: Array<RouteRecordRaw> = [
{
path: '/',
redirect: '/tabs/tab1'
},
{
path: '/tabs/',
component: Tabs,
children: [
{
path: '',
redirect: 'tab1'
},
{
path: 'tab1',
component: () => import('@/views/Tab1.vue'),
children: {
{
path: 'view',
component: () => import('@/views/Tab1View.vue')
}
}
},
{
path: 'tab2',
component: () => import('@/views/Tab2.vue')
},
{
path: 'tab3',
component: () => import('@/views/Tab3.vue')
}
]
}
]
After
const routes: Array<RouteRecordRaw> = [
{
path: '/',
redirect: '/tabs/tab1',
},
{
path: '/tabs/',
component: Tabs,
children: [
{
path: '',
redirect: 'tab1',
},
{
path: 'tab1',
component: () => import('@/views/Tab1.vue'),
},
{
path: 'tab1/view',
component: () => import('@/views/Tab1View.vue'),
},
{
path: 'tab2',
component: () => import('@/views/Tab2.vue'),
},
{
path: 'tab3',
component: () => import('@/views/Tab3.vue'),
},
],
},
];
Core
- Ionic 6 の最新バージョンにアップデートください。
npm install @ionic/core@6
コアのアップデート
Datetime
-
placeholder
,pickerOptions
,pickerFormat
,monthNames
,monthShortNames
,dayNames
,dayShortNames
プロパティの使用をすべて削除してください。ion-datetime
は、デバイスに設定されている言語と地域に応じて、コンポーネント内に表示される月名、日名、時刻を自動的にフォーマットするようになりました。詳細は、ion-datetime Localization Documentation を参照してください。 -
text
とplaceholder
の CSS シャドウパーツの使用をすべて削除します。 -
CSS 変数
--padding-bottom
,--padding-end
,--padding-start
,--padding-top
,--placeholder-color
のすべての使用を削除します。ion-datetime
のパディングをカスタマイズするには、padding
CSS プロパティのいずれかを使用することができます。 -
open
メソッドの使用はすべて削除します。datetime をオーバーレイで表示するには、ion-modal
またはion-popover
コンポーネントの中に配置する。詳細は、ion-datetime Usage Examples を参照してください。 -
displayFormat
プロパティまたはdisplayTimezone
プロパティの使用をすべて削除します。ionChange` イベントのペイロードで提供される UTC 文字列をパースするには、date-fns を使用することをお勧めします。例としては、ion-datetime Parsing Dates Documentation を参照してください。
マイグレーション例は Datetime Migration Sample Application をご覧ください。
Icon
Ionic 6 には、Ionicons 6 が同梱されるようになりました。Ionicons 6 Breaking Changes Guide をご確認の上、必要な変更を行なってください。
Input
placeholder
プロパティの値として null
が渡されていないことを確認してください。代わりに undefined
を使用することを推奨します。
Modal
ion-modal
は Shadow DOM を使用するようになりました。 ion-modal
の内部をターゲットとするスタイルは、ion-modal CSS Variables または ion-modal CSS Shadow Parts を使用して更新してください。
Before
ion-modal .modal-wrapper {
/* Any custom styles here */
}
ion-modal ion-backdrop {
/* Any custom styles here */
}
After
ion-modal::part(content) {
/* Any custom styles here */
}
ion-modal::part(backdrop) {
/* Any custom styles here */
}
Popover
ion-popover
は Shadow DOM を使用するようになりました。 ion-popover
の内部をターゲットとするスタイルは、ion-popover CSS Variables または ion-popover CSS Shadow Parts を使用するように更新してください。
Before
ion-popover .popover-arrow {
/* Any custom styles here */
}
ion-popover ion-backdrop {
/* Any custom styles here */
}
ion-popover .popover-content {
/* Any custom styles here */
}
After
ion-popover::part(arrow) {
/* Any custom styles here */
}
ion-popover::part(backdrop) {
/* Any custom styles here */
}
ion-popover::part(content) {
/* Any custom styles here */
}
Radio
RadioChangeEventDetail
インターフェースのすべての使用法を削除します。
Select
placeholder
プロパティの値として null
が渡されていないことを確認してください。代わりに undefined
を使用することを推奨します。
Textarea
placeholder
プロパティの値として null
が渡されていないことを確認してください。代わりに undefined
を使用することを推奨します。
ブラウザサポート
Ionic がサポートしているブラウザのリストが変更されました。 ブラウザサポートガイド を確認し、サポートされているブラウザにアプリをデプロイするようにしましょう。
If you have a browserslist
or .browserslistrc
file, update it with the following content:
Chrome >=60
Firefox >=63
Edge >=79
Safari >=13
iOS >=13
テスト
Ionic 6 は、ES モジュールとして出荷されるようになりました。ES モジュールは、すべての主要なブラウザでサポートされており、開発者のエクスペリエンスとコードのメンテナンス性を向上させることができます。Jest でテストする開発者は、Jest 27 の時点で Jest が ES Modules を完全にサポートしていないため、Jest の設定を更新する必要があります。
このアップデートでは、Babel を使用して Ionic の ES モジュールを Jest が理解できる CommonJS (CJS) 形式にコンパイルする必要があります。Jest が ES モジュールをサポートするようになれば、この変更は必要なくなります。Jest の ES モジュールサポートに関する最新情報は、https://github.com/facebook/jest/issues/9430 を参照してください。
新しい Ionic アプリを新しく始める場合、この設定はスターターアプリケーションで行われます。既存の Ionic アプリをお持ちの方は、以下の手順で Jest を Ionic 6 で動作させることができます。
- Jest の設定に、関連する Ionic パッケージを含む
transformIgnorePatterns
フィールドを追加します。これは通常jest.config.js
またはpackage.json
のjest
フィールドに含まれています。
module.exports = {
...
transformIgnorePatterns: ['/node_modules/(?!@ionic/core|@stencil/core|ionicons)']
}
{
...
"jest": {
"transformIgnorePatterns": ["/node_modules/(?!@ionic/core|@stencil/core|ionicons)"]
}
}
Ionic React または Ionic Vue を使用している場合、適切なパッケージを transformIgnorePatterns
配列に追加してください。Ionic React の場合は、 @ionic/react
と @ionic/react-router
がこれにあたります。Ionic Vue の場合は、 @ionic/vue
と @ionic/vue-router
が含まれます。
Create React App (CRA) を使用している開発者にとっては、現在のところ Jest 設定ファイルの transformIgnorePatterns
を更新する方法がありません。これは CRA の制限であり、Ionic がコントロールできることではありません。しかし、react-scripts test
コマンドに直接 transformIgnorePatterns
を渡すことはできます。
"scripts": {
"test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'",
...
}
それでも問題が発生する場合は、以下のことを試してみてください。
-
@babel/preset-env
が file-relative configuration ではなく、 project-wide configuration に含まれていることを確認します。これは通常、<project-root>/babel.config.json
で Babel 設定を定義することを意味します。 -
package.json
ファイルにbrowserslist/test
フィールドがある場合、それがcurrent node
に設定されていることを確認してください。
アップグレートへの助けが必要?
Ionic 6 Breaking Changes Guideを必ずご覧ください。デフォルトプロパティと CSS Variable の値に、開発者が知っておくべき変更がいくつかありました。このページでは、ユーザーによる操作が必要な変更のみをリストアップしています。
アップグレードに助けが必要な場合、 Ionic Forum にスレッドを立ててください。