お盆に実家に帰った際、せっかくなのでIonicで改めて何か作成しようと思いたち、電卓を作りました。何気なくはじめましたが、以外といろんなことにハマったので振り返ります。主に苦しい実装をしている箇所が中心です。
◯目次
・始まり編（ionic、目的、作成したソースコードの公開）
・仕様編（アプリの仕様説明）
・Component編（ボトムアップ式のリスト実現方法、変更検知、謎のsetTimeout、アニメーション）
・Directive編（文字サイズの変更、変更検知、謎の計算式）
-----ここから下はいつか書く----
・Pipe編（カンマ）
・テスト編（環境構築、Providerのテスト）
・その他編（ion-iconって機種ごとにあったりなかったりで表示されないんですね）
・デプロイ周り編（platform直下のファイルについて、netlify、PWA）
Ionicについて
WEB系の技術でモバイルアプリを作るためのフレームワーク＆CLIツール。フレームワークとしては、Bootstrapに雰囲気が近い印象です。
とっかかりの敷居が以上に低く動くアプリがすぐに作れる印象です。
1年前は色々痒いところに手が届かない印象でしたが、昨今のWEB技術発展に伴いやれることがどんどん増えている印象です。Ionicが変わらなくても周りがどんどん変わっていくという・・・。
もちろんIonic自体も1年前と比べてかなり変わってきました。
目的
Ionicは今年に入って目まぐるしくアップデートしている印象で、その流れに若干ついていけていなかったので腰を据えて勉強し直そうと思ったことがきっかけです。
なるべく丁寧な実装を心がけています。が、しかし、開発が進むに連れて苦しい実装が増えていきました。
なぜ電卓か？
当初はお盆だけで作業を終わらせるつもりだったのでなるべく仕様が決まっているものにしました。電卓なら仕様は決まっているしJavaScriptのサンプルもたくさんあると思って選びました。
作成したアプリ＆ソースコードについて
・Netlify
http://xcalculator.netlify.com/
※PCで見るとIonic-labが開きスマホで見るとPWAとなるはず