====== Ionic3からIonic4への変更点 ======
 ---// 2020/03/28 更新//

[[https://i-doctor.sakura.ne.jp/web/doku.php?id=00.ionic5:01.ionic5%E3%81%A7%E3%81%AE%E5%A4%89%E6%9B%B4%E7%82%B9|Ionic5での変更点]]
===== Ionic4　メニュー =====
<wrap hi>[[http://i-doctor.sakura.ne.jp/web/doku.php?id=00.ionic4:index.html|スマホ用ホームページ&スマホアプリ作成ソフトIonic4]]</wrap>

  -[[http://i-doctor.sakura.ne.jp/web/doku.php?id=00.ionic4:01.windowsでionicを始める方法|windowsでionicを始める方法]]
  -[[http://i-doctor.sakura.ne.jp/web/doku.php?id=00.ionic4:02.おすすめのionic入門書2019年版|おすすめのionic入門書2019年版]]
  -[[http://i-doctor.sakura.ne.jp/web/doku.php?id=00.ionic4:03.ionic4で計算アプリ|ionic4で計算アプリ]]
  -[[http://i-doctor.sakura.ne.jp/web/doku.php?id=00.ionic4:08.ionic4でタイマーアプリ|ionic4でタイマーアプリ]]
  -[[http://i-doctor.sakura.ne.jp/web/doku.php?id=00.ionic4:09.ionic4でpwa|Ionic4でPWA(Progressive Web Apps)]]


  -[[Ionic4での変更点]]　←このページ
  -[[RxJS6(Ionic4-Angular6)での変更点]]
  -[[Ionic4とDialogflow(V1)でチャットボットアプリ]]
  -[[Ionic4とfirebaseでチャットアプリ]]
  -[[Ionic4とFirestoreでCRUD]]
  -[[Capacitorプラグイン]]
  -[[Ionic4でのAndroidアプリ開発環境]]
  -[[Ionic4:Ionic4でルーティング|Ionic4でルーティング]]
  -[[Vue.jsでIonic4]]
  -[[z_blog:2018:181018_ionic4_storage_crud|Ionic4でStorage利用でCRUDを写経してみる]]
  -[[z_blog:2018:181020_ionic4_firestore_crud|Ionic4とFirestoreでCRUD]]

Ionic3については<wrap hi>[[ionic4:index.html|こちら]]</wrap>をご覧下さい。

参考：https://ionicframework.com/docs/　
===== 開発環境 =====
<code>
Windows 8.1 Pro(もちろんMacでもOKです)

nvm-windows 1.1.7(node.jsのバージョン管理のため)
Node 10.14.1
Ionic CLI 4.6.0
</code>

nvm-windowsについては[[http://twosquirrel.mints.ne.jp/?p=28131|こちら]]へ

nvm-windowsが面倒であれば、最初のうちは、https://nodejs.org/ja/からインストーラーをダウンロードして、Node.jsをインストールするのが一番簡単です。Node.jsのインストール後は、コマンドプロンプトで、
<code>
npm install -g ionic
</code>
と入力すれば、Ionic CLIがインストールされます。[[https://beta.ionicframework.com/docs/installation/cli|公式サイト]]

===== Ionic3からIonic4への移行方法（英語） =====
https://www.joshmorony.com/my-method-for-upgrading-from-ionic-3-to-ionic-4/
→こちらのサイトがよいと思われます。

===== ionicアプリ作成コマンド"ionic start" =====

ionic4では、コマンドブロンプトで以下のコマンドを入力して、ionic4アプリを作成します（アプリの名前を''myApp''とする場合）。

<code>
ionic start myApp blank --type=angular
</code>

将来的に、ReactやVueでもIonicが利用できるようになる予定だそうで、そのために、''%%--type=angular%%''が必要になってしまったようです。

http://twosquirrel.mints.ne.jp/?p=26519




===== フォルダ構造とファイル名が変更 =====

ionic4では、pagesフォルダが無くなり、appフォルダ直下にページ用フォルダを作成するようになりました。

例えば、<code>ionic g page contact</code>とすると、src/app/ フォルダの中に、contact/ フォルダが作成されます。さらに、contact/ フォルダの中に、以下の5個のファイルが作成されます。
<code>
contact.module.ts
contact.page.html
contact.page.scss
contact.page.spec.ts
contact.page.ts
</code>


http://twosquirrel.mints.ne.jp/?p=26519

参考:https://beta.ionicframework.com/docs/cli/generate


===== <button ion-button>から<ion-button>へ =====

<code>
<button ion-button></button> // Ionic version 3
<ion-button></ion-button>    // Ionic version 4
</code>

その他、'' 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/\\
{{:pasted:20180615-075901.png}}

routingを試してみたので、以下に記載してみました。

http://twosquirrel.mints.ne.jp/?p=26533

http://twosquirrel.mints.ne.jp/?p=26825


===== slot =====

Ionic4では、<wrap em><ion-buttons slot="end"></wrap>のように、ボタンなどの配置を設定します。

以下のサイトが分かりやすいです。(英語)

https://www.joshmorony.com/understanding-how-slots-are-used-in-ionic-4/

上記サイトによると、例えば、ページのヘッダーは、以下のように記載するとのことです。(ちなみに、ion-navbarではなく、ion-toolbarを用います。)

<code html>
<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>
</code>


ionic3
<code html>
<ion-item>
 <ion-input type="password" placeholder="Password"></ion-input>
 <button clear item-right>Forgot</button>
</ion-item>
</code>

ionic4
<code html>
<ion-item>
  <ion-input type="password" placeholder="Password"></ion-input>
  <ion-buttons slot="end">
    <ion-button>Forget</ion-button>
  </ion-buttons>
</ion-item>
</code>



===== ion-navbarがion-toolbarに変更 =====

上記のコードを参考にしてください。

なぜtoolbarなどという名前に変更にしたのか疑問でしたが、CSSフレームワークBulmaやVuetifyもtoolbarという名前を用いており、他のフレームワークにあわせたのかなと思います。

===== RxJS5からRxJS6に変更 =====

非同期通信のためのRxJSですが、大幅変更が行われています。

[[RxJS6(Ionic4-Angular6)での変更点]]
===== PWA化が面倒に =====
ionic3では、index.htmlの一部分のコメントを外すだけでPWA化できたのですが、ionic4では、コマンドブロンプトで@angular/pwaをインストールする必要があります。

<code>
ng add @angular/pwa
</code>

Ionic4デフォルトアプリをPWA化してFirebase Hostingにデプロイする過程を以下に記載しましたので、もしよろしければご覧下さい。

<wrap hi>[[http://i-doctor.sakura.ne.jp/web/doku.php?id=00.ionic4:09.ionic4でpwa|Ionic4でPWA(Progressive Web Apps)]]</wrap>

また、Ionic4デフォルトアプリをPWA化して、Netlifyにデプロイする過程も以下に記載しました。

<wrap hi>[[http://twosquirrel.mints.ne.jp/?p=28877|Ionic4アプリをでPWA（Progressive Web Apps）化してNetlifyにデプロイ]]</wrap>



===== リンク =====
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

https://github.com/ionicthemes/ionic-4-custom-components

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