リモートLT チェックリスト

LT開始前

音声チェックをしたか？

資料URLをZoomチャットに投稿したか？

資料URLをtwitterに投稿したか？

アンケートをワンタップで投稿できるような状態になっているか？

LT開始直後

資料は公開してあることを伝えたか？

ツイート禁止スライドについて説明したか？

LT原稿

こんばんは、IonicV3 -> V5アップデートのツラミということで発表します。

加藤ともうします。インフォテック株式会社というところで新規事業のエンジニアやってます。

最初におことわりなんですが、まずスライドはアップ済みです。先ほどtwitterにも流したんで、ハッシュタグから適当に見つけてください。

次に、基本的にツイートしていただいて構わないんですが、一個だけNGなスライドがあります。そのスライドについたときに言いますので、そのときだけツイートの自粛お願いします

お酒片手に気楽にお聞きください。

本日のアジェンダです。Ionicについて軽く説明し、バージョンアップの話、最後に裏話的なツラミの話をしていけたらと考えています。

まずIonicについてです

Ionicなんですけど、ご存じの方どれくらいいますか？実はですね、いまTwitterにアンケートを作って(Twitterのタブに変えて)こんな感じで答えられるようにしてあるので、そちらに回答お願いします(少し時間おく)

Ionicについて軽く説明します。モバイル向けのJavaScriptフレームワークで、PWAとかiOS/Androidのアプリを作れます。

有名なサービスだとTechFeedとかで使われてます。

今日はバージョンアップの話なんでバージョンの話をしますね。V3からV5へとこんな感じでバージョンが上がっています。

で、内容なんですがV3とV4の間で結構変わってます。V3まではAngularベースの独自路線の単体フレームワークだったんですが、V4から大きく変わって、AngularだけでなくReactやVueなどのフレームワークと連携できるようになりました。

次に、バージョンアップの話をします。

最初に、私の作ってるものの紹介です。こちらのスライドの内容だけ、ツイートNGでお願いします。新規事業なので画面とかあまり公開できなくて。こんな感じのですね、＜公開につき削除＞。フロントエンドがIonicでバックエンドがFirebaseでやってます。

ここからはツイートOKです。で、Ionic V3に限界を感じました。V3は開発止まってるので、TypeScriptのバージョンアップに対応できないんですね。細かいところでエラーが出てしまう感じです。V5も出たのでアップデートしようと。

で、フレームワークのアップデートなんてnpmでlatest持ってくれば行けるっしょって思ってたんですよ。

そしたら全然そんなこと無くて

先ほどお話したとおり、IonicはV3とV4の間で大きな変更が入ってるんですが、このときに破壊的な変更が行われてます。

で、その破壊的変更の説明資料がGitHubに上がってるんですけど、その説明資料が1962行もあるんですねｗ

それにプラスでIonic公式の移行ガイドのページもあるんですが、さらっとGenerate a new project、つまりプロジェクト作り直せって書いてあるんですねｗ

さすがにいろいろつらすぎたので、やったことをQiitaにまとめました。

一部を抜粋してご紹介すると、

まずCLIのバージョンが変わってます。パッケージ名も変わってたりするので注意が必要です。

破壊的な変更をチェックできるチェックツールがあります。V3のソースをチェックツールにかけるとログとして直し方出してくれる便利なツールです。1962行分の変更ぜんぶ読んでく時間はないのでまずはチェックツールをかけるのがおすすめです。

ソースの移行方法なんですが、基本的には新しく作ったプロジェクトにソースをコピペしていく作業になります。

新しいプロジェクトの中でionic generate で画面を作って、そのソースの中に旧ファイルの中身をコピペする感じになります。先程紹介したチェックツールに沿って修正されたソースであれば中身をコピペすることでだいたい動くようになります。

他にもいろいろあるんですが、ぜんぶはご紹介する時間がないので残り気になる方はQiitaをご覧いただければと思います。

で、Qiitaにはきれいなところしか書いてないので裏話的なツラミの話をこれからしていきますね。

まずはバージョンアップ作業中の開発が止まるということ。結局バージョンアップ作業は2週間くらいかかったんですが、その間上がってる機能要望に手がつけられなくて歯痒い思いをしました。

コレなんですが、機能が多くなる前にバージョンアップに手を出すべきでした。やはりあのコピペの作業がとても大変だったので、移行ファイルが少ないうちに対応すべきだったと思います。

またですね、アップデートしたらロードがめっちゃ遅くなりました。Angularの上に乗っかることになったのでファイルがめっちゃ増えました。それと移行の途中で最適化処理が漏れちゃった可能性があります。

これはAngularのチューニングを行うことである程度改善できるかなと思います。ロード時間はservice-workerでキャッシュ制御すれば改善できそうな気がしますが、プロトタイプのようにキャッシュが残ると面倒な状況だとなかなか手を出しづらいのが難点ですね…

もちろんバージョンアップして良いこともありました。当初の困りごとだったTypeScriptのエラーは解消されました。また、Angularの恩恵を受けられるのはでかいです。V3までのIonicはAngularベースとはいえ完全にAngularの機能を持っているわけではないのでできることの制限が結構ありました。V5ではそういう部分をAngularにまかせているのでドキュメントが豊富に手に入ります。

まとめです。今日はご覧の内容をお話しました。IonicはPWAを作れるフレームワークであること、V3→V4で大きなアップデートがあったこと、アップデート手順はQiitaに書いたこと、アップデートしても全てが良くなるわけではないこと。です。