サルでもわかる機械学習

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== Ionic3からIonic4への変更点 ======

VersionUpは非常に面倒ですが、なるべくキャッチアップしていきたいと思います。

===== Ionic4公式ドキュメント =====
https://beta.ionicframework.com/docs/

2018年7月にIonic 4 betaが公開されました。まだ正式版ではないので、様子見がよいと思いますが、随時、上記公式ドキュメントが更新されていくと思われます。
===== ionicアプリ作成コマンド"ionic start" =====

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


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

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



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

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>

===== routingが大幅変更 =====

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>
<ion-item>
 <ion-input type="password" placeholder="Password"></ion-input>
 <button clear item-right>Forgot</button>
</ion-item>
</code>

ionic4
<code>
<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に変更 =====

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

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

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

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

しかし、2018/8/1現在、うまくいきません。[[https://github.com/angular/angular-cli/issues/11640|参考外部リンク]]

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


https://www.joshmorony.com/create-a-pwa-with-angular-service-workers-in-ionic-4/
===== リンク =====
https://www.joshmorony.com/what-to-expect-when-ionic-4-is-released/\\
2018年5月時点（Ionic公式ではVersion4は未発表）でのIonic4での変更点の予想が分かりやすく記載されています（英語）。


https://blog.ionicframework.com/announcing-ionic-4-beta/

2018年7月に、Ionic 4.0.0-beta.0がリリースされました。まだ、beta版なので、様子見でよいと思います。


https://ionicthemes.com/tutorials/about/ionic-4-tutorial-mastering-web-components-in-ionic-4

https://github.com/ionicthemes/ionic-4-custom-components
===== Ionic3でお勧めの本 =====

以下のサイトが非常に分かりやすいです。

https://github.com/Ionic-jp/handbook

Ionic3入門の本は、以下がお勧めです。

<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>
サルでもわかる機械学習

ユーザ用ツール

サイト用ツール

ページ用ツール
