TofuFactory

Angular技術者が2018年から触れたIonic

この記事はIonicアドベントカレンダー4日目の記事です。

はじめまして、こんにちは。
Angularを中心に主にフロントエンドやってます。
半年ほど前からIonicの現場で稼働を始めたので、 イチAngular野郎なりに感じたことを書いてみます。
深い内容はないです。半分ポエムです。

本記事の内容

Ionic : 3系
Angular: 5系

Page,Provider

PageとComponentの違いってなんだろうがIonic習熟のスタートでした。
git cloneしてきた時の瞬間の違和感すごかったし。

Pageはざっくりアプリ1画面分をWrapしているComponentの解釈です。
うまくComponent分離できていない状態のAngularプロジェクトでも、こんなComponent作っちゃいがちです。 ただ、IonicにおけるPageの恩恵って大きいなと。
Pageはビュー単体として機能し、Componentと違ってスタンドアローンの概念を持っています。またビュー単位でのユーザー操作と、Pageのライフサイクルイベントによる制御はユーザー操作に即していることが多く、Pageはユーザー操作にマッチした仕組みといえるはずです。モバイルアプリに特化したIonicならではですね。 後述しますが、PageにAngularのライフサイクルイベントが使えると思ってガリガリ書いてたら、思ったように動かなかったり。

Service -> Provider なのはすぐ理解できました。 しかし、端々にAngularとの和解できない何かを感じる。

DevApp

iOSのデバッグ時は必須。

ionic serve -c

を実行するだけで実機検証できるのは本当に強い。素直に感動する。
この機能だけでもAngularにあれば捗ること間違いなしのはず。

実機検証も

ionic cordova run iosかandroid -lc

でやれちゃう。Ionicの力ってすげー。

ion-*

クセの強いComponentが多いのですが、一気にソレっぽいモバイルアプリになるところ。
OnsenUIを引き合いに出してちょっと見てみました。

リストビューでアイテムを右スワイプすると削除ボタンが表示される実装をそれぞれですると、

Ionic

<ion-list>
  <ion-item-sliding>
    <ion-item>
      <span>item</span>
    </ion-item>
    <ion-item-options side="right">
      <button ion-button (click)="delete()">削除</button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

OnsenUI

<ons-list>
  <ons-list-item style="padding: 0">
    <ons-carousel style="height: 50px; width: 100%" swipeable initial-index="0" auto-scroll>
      <ons-carousel-item>
        Item
      </ons-carousel-item>
      <ons-carousel-item>
        <button>削除</button>
      </ons-carousel-item>
    </ons-carousel>
  </ons-list-item>
</ons-list>

OnsenUIは↑の実装＋スワイプ時にItemを途中まで残す実装が必要なのですが、
IonicにあってOnsenUIにないネイティブっぽいUIセットがあったりするということです。

Lifecycle

Pageのライフサイクルイベントで、ユーザー操作に即した制御を書きつつ、
必要に応じてネストされたComponentでAngularのライフサイクルに制御を書く。

ライフサイクルイベントのなかでも
ionViewDidLoadはページがキャッシュされていない時に呼ばれるイベントであり、 初期処理を書く際にすごく有用。

そしてIonicとAngular共通して言えるのは、
Constuctorになんとなくで書いちゃまずいということ。

番外編

レビューアプリ

GithubでPR作ると自動でherokuのレビューアプリを作る仕組み作りました。
今ではレビューする時にたまに見て満足している程度ですが…

参考：Heroku Review Appsを使ってPRごとに環境をポコポコ立てて動作確認＋レビューをしやすくしよう - Qiita

iOS/Androidリリース

どちらも1人では乗り切れませんでしたが、体験しました。すごく大変。
煩雑な手続きと審査。モバイルアプリ最大の障壁だと思っています。
でもIonicはWebアプリとしてもリリースできるので、iOS/Androidリリースから逃れられますね笑
そこもまた魅力の一つです。

総括

2018年はIonic漬け…とまではいきませんが、
触れる時間が最も多かったライブラリでした。