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

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

(アイコンのSVGは省略)注記

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

(アイコンのSVGは省略)破壊的変更

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

はじめに​

Angular​

  1. Ionic 6はAngular 12+をサポートしています。Angularアップデートガイドに従って、Angularの最新バージョンにアップデートしてください。
  2. Ionic 6の最新バージョンにアップデートする
npm install @ionic/angular@6

Ionic Angular Serverを使用している場合は、それもアップデートしてください

npm install @ionic/angular@6 @ionic/angular-server@6
  1. Config.set()の使用をすべて削除します.代わりに、`IonicModule.forRoot()`で設定を設定します。Angular設定ドキュメントで詳細な例をご覧ください。
  2. 以前に`@ionic/angular`からエクスポートされた`setupConfig`関数の使用をすべて削除します.代わりに、`IonicModule.forRoot()`で設定を設定します。

React​

  1. Ionic 6はReact 17+をサポートしています。Reactの最新バージョンにアップデートしてください
npm install react@latest react-dom@latest
  1. Ionic 6の最新バージョンにアップデートする
npm install @ionic/react@6 @ionic/react-router@6
  1. `package.json`の`scripts`オブジェクトにある`test`フィールドを更新して、`transformIgnorePatterns`を含めます
"scripts": {
  "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'",
  ...
}
  1. `App`コンポーネントファイルで`setupIonicReact`をインポートして呼び出します。`setupConfig`も使用している場合は、代わりに`setupIonicReact`に設定を渡します

変更前

App.tsx
import { setupConfig } from '@ionic/react';

...

setupConfig({
  mode: 'md'
});

変更後

App.tsx
import { setupIonicReact } from '@ionic/react';

...

setupIonicReact({
  mode: 'md'
});
(アイコンのSVGは省略)注記

カスタム設定を設定していない場合でも、開発者は`setupIonicReact`をインポートして呼び出す必要があります。

React設定ドキュメントで詳細な例をご覧ください。

  1. すべてのコントローラーのインポートを`@ionic/core`から`@ionic/core/components`に更新します。例として、`menuController`の移行を以下に示します

変更前

import { menuController } from '@ionic/core';

変更後

import { menuController } from '@ionic/core/components';

Vue​

  1. Ionic 6はVue 3.0.6+をサポートしています. Vueの最新バージョンにアップデートしてください
npm install vue@3 vue-router@4
  1. Vue CLIを使用するアプリの場合は、Vue CLI 5をインストールします
npm install -g @vue/cli@next

次に、すべてのVue CLIプラグインをアップグレードします

vue upgrade --next
  1. Ionic 6の最新バージョンにアップデートする
npm install @ionic/vue@6 @ionic/vue-router@6
  1. 次の`transformIgnorePatterns`を`jest.config.js`または`package.json`の`jest`フィールドに追加します
jest.config.js
module.exports = {
  ...
  transformIgnorePatterns: ['/node_modules/(?!@ionic/vue|@ionic/vue-router|@ionic/core|@stencil/core|ionicons)']
}
package.json
  {
    ...
    "jest": {
      "transformIgnorePatterns": ["/node_modules/(?!@ionic/vue|@ionic/vue-router|@ionic/core|@stencil/core|ionicons)"]
    }
  }

詳細は、以下のテストセクションを参照してください。

  1. 以前に`@ionic/vue`からエクスポートされた`setupConfig`関数の使用をすべて削除します。代わりに、`IonicVue`プラグインをインストールするときに設定を設定します。Vue設定ドキュメントで詳細な例をご覧ください。

  2. `useIonRouter`の`IonRouter`タイプを`UseIonRouterResult`に名前変更します.

  3. `useKeyboard`の`IonKeyboardRef`タイプを`UseKeyboardResult`に名前変更します.

  4. 新しい形式を使用するように、オーバーレイイベントリスナーの名前を変更します

変更前

<ion-modal
  :is-open="modalOpenRef"
  @onWillPresent="onModalWillPresentHandler"
  @onDidPresent="onModalDidPresentHandler"
  @onWillDismiss="onModalWillDismissHandler"
  @onDidDismiss="onModalDidDismissHandler"
>
  ...
</ion-modal>

変更後

<ion-modal
  :is-open="modalOpenRef"
  @willPresent="onModalWillPresentHandler"
  @didPresent="onModalDidPresentHandler"
  @willDismiss="onModalWillDismissHandler"
  @didDismiss="onModalDidDismissHandler"
>
  ...
</ion-modal>
(アイコンのSVGは省略)注記

これは、`ion-action-sheet`、`ion-alert`、`ion-loading`、`ion-modal`、`ion-picker`、`ion-popover`、および`ion-toast`に適用されます。

  1. 使用されているすべての`ion-tabs`に`ion-router-outlet`を渡します

変更前

<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>

変更後

<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>
  1. タブ内の追加ルートは、子ルートではなく兄弟ルートとして書き直す必要があります

変更前

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')
      }
    ]
  }
]

変更後

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'),
      },
    ],
  },
];

コア​

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

コードの更新​

