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
790
ABDで勉強会したらそれがチームビルディングになった話 / ABD is one of team-building method
acnaman
1
550
違和感 それはカイゼンのチャンス / Discomfort is an opportunity for Kaizen.
acnaman
0
560
オンライン登壇で意識したいこと / 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
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
itsmedreamwalker
0
150
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
1
2.2k
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
280
Laravel Boost 超入門
fire_arlo
1
140
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
15
8.4k
Namespace and Its Future
tagomoris
6
540
AHC051解法紹介
eijirou
0
630
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
23
9k
パスタの技術
yusukebe
1
400
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
130
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
730
Rancher と Terraform
fufuhu
0
110
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
900
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Typedesign – Prime Four
hannesfritz
42
2.8k
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