ionicの勉強会で学んだこと
はじめて記事書きます。
以前ionicの勉強会に参加した時に会社に提出するように書いたレポートの丸コピです。
間違っている部分とかあれば教えてくださるとありがたやです。
お手柔らかにお願いします。
ionicとは
Web, iOS, androidのアプリを作ることができるクロスプラットフォームのUIフレームワーク。
Cordova/Capacitorの上にangular/react/vueがありUIをionicが担当している。
ver4からreact, vueでも使えるようになった。（2109/12/15の最新はver.4.11.7）また、根底がCordovaからCapacitorになった。 勉強会時点ではionic/vueはまだバグもあるようでおすすめは出来なさそうだった。
※2020/02/11にionic5がリリースされたようです。https://ionicframework.com/blog/announcing-ionic-5/
- Cordova/Capacitorとは何か
apache cordovaというアプリ開発用のクロスプラットフォームのフレームワークで、JS, HTML, CSSを使ってアプリ開発ができる技術。アプリに対してビルドを行う時にはCordovaが使われている。
Capacitorとはionic社がCordovaの精神をそのままに最新の技術で作り直したもの。（Cordovaが作られたのが10数年前でずっと後方互換のあるバージョンアップしかしていない為、コードの中には開発当時のものもあり最新技術で作り直したいという背景があった）
現在弊社の業務として使っているionicはangular, ionicの部分だけなので、業務上Capacitorの部分を扱うことはないがアプリ用にラップするときはCordova/Capacitorの技術を使っているので、ビルドエラーの時などはCordova/Capacitorの技術も必須になる。
逆に言えば、実はCapacitorさえあればiOS, androidのアプリを作ることができる。
ionicはどうやってネイティブにビルドしているのか
先述の通り実際にビルドしているのはionicではなくCordova/Capacitorであり、ionicはあくまでUI部分を担当している。
Cordova/CapacitorがWebアプリをWebView上で実行し、デバイス上のネイティブ機能（カメラ、GPSなど）を実行するためのインタ―フェイスを提供している。
ionicのメリット
ionicのメリットとして以下が挙げられる。
（WEB開発者にとって）学習コストの低さ
大部分のソースの統一
デフォルトでPWA対応
コミュニティが活発
- 1 について
Javascript（+ Angular, React, Vue）とHTML, CSSで開発ができるので、WEB開発者にとっては初期学習の必要なくアプリ開発を始められるので開発効率が良い。
- 2 について
OSに依存した一部機能はそれぞれの書き方をする必要があるが、その部分を除いてソースを統一できる。
その分リソースを削減できるので開発者側としては非常に大きなメリットになる。
3 について(PWA「Progressive Web Apps」とはWebサイトをネイティブアプリのように使うことができるアプリのこと)
インストールせずにアイコンをホーム画面に置ける。
プッシュ通知が利用可能となる。
キャッシュを残すのでオフラインでも閲覧可能。
読み込み速度が格段に向上する
などの利点がある。
- 4 について
Slackにionicのチームがあるようで、活発に活動していて質問などにいろいろ答えてくれることが多いらしい。また私の参加したconnpassによる勉強会も盛んでionicの開発者が直接色々話してくる。今回の勉強会では、本レポートに記述した内容の他に「ionicがCordovaをどうやってラップしているか」「circleCIによるionicの速度の継続的計測」などの話があった（レベルが高くて理解しきれずレポートには書けなかった。）
ionicのデメリット
上記の仕組みによりiOSやandroidなどのOSの違いをCordova/Capacitorが吸収してくれているが、いくつかの問題もある。
ネイティブ機能を使用できるかどうかはその為のプラグインが用意されているかどうかに依存している
OSのバージョンアップに即時対応できない。
Cordova/Capacitorが一枚かんでしまっている分どうしてもネイティブより描画速度が劣ってしまう。
- 1 について
ionicではネイティブの機能を使用できるよう各機能に対応するプラグインが用意されている。
公式によるプラグインやサードパーティ製のものなどもあるが、ざっと確認した限りでは基本的な機能はそろっている。https://ionicframework.com/jp/docs/native/overview（公式のプラグイン集）
が、すべてを網羅できているわけではないようなので、使いたいプラグインがなかった場合は諦めるか自作するなどの措置を取る必要がある。
- 2 について
Cordova/Capacitorに依存してしまっている以上、各OSがバージョンアップしてもCordova/Capacitorが新しいバージョンに対応したものを出さない限りはバージョンアップすることができない。
Cordova/Capacitorは比較的活発に動いているコミュニティではあるが、常に即時対応できるわけではない。
また、Cordova/Capacitorのバージョンアップ対応と①のプラグインのバージョンアップ対応は別の問題であるため、両方のバージョンアップ対応を待たないといけなくなる。
- 3 について
この問題は端末の性能向上とJavascriptのレンダリング速度向上によりかなり改善されているので、ゲームなどのスピードを必要とするアプリでない限りはそれほど気にならないようになっている。
とはいえ、Cordova/Capacitorが一枚噛んでいるという仕組み上、描画速度がネイティブを上回ることはない。
まとめ
今回の勉強はレベルが高く、正直何を言っているのかわからないところもそれなりにあったが、それをきっかけとしてionicのことを良く知る機会にもなったので行って正解だった。
また、このレポートを書くにあたり、勉強会のメモだけでは情報が足りなかったのでいくつかのwebサイトからも情報を集めたが、ionicについて断片的にしかもっていなかった情報をまとめることができた。
今後も機会があれば積極的に勉強会に参加していきたい。
参考サイト
