目次
Ionic3からIonic4への変更点
— 2020/03/28 更新
Ionic4 メニュー
開発環境
Windows 8.1 Pro(もちろんMacでもOKです) nvm-windows 1.1.7(node.jsのバージョン管理のため) Node 10.14.1 Ionic CLI 4.6.0
nvm-windowsについてはこちらへ
nvm-windowsが面倒であれば、最初のうちは、https://nodejs.org/ja/からインストーラーをダウンロードして、Node.jsをインストールするのが一番簡単です。Node.jsのインストール後は、コマンドプロンプトで、
npm install -g ionic
と入力すれば、Ionic CLIがインストールされます。公式サイト
Ionic3からIonic4への移行方法（英語）
https://www.joshmorony.com/my-method-for-upgrading-from-ionic-3-to-ionic-4/
→こちらのサイトがよいと思われます。
ionicアプリ作成コマンド"ionic start"
ionic4では、コマンドブロンプトで以下のコマンドを入力して、ionic4アプリを作成します（アプリの名前をmyAppとする場合）。
ionic start myApp blank --type=angular
将来的に、ReactやVueでもIonicが利用できるようになる予定だそうで、そのために、--type=angularが必要になってしまったようです。
フォルダ構造とファイル名が変更
ionic4では、pagesフォルダが無くなり、appフォルダ直下にページ用フォルダを作成するようになりました。
例えば、
ionic g page contact
とすると、src/app/ フォルダの中に、contact/ フォルダが作成されます。さらに、contact/ フォルダの中に、以下の5個のファイルが作成されます。
contact.module.ts contact.page.html contact.page.scss contact.page.spec.ts contact.page.ts
<button ion-button>から<ion-button>へ
<button ion-button></button> // Ionic version 3 <ion-button></ion-button> // Ionic version 4
その他、 expand=“full” の使い方など、詳細は公式ドキュメントhttps://ionicframework.com/docs/api/button のサンプルコードをご覧下さい。
routingが大幅変更
Ionic3では、NavControllerのpushなどを用いてページ遷移していましたが、Ionic4では、Angularのルーティングを用いる必要があります。Ionic4でもNavControllerというものはありますが、
Ionic3のNavControllerとは使い方が異なるようです。
英語ですが、以下の記事がお勧めです。
https://www.joshmorony.com/converting-ionic-3-push-pop-navigation-to-angular-routing-in-ionic-4/
routingを試してみたので、以下に記載してみました。
slot
Ionic4では、<ion-buttons slot=“end”>のように、ボタンなどの配置を設定します。
以下のサイトが分かりやすいです。(英語)
https://www.joshmorony.com/understanding-how-slots-are-used-in-ionic-4/
上記サイトによると、例えば、ページのヘッダーは、以下のように記載するとのことです。(ちなみに、ion-navbarではなく、ion-toolbarを用います。)
<ion-toolbar color="primary"> <ion-title> The Title </ion-title> <ion-buttons slot="end"> <ion-button (click)="addTodo()"> <ion-icon slot="icon-only" name="add-circle"></ion-icon> </ion-button> </ion-buttons> </ion-toolbar>
ionic3
<ion-item> <ion-input type="password" placeholder="Password"></ion-input> <button clear item-right>Forgot</button> </ion-item>
ionic4
<ion-item> <ion-input type="password" placeholder="Password"></ion-input> <ion-buttons slot="end"> <ion-button>Forget</ion-button> </ion-buttons> </ion-item>
ion-navbarがion-toolbarに変更
上記のコードを参考にしてください。
なぜtoolbarなどという名前に変更にしたのか疑問でしたが、CSSフレームワークBulmaやVuetifyもtoolbarという名前を用いており、他のフレームワークにあわせたのかなと思います。
RxJS5からRxJS6に変更
非同期通信のためのRxJSですが、大幅変更が行われています。
PWA化が面倒に
ionic3では、index.htmlの一部分のコメントを外すだけでPWA化できたのですが、ionic4では、コマンドブロンプトで@angular/pwaをインストールする必要があります。
ng add @angular/pwa
Ionic4デフォルトアプリをPWA化してFirebase Hostingにデプロイする過程を以下に記載しましたので、もしよろしければご覧下さい。
Ionic4でPWA(Progressive Web Apps)
また、Ionic4デフォルトアプリをPWA化して、Netlifyにデプロイする過程も以下に記載しました。
リンク
https://www.joshmorony.com/what-to-expect-when-ionic-4-is-released/
2018年5月時点（Ionic公式ではVersion4は未発表）でのIonic4での変更点の予想が分かりやすく記載されています（英語）。
https://ionicthemes.com/tutorials/about/ionic-4-tutorial-mastering-web-components-in-ionic-4
Ionic4でお勧めの本
2019年2月現在、Ionic4の本は、以下の1冊のみです。パスワード制限つき掲示板の作り方が丁寧に記載されています。お勧めです。
<html>
<iframe style=“width:120px;height:240px;” marginwidth=“0” marginheight=“0” scrolling=“no” frameborder=“0” src=“rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=i-doctor-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B07MFYD3DP&linkId=2c9e1889025e06557bc3e8effa1e0c77”></iframe>
</html>
===== Ionic3でお勧めの本 =====
以下のサイトが非常に分かりやすいです。
https://github.com/Ionic-jp/handbook
以下はIonic3入門の本ですが、アプリ作成時点ではIonic4との違いはわずかですし、最初から丁寧にわかりやすくIonicについて解説されていますので、非常にお勧めです。
<html>
<iframe style=“width:120px;height:240px;” marginwidth=“0” marginheight=“0” scrolling=“no” frameborder=“0” src=“rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=twosquirrel-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B0792PKGZ1&linkId=f3c953f6aa35b7734e5fc9a1bb7ffebf”></iframe>
</html>