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

by yoshikei

Slide 1

Slide 1 text

ɹɹ ©︎ hey, Inc SwiftUI で STORES 予約をフルリニューアルした話ヘイ株式会社テクノロジー部門モバイルアプリケーション本部予約グループモバイルエンジニア吉田圭佑 | @y0shikei

Slide 2

Slide 2 text

自己紹介 1 ɹɹ 吉田圭佑 | @y0shikei Keisuke Yoshida ヘイ株式会社 (2021.08 ~) STORES 予約　モバイルエンジニア

Slide 3

Slide 3 text

ɹɹ 1. STORES 予約とは？ 2. リニューアルアプリについて 3. SwiftUIを利用してみて Agenda 2

Slide 4

Slide 4 text

STORES 予約とは？ 1 ❶ サービス概要 ❷ アプリについて 3

Slide 5

Slide 5 text

1. STORES 予約とは？ ❶ サービス概要 4

Slide 6

Slide 6 text

5 ɹɹ 予約の「めんどう」を   解決するガイドに沿って設定するだけで、   あっという間に専用の予約サイトを作成。 1. STORES 予約とは？ ❶ サービス概要

Slide 7

Slide 7 text

6 ɹɹ フリーミアム SaaS としての月額利用料予約決済手数料 (オンライン決済導入時) オーナーさま向け予約者さま向け 1. STORES 予約とは？ ❶ サービス概要

Slide 8

Slide 8 text

❷ アプリについて 1. STORES 予約とは？ 7

Slide 9

Slide 9 text

8 ɹɹ それぞれ iOS / Android のアプリが存在 (計4つ) 1. STORES 予約とは？ ❷ アプリについてオーナーさま向け予約者さま向け

Slide 10

Slide 10 text

9 ɹɹ オーナーさま向けのiOSアプリをリニューアル🎉 1. STORES 予約とは？ ❷ アプリについて

Slide 11

Slide 11 text

リニューアルアプリについて 2 ❶ SwiftUIを採用した経緯 ❷ 技術スタック 10

Slide 12

Slide 12 text

❶ SwiftUIを採用した経緯 2. リニューアルアプリについて 11

Slide 13

Slide 13 text

❶ SwiftUIを採用した経緯 12 2. リニューアルアプリについて ɹɹ 🛠 リソースが限られた中での開発モバイルエンジニアが自分１人のみ → 宣言的UIフレームワークを使い開発スピードを上げたい Flutterという選択肢 → 他サービスのアプリとの今後の親和性を考えて不採用 🧑💻

Slide 14

Slide 14 text

❶ SwiftUIを採用した経緯 13 2. リニューアルアプリについて ɹɹ 🎬 新しい技術にトライできるタイミング 📝 OSの普及率 → サポートバージョンがiOS14~でよかったアプリの要件 → 比較的シンプルな構造で特殊な機能が必要なかったフルスクラッチ → デザインから作り直すのでUI周りの制約がなかった 📱 🐣

Slide 15

Slide 15 text

❷ 技術スタック 2. リニューアルアプリについて 14

Slide 16

Slide 16 text

❷ 技術スタック 15 2. リニューアルアプリについて ɹɹ アーキテクチャ：MVVM → アプリ規模も大きくないのでシンプルにフレームワーク：SwiftUI + Combine → 前述した通り APIクライアント：REST API → 既存のAPIを活用するためパッケージ管理：Swift Package Manager → Firebaseの対応もありSwiftPMのみで完結 🏛 ⚙ 📦

Slide 17

Slide 17 text

SwiftUIを利用してみて 3 ❶ 強みと弱み ❷ 具体的な事例 16

Slide 18

Slide 18 text

❶ 強みと弱み 3. SwiftUIを利用してみて 17

Slide 19

Slide 19 text

❶ 強みと弱み 18 3. SwiftUIを利用してみて ɹɹ SwiftUIの強みコンポーネント単位でUIを使いまわしできる → レイアウトが似ている画面を素早く作れるコードの記述がシンプル → 宣言的にレイアウトを組めるためUIKitよりコード量が減る UIの変更に強くレビューしやすい → コンポーネントの集合なので変更しやすい＆読みやすい ♻ 👍 🎨

Slide 20

Slide 20 text

❶ 強みと弱み 19 3. SwiftUIを利用してみて ɹɹ OS間で実装を分けないといけないことがある → iOS14/15両方で動作を担保するのが大変＆めんどうベストプラクティスが少ない＆挙動が安定していない → 色々と手探りで実装していく必要がある(気合い) UIKitでできたことがすべてできるわけではない → まだUIKitに頼らざるを得ないときがある 📚 🤷 ⚠ SwiftUIの弱み

Slide 21

Slide 21 text

❷ 具体的な事例 3. SwiftUIを利用してみて 20

Slide 22

Slide 22 text

❷ 具体的な事例 21 3. SwiftUIを利用してみて ɹɹ ⭕ 構造が似ているUIの流用 ReservationTabView ScheduleTabView ReservationTileView ScheduleTileView ReservationView ScheduleView コードベースなので・流用が容易・変更コストが低い開発効率UP

Slide 23

Slide 23 text

❷ 具体的な事例 22 3. SwiftUIを利用してみて ɹɹ ⭕ List (TableView) をシンプルなコードで実現 UIKit SwiftUI サンプルコードサンプルコード SwiftUIの方がコード量が少ない開発効率UP

Slide 24

Slide 24 text

❷ 具体的な事例 23 3. SwiftUIを利用してみて ɹɹ ❌ Listのseparatorを消すサンプルコード iOS15 iOS14 iOS13 ただListのseparatorを消したいだけなのに… それぞれのOSごとに分岐させる必要がある ※iOS14に関しては　半ば無理やり消している...汗

Slide 25

Slide 25 text

❷ 具体的な事例 24 3. SwiftUIを利用してみて ɹɹ ❌ 複雑な動きをSwiftUIのみで実現しにくい UIKitの部分サンプルコード PullToRefresh →下スワイプで予約情報の更新 SwipeReader →左右スワイプでセグメント切替 ActivityIndicator →予約情報の読み込みをお知らせ

Slide 26

Slide 26 text

25 ɹɹ まとめ https://hello.hey.jp/engineer 採用情報 STORES 予約を SwiftUIでリニューアルしてみて... 当初の狙い通り開発スピードを担保できた → 約3ヶ月でリニューアル＆リリースできた！コードがシンプルになる → UIの流用や変更に強く、読みやすいためレビューしやすいかゆいところに手が届いていない → OSごとの対応やUIKitの併用がまだ必要 🚀 ☀ ☔

Slide 27

Slide 27 text

No content