バージョン: v8

Ionic 4へのアップデート

Ionic 3から4へのアップデート

注意

このガイドでは、アプリがすでにIonic 3の最新バージョンに更新されていることを前提としています。Ionic 1または2を使用している場合は、代わりにIonic 1から4へのアップデートガイドに従ってください。

破壊的変更

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

既存のアプリケーションをIonic 3から4に移行する場合は、次の一般的なプロセスをお勧めします。

blankスターターを使用して新しいプロジェクトを生成します（アプリの開始を参照）。
src/providersからsrc/app/servicesにAngularサービスをコピーします。
- サービスには、@Injectable()デコレーターに{ providedIn: 'root' }を含める必要があります。詳細については、Angularのプロバイダードキュメントを参照してください。
ディレクトリ構造がsrc/componentsからsrc/app/componentsなどに変更されることに注意しながら、アプリの他のルートレベル項目（パイプ、コンポーネントなど）をコピーします。
グローバルSassスタイリングをsrc/app/app.scssからsrc/global.scssにコピーします。
次の項目に留意しながら、アプリケーションの残りの部分をページごとまたは機能ごとにコピーします。
- エミュレートされたシャドウDOMはデフォルトでオンになっています。
- ページ/コンポーネントのSassは、ページ/コンポーネントタグでラップする必要がなくなり、AngularのstyleUrlsオプションを@Componentデコレーターで使用する必要があります。
- RxJSはv5からv6に更新されました（RxJSの変更を参照）。
- 特定のライフサイクルフックは、Angularのフックに置き換える必要があります（ライフサイクルイベントを参照）。
- マークアップの変更が必要になる場合があります（移行ツールが利用可能です。マークアップの変更を参照）。

多くの場合、Ionic CLIを使用して新しいオブジェクトを生成し、コードをコピーする方法も非常に有効です。たとえば、ionic g service weatherは、シェルWeatherサービスとテストを作成します。コードは必要に応じてわずかな変更を加えて、古いプロジェクトからコピーできます。これにより、適切な構造が確実に維持されます。これにより、ユニットテストのシェルも生成されます。

パッケージ名の変更

Ionic 4では、パッケージ名は@ionic/angularです。Ionic 3をアンインストールし、新しいパッケージ名を使用してIonic 4をインストールします。

$ npm uninstall ionic-angular
$ npm install @ionic/angular@v4-lts

アプリを移行する際は、ionic-angularからのインポートを@ionic/angularに更新します。

プロジェクト構造

Ionic 3アプリとIonic 4アプリの間の主な変更点の1つは、全体的なプロジェクトのレイアウトと構造です。v3では、Ionicアプリには、アプリをどのようにセットアップし、フォルダー構造をどのようにすべきかについてのカスタムの規約がありました。v4では、これが変更され、サポートされている各フレームワークの推奨セットアップに従うようになりました。

たとえば、アプリがAngularを使用している場合、そのプロジェクト構造はAngular CLIアプリの構造とまったく同じになります。この変更は、対応が難しすぎるわけではありませんが、一般的なパターンとドキュメントの一貫性を維持するのに役立ちます。

Ionic 4
Ionic 3

src/
├── app/
│   ├── about/
│   ├── home/
│   ├── app-routing.module.ts
│   ├── app.component.html
│   ├── app.component.spec.ts
│   ├── app.component.ts
│   └── app.module.ts
├── assets/
├── environments/
├── theme/
├── global.scss
├── index.html
├── karma.conf.js
├── main.ts
├── polyfills.ts
├── test.ts
├── tsconfig.app.json
└── tsconfig.spec.json
.gitignore
angular.json
ionic.config.json
package.json
tsconfig.json
tslint.json

src/
├── app/
│   ├── app.component.html
│   ├── app.html
│   ├── app.module.ts
│   ├── app.scss
│   └── main.ts
├── assets/
├── pages/
│   ├── about/
│   ├── home/
├── theme/
├── index.html
├── manifest.json
└── service-worker.js
.gitignore
ionic.config.json
package.json
tsconfig.json
tslint.json

