Html5でアプリを作ろう！Ionic3からIonic6へのコード変更箇所
「Ionicでつくるモバイルアプリ制作入門」2018年版（以下：青本）はとても優れた技術書ですが、対象環境がIonic3ベースで今メインのIonic6とは色々異なります。
本書の変更点を通じて、Ionic3からIonic6の変更箇所をまとめたいと思います。
概略
「Ionicでつくるモバイルアプリ制作入門」2018年版を新しい版とわかりやすく青本と記載している。また、コードの差として、Ionic3と書いてあるものは青本のコード、Ionic6と書いてあるものは、私が改変したコードです。※執筆時点では「Ionicでつくるモバイルアプリ制作入門」2019年版（新しい版）を読んでいないので、新しい版とコードが異なる部分があると思います。
プロジェクトの始め方
Ionic3はAngularのみだったので選択はなかったが、Ionic6では、Angular以外にRectやVueなどでもIonicを使用できるようになった関係で、コマンドでAngularを指定している。Ionic3のコマンドのままでも、セットアップ中の選択が減るだけなので、元のままでも困らない。
Ionic3
$ ionic start
Ionic6
$ ionic start --type=ionic-angular
ボタンタグの変更
htmlファイル内のボタンタグが変わっています。
青本で記載ページ：P54,P59,P62,P65,P68,P77
Ionic3
＜button ion-button>
Ionic6
<ion-button>
ファイル名の変更
青本内では、ページ毎に分割モジュールとして遅延読み込み（Lazy Load）する機能は意図して設定するように記述（P74）があるが、Ionic6では基本ページ毎の遅延読み込みになっているようだ。それに伴い、src/以下の構造も異なっている。
SAMPLE CODEの.ts、.htmlのファイル名と上のディレクトリ構造が異なります。
青本で記載ページ：P64〜多数
Ionic3
src/pages/hello-ionic/hello-ionic.ts src/pages/hello-ionic/hello-ionic.html
Ionic6
src/app/hello-ionic/hello-ionic.page.ts src/app/hello-ionic/hello-ionic.page.html
actionSheetのタイトルの付け方
青本で記載ページ：P83〜
Ionic3
title: 'タスクの変更',
Ionic6
header: 'タスクの変更',
import元の変更
Angularとの関係性が変わったからか、呼び出し方法が変更になっています。
青本で記載ページ：P80〜
ionic3
import { IonicPage, NavController, NavParams, ActionSheetController } from 'ionic-angular';
Ionic6
import { IonicPage, NavController, NavParams, ActionSheetController } from '@ionic/angular';
ボタンの余白の指定方法
青本で記載ページ：P68,P69,P77,P98
Ionic3
padding
Ionic6
class="ion-padding"
要素内イベント
青本で記載ページ：P81
Ionic3
(tap)=
Ionic6
(click)=
alartの非同期処理
async,await,constの追記
青本で記載ページ：P81,P85
Ionic3
_renameTask(index: number){
let prompt = this.alertCtrl.create({
….
prompt.present();
}
Ionic6
async _renameTask(index: number){ const prompt = await this.alertCtrl.create({ …. await prompt.present(); }
ionViewDidLoad
ionViewDidLoadはキャッシュのない時のみ実行されるので、再読み込みなどでは動かない。ページ表示時に実行したい場合は”ionViewDidEnter”を用いるとイメージ通りの動きを得られる。
Ionic3
ionViewDidLoad
Ionic6
ionViewDidEnter