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
SwiftUI/Jetpack Composeを採用してよかったこと悪かったこと
Search
nekowen
April 21, 2022
Programming
2
1.4k
SwiftUI/Jetpack Composeを採用してよかったこと悪かったこと
2022/04/21 (木) に開催されたKyash Tech Talk #3の登壇資料です。
nekowen
April 21, 2022
Tweet
Share
More Decks by nekowen
See All by nekowen
アプリ起動時間を80%高速化した話 / Talk about 80% faster app startup time.
nekowen
0
130
健康第一!MetricKitで始めるアプリの健康診断 / App Health Checkups Starting with MetricKit
nekowen
5
5.1k
5分で理解するAccessorySetupKit / Understanding AccessorySetupKit in 5 minutes
nekowen
0
270
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
820
iOS13向けに位置情報周りを対応しようとしたら苦労した話
nekowen
1
460
Other Decks in Programming
See All in Programming
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
30
11k
Introduction to kotlinx.rpc
arawn
0
630
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
130
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
SpringBoot3.4の構造化ログ #kanjava
irof
2
970
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
210
最近のVS Codeで気になるニュース 2025/01
74th
1
250
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
890
Featured
See All Featured
Producing Creativity
orderedlist
PRO
343
39k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
Done Done
chrislema
182
16k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Building Adaptive Systems
keathley
40
2.4k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Transcript
Kyash TechTalk #3 Mobileチーム - KMM化、宣言的UI、Widget対応 2022/04/21 SwiftUI/Jetpack Composeを採用して よかったこと悪かったこと
2 2 iOS
自己紹介 • Ryoya Kobitsu (@nekowen) • iOS Engineer / Kyash
Inc. • Twitter: @n3k0w3n Kyash: @nekowen
4 4 01. SwiftUI導入までの経緯
5 • Kyashには20種類以上の履歴画面が存在していた ◦ Visa決済、QUIC Pay決済、Payeasy、クレジットカード 入金 etc… • 技術的負債となっていたのでリファクタリングを実施
• 以下の理由でSwiftUIを採用 ◦ レイアウト要素が単純で作り直しが容易 ◦ 要素の出し分けが多いためif文でレイアウトできた方が 好都合 • 以降、新規画面は原則、既存画面は順次SwiftUIへ きっかけは履歴画面のリファクタリング
6 Kyash iOS アプリの履歴画面を SwiftUI でリファクタリングした話 https://blog.kyash.co/entry/2021/07/21/100307
7 7 02. よかったこと
8 SwiftUI UIKit
9 • Storyboardを含むレビューはコストが高かった ◦ diffが大量に発生する ◦ コンフリクトが発生する頻度もそこそこあった ◦ レビュワーがローカルでチェックアウトして確認 ▪
スクリーンショットが貼ってあればスキップすることも • SwiftUIを採用して上記の課題を軽減 ◦ 変更箇所が明確なためレビューしやすい ◦ コンフリクトの発生頻度も減少 コードレビューの敷居が下がった
10 Kyashリワードの表示パターン 読み込み中 通信成功 通信失敗
11 • 通信が走る画面は ほぼこの共通Viewが使われて いる • 中ではDataSourceのstateを みて出し分けているためとて もシンプル Viewの切り替え処理が簡単
12 • cornerRadius, shadowといったModifierが用意されて いる ◦ UIKitでは扱いづらかったViewカスタマイズがや りやすい • アニメーション実装も簡単
◦ Shimmerのようなアニメーションも可能 ◦ iOS14以降はmodifierが用意されている ▪ .redacted(reason: .placeholder) Viewのカスタマイズも簡単
13 • SwiftUIコードを変更するとサイドのプレ ビュー画面にリアルタイムで反映 • Preview部分はSwiftでかけるので、画面 にサンプルデータを渡してプレビューす ることも可能 ◦ 長い文字列を渡してレイアウトが崩
れないか簡易的に確認することもで きる 強力なXcode Previews
14 • previewDeviceとpreviewDisplayNameを 活用すると、複数のデバイスでまとめて プレビューが可能 ◦ 開発中にレイアウト崩れがないか サッと確認できる ◦ 最小サイズであるiPhone
SE第一世 代と最大サイズであるiPhone 12 Pro Max両方同時にみれるので効率 が良い • previewDisplayNameはプレビュー端末の 上にタイトルとして表示される 強力なXcode Previews
15 15 03. 辛かったこと
16 • UITableViewのrefreshControlに相当する機能がない • iOS15からrefreshable(action:)が追加された ◦ iOS13-14はどうする…? • GeometryReaderとUIActivityIndicatorViewをラップしたView を組み合わせて実現
Pull to refreshが簡単にできない😭
17 • iOS13ではUICollectionViewに代わるコンポー ネントがない • iOS14以降ではLazyVGrid/LazyHGridが用意 された • iOS13のサポートを切るまではVStackと HStackで表現することに
Gridの実装が手間😭
18 • iOS13と14でコンポーネントにキーボードが被ったときの挙動が異なる ◦ iOS13だとそのまま ◦ iOS14だと自動的に位置を調整してくれる • iOS13はNotificationCenterを使うように分岐している キーボードの挙動が変わる😭
19 19 03. まとめ
20 まとめ • SwiftUI導入によって、チーム全体の生産性が向上した • OSバージョンごとにAPIの対応未対応の差が激しい ◦ これから導入する場合は、iOS14以降から利用することをオススメします。
21 21 Android
22 22 01. Jetpack Compose 導入までの経緯
23 • 決済や入出金を行うと履歴データが作られる。 ◦ 履歴の種類は20種類以上... • Fragmentとxmlがそれぞれ用意されていた ◦ 履歴を追加/改修するのが大変! ◦
QAコストも爆上がり • リファクタリングと同時にJetpack Composeに置き換える作戦に。 きっかけは履歴画面のリファクタリング
24 24 01. よかったこと
25 • 普段書いてるKotlinで書けるのでxml脳に切り替えなくて良い • 簡単に意味のあるグループに分割して、かつ名前が付けられる (xmlだとファイル分けて includeするしかなかった) ◦ レビューがしやすくなった Kotlinで書ける
26 xml Jetpack Compose
27 • リストの実装が非常に楽になった ◦ KyashはGroupieを使っていたが、セルの種類だけBindableItemを 継承したクラスを作る必要があった • themeのカスタマイズが定義に飛ぶだけで一覧を見れるので扱いやすい • すぐ調べられるようになった
◦ 以前はandroid codesearchとか使っていた • Webでも同じコードでUIが作れる ◦ Webで試したら普通に使えそうだった 扱いやすい
28 • View内に状態をもたないため自分でstateを管理する必要はあるが、想 定外なバグなどは出ない分安心できる • 冪等性最高 ◦ 副作用が分かれているので状態を意識しなくていい UIとロジックを分けられる
29 • めっちゃ生産性向上した • 新しくComposable作る際にある程度コストはかかるが、体感40%くら いは生産性向上してる • Compose最高! 結果
30 30 02. 辛かったこと
31 • Pager ◦ animateToScrollPageで最後のページから最初のペー ジに飛ぶ時にアニメーションしてくれない ◦ https://issuetracker.google.com/issues/198753 885 •
Placeholder ◦ 複数のplaceholderのImagePainter#Stateを監視す るとクラッシュする(Android6だけ) accompanist
32 MotionLayout
33 • 現状MotionSceneがjsonでしか書けない • そのうちKotlinで書けるらしい ◦ https://github.com/androidx/constraintlay out/wiki/Compose-MotionLayout-JSON-S yntax MotionLayout
34
35 • かなり生産性が上がるのでどんどん導入していきたい • もちろんまだまだ足りない機能はたくさんある • もっとComposeが便利になっていくのが楽しみ まとめ
Thank you 36