日付時刻​

  1. `placeholder`、`pickerOptions`、`pickerFormat`、`monthNames`、`monthShortNames`、`dayNames`、および`dayShortNames`プロパティの使用をすべて削除します。`ion-datetime`は、デバイスに設定されている言語と地域に応じて、コンポーネント内に表示される月名、曜日、時刻を自動的にフォーマットするようになりました。ion-datetimeローカライゼーションドキュメントを参照してください。

  2. `text`および`placeholder` CSSシャドウパーツの使用をすべて削除します.

  3. `--padding-bottom`、`--padding-end`、`--padding-start`、`--padding-top`、および`--placeholder-color` CSS変数の使用をすべて削除します。`ion-datetime`のパディングをカスタマイズするには、任意の`padding` CSSプロパティを使用できます.

  4. `open`メソッドの使用をすべて削除します.日付時刻をオーバーレイに表示するには、`ion-modal`または`ion-popover`コンポーネント内に配置します。ion-datetime使用例を参照してください。

  5. `displayFormat`または`displayTimezone`プロパティの使用をすべて削除します。`ionChange`イベントのペイロードで提供されるUTC文字列を解析するには、date-fnsの使用をお勧めします。ion-datetime日付の解析ドキュメントで例をご覧ください。

(アイコンのSVGは省略)注記

その他の移行例については、日付時刻移行サンプルアプリケーションを参照してください。

アイコン​

Ionic 6にはIonicons 6が付属しています。Ionicons 6破壊的変更ガイドを確認し、必要な変更を加えてください。

入力​

`null`が`placeholder`プロパティに値として渡されないようにしてください。代わりに`undefined`を使用することをお勧めします。

`ion-modal`はシャドウDOMを使用するようになりました。`ion-modal`の内部をターゲットとするスタイルを更新して、ion-modal CSS変数またはion-modal CSSシャドウパーツを使用するようにしてください

変更前

ion-modal .modal-wrapper {
  /* Any custom styles here */
}

ion-modal ion-backdrop {
  /* Any custom styles here */
}

変更後

ion-modal::part(content) {
  /* Any custom styles here */
}

ion-modal::part(backdrop) {
  /* Any custom styles here */
}

ポップオーバー​

`ion-popover`はシャドウDOMを使用するようになりました。`ion-popover`の内部をターゲットとするスタイルを更新して、ion-popover CSS変数またはion-popover CSSシャドウパーツを使用するようにしてください

変更前

ion-popover .popover-arrow {
  /* Any custom styles here */
}

ion-popover ion-backdrop {
  /* Any custom styles here */
}

ion-popover .popover-content {
  /* Any custom styles here */
}

変更後

ion-popover::part(arrow) {
  /* Any custom styles here */
}

ion-popover::part(backdrop) {
  /* Any custom styles here */
}

ion-popover::part(content) {
  /* Any custom styles here */
}

ラジオボタン​

`RadioChangeEventDetail`インターフェースの使用をすべて削除します.

選択​

`null`が`placeholder`プロパティに値として渡されないようにしてください。代わりに`undefined`を使用することをお勧めします。

テキストエリア​

`null`が`placeholder`プロパティに値として渡されないようにしてください。代わりに`undefined`を使用することをお勧めします。

ブラウザのサポート​

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

`browserslist`または`.browserslistrc`ファイルがある場合は、次の内容で更新します

Chrome >=60
Firefox >=63
Edge >=79
Safari >=13
iOS >=13

テスト​

Ionic 6はESモジュールとして出荷されるようになりました。ESモジュールはすべての主要ブラウザでサポートされており、開発エクスペリエンスとコードメンテナンスの改善をもたらします。Jestでテストする開発者は、Jest 27の時点でJestがESモジュールを完全にサポートしていないため、Jestの設定を更新する必要があります。

このアップデートでは、Babelを使用してIonicのES ModulesをCommonJS（CJS）形式にコンパイルします。これはJestが理解できる形式です。JestがES Modulesのサポートを提供開始次第、この変更は不要になります。JestでのES Modulesのサポートに関する最新情報については、https://github.com/facebook/jest/issues/9430 をご覧ください。

Ionicアプリを新規作成する場合、この設定はスターターアプリケーションで自動的に行われます。既存のIonicアプリをお持ちの場合は、以下の手順に従ってJestをIonic 6で動作するように設定してください。

  1. 関連するIonicパッケージを含む `transformIgnorePatterns` フィールドをJest設定に追加します。これは通常、`jest.config.js` または `package.json` の `jest` フィールドにあります。
jest.config.js
module.exports = {
  ...
  transformIgnorePatterns: ['/node_modules/(?!@ionic/core|@stencil/core|ionicons)']
}
package.json
  {
    ...
    "jest": {
      "transformIgnorePatterns": ["/node_modules/(?!@ionic/core|@stencil/core|ionicons)"]
    }
  }
(アイコンのSVGは省略)注記

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が制御できるものではありません。ただし、`transformIgnorePatterns` を `react-scripts test` コマンドに直接渡すことはできます。

package.json
"scripts": {
  "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'",
  ...
}

それでも問題が発生する場合は、以下の点を確認してください。

  1. `@babel/preset-env` がファイル相対設定ではなく、プロジェクト全体の構成に含まれていることを確認してください。これは通常、Babel設定を `<project-root>/babel.config.json` で定義することを意味します。

  2. `package.json` ファイルに `browserslist/test` フィールドがある場合は、それが `current node` に設定されていることを確認してください。

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

Ionic 6 Breaking Changes Guide を必ず参照してください。開発者が認識する必要がある、デフォルトのプロパティとCSS変数値に対するいくつかの変更がありました。ユーザー操作が必要な重大な変更のみがこのページに記載されています。

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

目次

このページを編集