Slide 1
Slide 1 text
Ionic V3 ｰ> V5 アップデートの
ツラミ
2020/5/20 PWA Night
加藤翼 @acnaman
Slide 2
Slide 2 text
自己紹介
● 加藤翼
● インフォテック株式会社
新規事業Ｔ プログラマー
● GitHub : acnaman
● Twitter : acnaman_dev
● コミュニティ運営メンバー
2
Slide 3
Slide 3 text
おことわり
● スライドはアップ済みです
● 基本ツイート等OKですが、1スライドの
みダメなやつがあります
→該当スライドのときにアナウンスします
● ハッシュタグは #pwanight で！
● お酒片手(or両手)にお聞きください
3
Slide 4
Slide 4 text
アジェンダ
● Ionicとは
● V3→V5へバージョンアップした話
● バージョンアップのツラミ(裏話)
4
Slide 5
Slide 5 text
アジェンダ
● Ionicとは
● V3→V5へバージョンアップした話
● バージョンアップのツラミ(裏話)
5
Slide 6
Slide 6 text
知ってる人〜？
Twitterアンケートに反応もとむ！
6
Slide 7
Slide 7 text
Ionicとは
● モバイル向けJavaScriptフレームワーク
● PWAの作成
● iOS/Androidネイティブアプリへの変換
● TechFeedとかで使われてます
7
Slide 8
Slide 8 text
メジャーバージョンの変遷
V3 2019年1月
V4 V5
2020年1月
8
Slide 9
Slide 9 text
メジャーバージョンの変遷
V3 2019年1月
V4 V5
2020年1月
独自路線の単体
フレームワーク
(Angularベース)
他フレームワークとの
連携が可能
※Vue対応はbeta
9
Slide 10
Slide 10 text
アジェンダ
● Ionicとは
● V3→V5へバージョンアップした話
● バージョンアップのツラミ(裏話)
10
Slide 11
Slide 11 text
Ionic V3で構築したPWA
● 新規事業のプロトタイプ
● モバイル利用を想定したPWA
● Ionic + Firebase
● 新規事業のため詳細は非公開です
11
Slide 12
Slide 12 text
V3に限界がきた
● TypeScriptのバージョンアップに追随
しない
○ プロダクションビルド時のエラー
○ Jestのエラー
→V5出たしアップデートしよう！
12
Slide 13
Slide 13 text
npmで最新落とせば
いけるっしょー
> npm install ionic/angular@latest
こんな感じ？
アップデート舐めてたぼく
13
Slide 14
Slide 14 text
npmで最新落とせば
いけるっしょー
> npm install ionic/angular@latest
こんな感じ？
アップデート舐めてたぼく
14
否
Slide 15
Slide 15 text
メジャーバージョンの変遷
V3 2019年1月
V4 V5
2020年1月
独自路線の単体
フレームワーク
(Angularライク)
他フレームワークとの
連携が可能
大アップデート
破壊的な変更
※Vue対応はbeta
15
Slide 16
Slide 16 text
「破壊的変更」の説明資料
1962行分の
「破壊的変更」
＠IonicのGitHub
16
Slide 17
Slide 17 text
公式の移行ガイド
さらっと
「プロジェクト作り直せ」
って書いてある
17
Slide 18
Slide 18 text
つらすぎるので移行方法書いた
18
Slide 19
Slide 19 text
一部抜粋
19
Slide 20
Slide 20 text
CLIのバージョンアップ
新しいCLIをインストール
パッケージ名すら変わっているという罠
20
V3 V5
CLIパッケージ名 ionic @ionic/cli
Slide 21
Slide 21 text
チェックツールを使う
「破壊的な変更」のチェックツール
チェックツール：https://github.com/ionic-team/V4-migration-tslint
21
V3のソースファイル チェックツール レポートログ
Slide 22
Slide 22 text
ソースの移行方法
旧プロジェクト
(チェックツール分修正済み)
> ionic generate XXX
新プロジェクト
生成されたファイルに
中身をコピペする
新Ionic用の
ファイルを生成
22
新プロジェクト作成＋ionic generate
→生成されたファイルに中身をコピペ
Slide 23
Slide 23 text
続きはQiitaで！
https://qiita.com/acnaman/items/b44b09b1f0c0c341c081
23
Slide 24
Slide 24 text
アジェンダ
● Ionicとは
● V3→V5へバージョンアップした話
● バージョンアップのツラミ(裏話)
24
Slide 25
Slide 25 text
ツラミ１：開発が止まる
● ぼっち開発者
● アップデート作業中は機能追加ができ
ない
25
機能
追加 アップ
デート
Slide 26
Slide 26 text
どうすべきだったか？
● 機能が多くなる前にバージョンアップ
すべきだった
26
対象ファイル少ない 対象ファイル多い
Slide 27
Slide 27 text
ツラミ２：重くなる
● アプデ後の初期ロードが遅い
○ ファイル数の増加
■ 79ファイル → 1122ファイル
○ Angularの最適化できてない
27
Slide 28
Slide 28 text
どうすべきだったか？
● Angularのチューニング
○ service-workerでキャッシュ制御
○ Lazy Load
28
ただし頻繁に更新する時期だと
やりづらい
学習コスト高いの
が悩み…
Slide 29
Slide 29 text
もちろん良かったことも
● TypeScriptのエラーは消滅
● Angularの恩恵を受けられる
○ V3はAngularの機能を使い切れない
○ ドキュメント豊富
29
これから新しく作る場合はIonic V5で作りましょう
Slide 30
Slide 30 text
まとめ
● IonicはPWAを作れるフレームワーク
● V3→V4で大きなアップデートがあった
● アップデート手順はQiitaにまとめた
● アップデートしても全てが良くなるわ
けではない(重くなるなど)
30