Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Ionic V3 ー> V5 アップデートのツラミ / The pain of Ionic u...
Search
acnaman
May 20, 2020
Programming
1
740
Ionic V3 ー> V5 アップデートのツラミ / The pain of Ionic update
2020-05-20 PWA Night vol.16 ~オンラインLT大会!~ 発表資料
acnaman
May 20, 2020
Tweet
Share
More Decks by acnaman
See All by acnaman
問いのデザイン2章 / "The Design of Questions" Chapter 2
acnaman
0
750
ABDで勉強会したらそれがチームビルディングになった話 / ABD is one of team-building method
acnaman
1
540
違和感 それはカイゼンのチャンス / Discomfort is an opportunity for Kaizen.
acnaman
0
550
オンライン登壇で意識したいこと / What online speakers should be aware of
acnaman
0
130
元読書嫌いが読書会を始めるまでの歩み
acnaman
0
220
カイゼンを始めて変わったこと
acnaman
1
1.5k
Other Decks in Programming
See All in Programming
MCPで実現できる、Webサービス利用体験について
syumai
6
1.8k
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
690
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
560
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
190
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
150
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
11
7.1k
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
450
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
180
20250708_JAWS_opscdk
takuyay0ne
2
150
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
240
Yes, You Can Work on Rails & any other Gem
kaspth
0
110
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Side Projects
sachag
455
43k
Designing for Performance
lara
610
69k
Making Projects Easy
brettharned
116
6.3k
Gamification - CAS2011
davidbonilla
81
5.4k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Raft: Consensus for Rubyists
vanstee
140
7k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Adopting Sorbet at Scale
ufuk
77
9.5k
Typedesign – Prime Four
hannesfritz
42
2.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
RailsConf 2023
tenderlove
30
1.2k
Transcript
Ionic V3 ー> V5 アップデートの ツラミ 2020/5/20 PWA Night 加藤翼 @acnaman
自己紹介 • 加藤翼 • インフォテック株式会社 新規事業T プログラマー • GitHub : acnaman
• Twitter : acnaman_dev • コミュニティ運営メンバー 2
おことわり • スライドはアップ済みです • 基本ツイート等OKですが、1スライドの みダメなやつがあります →該当スライドのときにアナウンスします • ハッシュタグは #pwanight
で! • お酒片手(or両手)にお聞きください 3
アジェンダ • Ionicとは • V3→V5へバージョンアップした話 • バージョンアップのツラミ(裏話) 4
アジェンダ • Ionicとは • V3→V5へバージョンアップした話 • バージョンアップのツラミ(裏話) 5
知ってる人〜? Twitterアンケートに反応もとむ! 6
Ionicとは • モバイル向けJavaScriptフレームワーク • PWAの作成 • iOS/Androidネイティブアプリへの変換 • TechFeedとかで使われてます 7
メジャーバージョンの変遷 V3 2019年1月 V4 V5 2020年1月 8
メジャーバージョンの変遷 V3 2019年1月 V4 V5 2020年1月 独自路線の単体 フレームワーク (Angularベース) 他フレームワークとの
連携が可能 ※Vue対応はbeta 9
アジェンダ • Ionicとは • V3→V5へバージョンアップした話 • バージョンアップのツラミ(裏話) 10
Ionic V3で構築したPWA • 新規事業のプロトタイプ • モバイル利用を想定したPWA • Ionic + Firebase
• 新規事業のため詳細は非公開です 11
V3に限界がきた • TypeScriptのバージョンアップに追随 しない ◦ プロダクションビルド時のエラー ◦ Jestのエラー →V5出たしアップデートしよう! 12
npmで最新落とせば いけるっしょー > npm install ionic/angular@latest こんな感じ? アップデート舐めてたぼく 13
npmで最新落とせば いけるっしょー > npm install ionic/angular@latest こんな感じ? アップデート舐めてたぼく 14 否
メジャーバージョンの変遷 V3 2019年1月 V4 V5 2020年1月 独自路線の単体 フレームワーク (Angularライク) 他フレームワークとの
連携が可能 大アップデート 破壊的な変更 ※Vue対応はbeta 15
「破壊的変更」の説明資料 1962行分の 「破壊的変更」 @IonicのGitHub 16
公式の移行ガイド さらっと 「プロジェクト作り直せ」 って書いてある 17
つらすぎるので移行方法書いた 18
一部抜粋 19
CLIのバージョンアップ 新しいCLIをインストール パッケージ名すら変わっているという罠 20 V3 V5 CLIパッケージ名 ionic @ionic/cli
チェックツールを使う 「破壊的な変更」のチェックツール チェックツール:https://github.com/ionic-team/V4-migration-tslint 21 V3のソースファイル チェックツール レポートログ
ソースの移行方法 旧プロジェクト (チェックツール分修正済み) > ionic generate XXX 新プロジェクト 生成されたファイルに 中身をコピペする
新Ionic用の ファイルを生成 22 新プロジェクト作成+ionic generate →生成されたファイルに中身をコピペ
続きはQiitaで! https://qiita.com/acnaman/items/b44b09b1f0c0c341c081 23
アジェンダ • Ionicとは • V3→V5へバージョンアップした話 • バージョンアップのツラミ(裏話) 24
ツラミ1:開発が止まる • ぼっち開発者 • アップデート作業中は機能追加ができ ない 25 機能 追加 アップ
デート
どうすべきだったか? • 機能が多くなる前にバージョンアップ すべきだった 26 対象ファイル少ない 対象ファイル多い
ツラミ2:重くなる • アプデ後の初期ロードが遅い ◦ ファイル数の増加 ▪ 79ファイル → 1122ファイル ◦
Angularの最適化できてない 27
どうすべきだったか? • Angularのチューニング ◦ service-workerでキャッシュ制御 ◦ Lazy Load 28 ただし頻繁に更新する時期だと
やりづらい 学習コスト高いの が悩み…
もちろん良かったことも • TypeScriptのエラーは消滅 • Angularの恩恵を受けられる ◦ V3はAngularの機能を使い切れない ◦ ドキュメント豊富 29
これから新しく作る場合はIonic V5で作りましょう
まとめ • IonicはPWAを作れるフレームワーク • V3→V4で大きなアップデートがあった • アップデート手順はQiitaにまとめた • アップデートしても全てが良くなるわ けではない(重くなるなど)
30