SwiftUIで STORES 予約 をフルリニューアルした話

登壇資料

2022/02/16 (水) 13:00-14:00
ラクマ x STORES LTイベント ~ iOS開発の裏側 ~
https://hey.connpass.com/event/236189/

Transcript

1. ɹɹ ©︎ hey, Inc SwiftUI で STORES 予約 を フルリニューアルした話 ヘイ株式会社 テクノロジー部門 モバイルアプリケーション本部 予約グループ モバイルエンジニア 吉田 圭佑 | @y0shikei
2. 自己紹介 1 ɹɹ 吉田 圭佑 | @y0shikei Keisuke Yoshida ヘイ株式会社 (2021.08 ~) STORES 予約　モバイルエンジニア
3. ɹɹ 1. STORES 予約 とは？ 2. リニューアルアプリについて 3. SwiftUIを利用してみて Agenda 2
4. STORES 予約 とは？ 1 ❶ サービス概要 ❷ アプリについて 3
5. 1. STORES 予約とは？ ❶ サービス概要 4
6. 5 ɹɹ 予約の「めんどう」を 
 解決する ガイドに沿って設定するだけで、 
 あっという間に専用の予約サイトを作成。 1. STORES 予約とは？ ❶ サービス概要
7. 6 ɹɹ フリーミアム SaaS としての月額利用料 予約決済手数料 (オンライン決済導入時) オーナーさま向け 予約者さま向け 1. STORES 予約とは？ ❶ サービス概要
8. ❷ アプリについて 1. STORES 予約とは？ 7
9. 8 ɹɹ それぞれ iOS / Android のアプリが存在 (計4つ) 1. STORES 予約とは？ ❷ アプリについて オーナーさま向け 予約者さま向け
10. 9 ɹɹ オーナーさま向けのiOSアプリをリニューアル🎉 1. STORES 予約とは？ ❷ アプリについて
11. リニューアルアプリについて 2 ❶ SwiftUIを採用した経緯 ❷ 技術スタック 10
12. ❶ SwiftUIを採用した経緯 2. リニューアルアプリについて 11
13. ❶ SwiftUIを採用した経緯 12 2. リニューアルアプリについて ɹɹ 🛠 リソースが限られた中での開発 モバイルエンジニアが自分１人のみ → 宣言的UIフレームワークを使い開発スピードを上げたい Flutterという選択肢 → 他サービスのアプリとの今後の親和性を考えて不採用 🧑💻
14. ❶ SwiftUIを採用した経緯 13 2. リニューアルアプリについて ɹɹ 🎬 新しい技術にトライできるタイミング 📝 OSの普及率 → サポートバージョンがiOS14~でよかった アプリの要件 → 比較的シンプルな構造で特殊な機能が必要なかった フルスクラッチ → デザインから作り直すのでUI周りの制約がなかった 📱 🐣
15. ❷ 技術スタック 2. リニューアルアプリについて 14
16. ❷ 技術スタック 15 2. リニューアルアプリについて ɹɹ アーキテクチャ：MVVM → アプリ規模も大きくないのでシンプルに フレームワーク：SwiftUI + Combine → 前述した通り APIクライアント：REST API → 既存のAPIを活用するため パッケージ管理：Swift Package Manager → Firebaseの対応もありSwiftPMのみで完結 🏛 ⚙ 📦
17. SwiftUIを利用してみて 3 ❶ 強みと弱み ❷ 具体的な事例 16
18. ❶ 強みと弱み 3. SwiftUIを利用してみて 17
19. ❶ 強みと弱み 18 3. SwiftUIを利用してみて ɹɹ SwiftUIの強み コンポーネント単位でUIを使いまわしできる → レイアウトが似ている画面を素早く作れる コードの記述がシンプル → 宣言的にレイアウトを組めるためUIKitよりコード量が減る UIの変更に強くレビューしやすい → コンポーネントの集合なので変更しやすい＆読みやすい ♻ 👍 🎨
20. ❶ 強みと弱み 19 3. SwiftUIを利用してみて ɹɹ OS間で実装を分けないといけないことがある → iOS14/15両方で動作を担保するのが大変＆めんどう ベストプラクティスが少ない＆挙動が安定していない → 色々と手探りで実装していく必要がある(気合い) UIKitでできたことがすべてできるわけではない → まだUIKitに頼らざるを得ないときがある 📚 🤷 ⚠ SwiftUIの弱み
21. ❷ 具体的な事例 3. SwiftUIを利用してみて 20
22. ❷ 具体的な事例 21 3. SwiftUIを利用してみて ɹɹ ⭕ 構造が似ているUIの流用 ReservationTabView ScheduleTabView ReservationTileView ScheduleTileView ReservationView ScheduleView コードベースなので ・流用が容易 ・変更コストが低い 開発効率UP
23. ❷ 具体的な事例 22 3. SwiftUIを利用してみて ɹɹ ⭕ List (TableView) をシンプルなコードで実現 UIKit SwiftUI サンプルコード サンプルコード SwiftUIの方が コード量が少ない 開発効率UP
24. ❷ 具体的な事例 23 3. SwiftUIを利用してみて ɹɹ ❌ Listのseparatorを消す サンプルコード iOS15 iOS14 iOS13 ただListのseparatorを 消したいだけなのに… それぞれのOSごとに 分岐させる必要がある ※iOS14に関しては 　半ば無理やり消している...汗
25. ❷ 具体的な事例 24 3. SwiftUIを利用してみて ɹɹ ❌ 複雑な動きをSwiftUIのみで実現しにくい UIKitの部分 サンプルコード PullToRefresh →下スワイプで予約情報の更新 SwipeReader →左右スワイプでセグメント切替 ActivityIndicator →予約情報の読み込みをお知らせ
26. 25 ɹɹ まとめ https://hello.hey.jp/engineer 採用情報 STORES 予約 を SwiftUIでリニューアルしてみて... 当初の狙い通り開発スピードを担保できた → 約3ヶ月でリニューアル＆リリースできた！ コードがシンプルになる → UIの流用や変更に強く、読みやすいためレビューしやすい かゆいところに手が届いていない → OSごとの対応やUIKitの併用がまだ必要 🚀 ☀ ☔