上記の比較は、v4アプリのプロジェクト構造の例です。プレーンなAngularプロジェクトの経験を持つ開発者にとって、これは非常になじみのあるものに感じるはずです。

アプリのホームとして機能するsrc/ディレクトリがあります。これには、index.html、アセット、環境構成、およびアプリ固有の設定ファイルが含まれます。

この新しいレイアウトを利用するためにアプリを移行する際は、CLIを使用して新しいプロジェクト「ベース」を作成することをお勧めします。次に、新しいプロジェクトレイアウトを使用して、アプリの機能を段階的に移行します。ページ/コンポーネントなどは、src/app/フォルダーに移動する必要があります。

Ionic構成ファイルに適切なtypeがあることを確認してください。v3のプロジェクトタイプはionic-angularです。v4のプロジェクトタイプはangularです。この値が正しくないと、CLIが間違ったビルドスクリプトを呼び出す可能性があります。

例として次のionic.config.jsonを参照してください

{
  "name": "my-app",
  "type": "angular"
}

RxJSの変更

V3とV4の間で、RxJSはバージョン6に更新されました。これにより、演算子とコアRxJS関数のインポートパスの多くが変更されます。詳細については、RxJS移行ガイドを参照してください。

ライフサイクルイベント

V4では、Angularによって提供される一般的なイベントを利用できるようになりました。ただし、特定のケースでは、ルート変更中にコンポーネントのアニメーションが完了したときに発生するイベントにアクセスする必要がある場合があります。この場合、ionViewWillEnter、ionViewDidEnter、ionViewWillLeave、およびionViewDidLeaveはV3から移植されています。これらのイベントを使用して、Ionic独自のアニメーションシステムとのアクションを調整します。

ionViewDidLoad、ionViewCanLeave、およびionViewCanEnterなどの古いイベントは削除され、適切なAngular代替を使用する必要があります。

詳細については、router-outletドキュメントを参照してください。

オーバーレイコンポーネント

以前のバージョンのIonicでは、ローディング、トースト、アラートなどのオーバーレイコンポーネントは同期的に作成されていました。Ionic v4では、これらのコンポーネントはすべて非同期的に作成されます。この結果、APIはPromiseベースになりました。

// v3
showAlert() {
  const alert = this.alertCtrl.create({
    message: "Hello There",
    subHeader: "I'm a subheader"
  });

  alert.present();
}

v4では、Promiseが使用されます

showAlert() {
  this.alertCtrl.create({
    message: "Hello There",
    subHeader: "I'm a subheader"
  }).then(alert => alert.present());
}

// Or using async/await

async showAlert() {
  const alert = await this.alertCtrl.create({
    message: "Hello There",
    subHeader: "I'm a subheader"
  });

  await alert.present();
}

V4では、ナビゲーションが最も多くの変更を受けました。現在、Ionic独自のNavControllerを使用する代わりに、公式のAngularルーターと統合しています。これにより、アプリ全体で一貫したルーティングエクスペリエンスが提供されるだけでなく、信頼性が大幅に向上します。Angularチームは、ドキュメントサイトにルーターの詳細を網羅した優れたガイドを持っています。

ユーザーが慣れ親しんでいるプラットフォーム固有のアニメーションを提供するために、Angularアプリ向けにion-router-outletを作成しました。これはAngularのrouter-outletと同様に動作しますが、スタックベースのナビゲーション（タブ）とアニメーションを提供します。

V4プロジェクトでのナビゲーションの仕組みの詳細については、Angularナビゲーションガイドを参照してください。

遅延ロード

ナビゲーションが変更されたため、V4では遅延ロードのメカニズムも変更されました。

v3では、一般的な遅延ロードのセットアップは次のようになっていました。

// home.page.ts
@IonicPage({
  segment: 'home'
})
@Component({ ... })
export class HomePage {}

// home.module.ts
@NgModule({
  declarations: [HomePage],
  imports: [IonicPageModule.forChild(HomePage)]
})
export class HomePageModule {}

