Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SwiftUIに適した新アーキテクチャの導入に挑む

Ryu-nakayama
September 03, 2023

 SwiftUIに適した新アーキテクチャの導入に挑む

iOSDC2023 Day2の発表資料です

Ryu-nakayama

September 03, 2023
Tweet

More Decks by Ryu-nakayama

Other Decks in Programming

Transcript

  1. 自己紹介 2 • 名前:福井 章平 (@tinpay) ◦ 2014年に Chatwork 入社

    • 役職:プロダクト本部    モバイルアプリケーション開発部    マネージャー • 趣味 ◦ 大阪のスパイスカレー屋さん巡り ◦ ビール🍺
  2. 自己紹介 3 • 名前:中山 龍 (@ryu_develop) ◦ 2023年に Chatwork 新卒入社

    ◦ 社内最年少の21歳 • 役職:プロダクト本部    モバイルアプリケーション開発部    Blancチーム メンバー • 趣味 ◦ サッカー観戦 ◦ 昼寝
  3. 事業概要 6 *1 Chatworkセグメント以外の事業として、ESET社提供のセキュリティ対策ソフトウェア「ESET」の代理販売事業を展開。安定的な収益貢献となっている *2 Nielsen NetView 及びNielsen Mobile NetView

    Customized Report 2022年5月度調べ月次利用者(MAU:Monthly Active User)調査。 調査対象はChatwork、Microsoft Teams、Slack、LINE WORKS、Skypeを含む47サービスをChatwork株式会社にて選定 *3 2023年6月末時点 • 国内最大級のビジネスチャット「 Chatwork」を中心に、複数の周辺サービスを展開 *1 • ビジネスチャットのパイオニアであり国内利用者数 No.1*2、導入社数は 41.0万社*3を突破 • 電話やメールから効率的なチャットへ、ビジネスコミュニケーションの変化を加速させプラットフォーム化を目指す
  4. Chatworkアプリの歴史 9 ファーストリリース (Titanium) ネイティブ版リリース CoreData → Realm ReactiveCocoa →

    RxSwift Swift化 Chatwork Live リアクション モバイルマルチアカウント リンクプレビュー iOS5 iOS16 2023年 2011年 2016年 2018年 2020年 2014年 ネイティブ版 実装開始 (Objective-C / ReactiveCocoa) AST ブックマーク ダークモード対応 モバイル広告 行動分析(TreasureData) iPad 2カラム対応 メッセージ閲覧制限 Google / Apple 認証 In-App Purchase GDPR対応 RxSwift → Combine Swift Concurrency SwiftUI Swift Package Manager Carthage CocoaPods XcodeGen Mantle → Codable 9年 モバイルの技術 Chatworkの新機能 長い歴史と 共に増える 技術的負債
  5. 単一の情報源となる GlobalStateを管理する Storeの役割 33 プロパティとして保持する 取得・更新するメソッドを持つ 補足:GlobalState 画面間で共有される状態のこと • 例)

    ユーザー情報 / チャット一覧など ※ 画面内などに閉じた状態(データ)ではない • 例) 入力状態 / ボタンの無効化など SwiftUI化に重要なSingle Source of Truthを実現する
  6. Storeの依存関係 34 Store ViewState 依存 N N ViewやViewStateには依存しない ViewStateから依存される ViewStateからStoreへの一方通行の依存関係となる

    Store は GlobalState を @Published private(set) var で保持 → ViewStateからの取得・購読はできるが、変更は Store内でし かできない
  7. Viewの状態を管理する Viewのアクションをメソッドで実装する ViewStateの役割 38 StoreのデータをViewの表示に適した形に修正して、自 身のプロパティに反映する 画面内の入力状態など、画面に閉じた状態もViewState 自身で管理する 注意:ViewModelではない ViewModelと比べてより「Viewの状態管

    理」に注力した役割のため ViewState とい う命名になっている ボタンのアクションなど アクションとなるメソッドは戻り値を持たず、結果を ViewStateのプロパティに反映することでViewの更 新を行う 補足:状態の変更 ViewStateからStoreの状態を直接変更す ることはできないので、Store内のメソッ ドを呼び出すことでGlobalStateの更新を 行います
  8. ViewStateの依存関係 39 Viewから依存され、Storeに依存する Store ViewState View 依存 依存 1 1

    N N Viewのアクションに対応するメソッドは、必要に応じて Store内のメソッドを呼び出し、GlobalStateを更新する 必要に応じて依存先であるStoreの値を購読することで、 Viewに表示する値を常にStoreの状態と同期させる
  9. データの流れ 51 外部API 通信 Store ViewState View メソッド呼び出し 伝播 伝播

    ユーザーアクションが 伝わる流れ データがリアクティブに 反映される流れ 更新後データ ユーザーアクション メソッド呼び出し
  10. データフローにフォーカス 56 データフローに フォーカス データがどう流れるかの 観点を重視 データ不整合の発生防止 Viewのロジックに特化したViewState Chatworkアプリの特性あっている Single

    Source of Truthを実現し、Storeを単一の情報源として扱う Single Source of Truthを実現するためにViewModelをより最適化 コア機能は「サーバーとの通信」であり、現状アプリの反省からデータが 必ず一方通行に流れる作りとなっている
  11. まとめ 59 • 課題探しからリアーキテクチャまでの流れ ◦ まずは課題を言語化し、チーム内で共通認識をもった ◦ 技術戦略と組織戦略、両方を加味してアーキテクチャを考えた ◦ 現在はタスク分解しながら、チームで考えて実装を進めている

    • 新アーキテクチャ「SVVS」とは? ◦ Store - View - ViewState の略称 ◦ SwiftUI化に重要なSingle Source of Truthを実現 ◦ 3つの特徴 ▪ リアクティブ / シンプル / データフローにフォーカス ◦ まだ始まったばかりで、今からSVVS化をガンガン進めていきます