ただし、v4では、遅延ロードはAngularルーターのloadChildrenメソッドを介して行われます。

// home.module.ts
@NgModule({
  imports: [IonicModule, RouterModule.forChild([{ path: '', component: HomePage }])],
  declarations: [HomePage],
})
export class HomePageModule {}

// app.module.ts
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    RouterModule.forRoot([
      { path: 'home', loadChildren: './pages/home/home.module#HomePageModule' },
      { path: '', redirectTo: 'home', pathMatch: 'full' },
    ]),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

V4プロジェクトでの遅延ロードの詳細については、Angularナビゲーションガイドを参照してください。

マークアップの変更

v4ではカスタム要素に移行したため、各コンポーネントのマークアップに大きな変更がありました。これらの変更はすべてカスタム要素の仕様に従って行われ、GitHubの専用ファイルに文書化されています。

これらのマークアップの変更を支援するために、TSLintベースの移行ツールをリリースしました。これにより、問題を検出し、一部の問題を自動的に修正することもできます。

Ionic 1から4へのアップデート

Ionic 1からIonic 4への移行：何が含まれるか？

Ionic 1からIonic 4への移行には、AngularJS（別名Angular 1）からAngular 7以降への移行が含まれます。これらのバージョン間には多くのアーキテクチャ上の違いがあるため、アプリのコードの一部を書き直す必要があります。必要な作業量は、アプリの複雑さとサイズによって異なります。

良い点としては、ほとんどの場合、V1でおなじみのIonic UIコンポーネントはあまり変わっていません。

アップグレードを開始する前に検討すべき事項をいくつかご紹介します。

アプリの複雑さ：当然ながら、アプリが大きく複雑になるほど、移行にかかる時間は長くなります。
フレームワークのサポート：2019年には、IonicはReactのフルサポートをリリースする予定です。また、フレームワークなしでIonic Frameworkコンポーネントを使用することもできます。これらはまだ本番環境に対応していないため、Angularを使用するか、他のフレームワークのサポートが利用可能になるまで待つことをお勧めします。
予算とチーム構成：移行プロジェクトの長さは、チームの規模、アプリの複雑さ、移行に割り当てられた時間によって異なります。

推奨される戦略

開発チームが移行を開始する適切な期間を特定したら、Ionic 1アプリケーションの機能フリーズを行い、コードを整理することをお勧めします。大きなバグを修正し、技術的負債を解消し、必要に応じて再編成します。次に、移行する機能と放棄する機能を特定します。

Ionic 1アプリが安定したら、新しいIonic 4プロジェクトを作成します。開発チームの注意は、新しいプロジェクトに集中させる必要があります。移行をできるだけ迅速かつスムーズに行うために、Ionic 1アプリではバグのみを修正する必要があります。

チームがIonic 4アプリが安定し、コアとなる機能セットを満たしていると確信したら、Ionic 1アプリをシャットダウンできます。

AngularJSからAngularへの移行

公式のAngularアップグレードガイド情報を参照してください。

Ionicの変更点

上記のIonic 3からIonic 4への移行セクションが参考になる場合があります。ブランクスターターを使用して新しいIonic 4プロジェクトを生成します（アプリの開始を参照）。時間をかけてIonic 4コンポーネントに慣れてください。ハッピービルディング！

サポートが必要ですか？

チームが移行のサポートを必要とする場合は、お問い合わせください！Ionicは、Ionic 4トレーニング、アーキテクチャレビュー、移行支援を含むアドバイザリーサービスを提供しています。

Ionic 4へのアップデート

Ionic 3から4へのアップデート​

パッケージ名の変更​

プロジェクト構造​

RxJSの変更​

ライフサイクルイベント​

オーバーレイコンポーネント​

ナビゲーション​

遅延ロード​

マークアップの変更​

Ionic 1から4へのアップデート​

Ionic 1からIonic 4への移行：何が含まれるか？​

推奨される戦略​

AngularJSからAngularへの移行​

Ionicの変更点​

サポートが必要ですか？​

目次