iOSなアーキテクチャVIPERのススメ

potatotips #48 (iOS/Android開発Tips共有会)
にて発表したスライドです

Transcript

1. iOS
   なアー
   キテクチャVIPER
   のススメ
   @hirothings
   

   View Slide

2. 5
   分で話すこと
   1.
   なぜプロダクト開発にVIPER
   を採用したか
   2. VIPER
   とは
   3.
   どうチー
   ムに共有したか
   4.
   テストについて
   

   View Slide

3. 自己紹介
   @hirothings
   新卒でラー
   メン屋勤務
   半年で麺場を任される
   1
   年でラー
   メン屋店長
   色々
   あって現在iOS
   エンジニア
   Money Forward, Inc.
   所属
   

   View Slide

4. MVC、MVVM
   アー
   キテクチャでアプリを作っ
   て感じた課題
   工夫しないと
   ルー
   ティングがない
   デー
   タの取得・
   加工だけをする層がない
   結果、View
   のロジックとデー
   タに関するロジックが混在する
   依存性をひとまとめに解決する層がない
   よって実装が属人化する
   

   View Slide

5. 新規でプロジェクトを始めるにあたって
   先の課題は仕組みで解決したい
   初期リリー
   スに間に合わせるにはそこまで時間がない
   前提：
   デー
   タバインディングを多用するほどのインタラクティブな
   アプリではない（
   プロパティ監視などの実装で担保できると判断）
   

   View Slide

6. もう少しかっちりしたアー
   キテクチャが欲しい
   スピー
   ドも担保したい
   

   View Slide

7. VIPER
   出典: https://cheesecakelabs.com/blog/ios‑project‑architecture‑using‑
   viper/
   

   View Slide

8. VIPER
   とは
   単一責任の原則をもとに作られたアー
   キテクチャ
   各レイヤー
   はInterface(Protocol)
   にのみ依存している
   iOS
   の現場で生まれたアー
   キテクチャ
   "VIPER is an application of Clean Architecture to iOS apps."
   出典: https://www.objc.io/issues/13‑architecture/viper/
   

   View Slide

9. VIPER
   のレイヤー
   View
   Interactor
   Presenter
   Entity
   Router
   各レイヤー
   の頭文字の組み合わせで VIPER
   

   View Slide

10. 各レイヤー
    の説明
    Entity
    バリュー
    オブジェクト
    

    View Slide

11. 各レイヤー
    の説明
    Interactor
    Presenter
    のイベントに応じてユー
    スケー
    スごとにデー
    タの取得、
    加
    工をする層
    バリュー
    オブジェクト(Entity)
    を操作するビジネスロジックが含まれ
    る
    View
    からは完全に分離している
    

    View Slide

12. 各レイヤー
    の説明
    Presenter
    View
    に対するビジネスロジックを持つ層
    View
    とRouter, Interactor
    の橋渡し的存在
    View
    から受け取ったイベントをもとにInteractor
    にデー
    タを要求す
    る
    View
    から受け取ったイベントをもとにRouter
    に画面遷移を依頼する
    Interactor
    から受け取ったデー
    タをView
    に渡す
    

    View Slide

13. 各レイヤー
    の説明
    View
    Presenter
    の言われたとおりに画面にデー
    タを表示する
    Presenter
    にユー
    ザー
    のイベントを通知する
    

    View Slide

14. 各レイヤー
    の説明
    Router
    画面遷移を管理する
    各レイヤー
    のインスタンスを生成し、
    画面を描画する(
    依存性をひと
    まとめに解決する層はここ)
    

    View Slide

15. ※
    各レイヤー
    はInterface
    で繋がっていて、
    別のレイヤー
    の具体的な
    実装は知らない
    

    View Slide

16. 今までの設計に抱いた課題 VIPER
    を採用すると
    ルー
    ティングがない Router
    が担保してくれる
    View
    のロジックとデー
    タに
    関するロジックが混在 Presenter, Interactor
    で明確に分離され
    ている
    依存性をひとまとめに解決
    する層がない Router
    がインスタンスを生成し依存性
    をまとめる役割を担っている
    属人化する レイヤー
    が明確なため属人化しづらい
    

    View Slide

17. 求めていたものが揃っている感☺
    iOS
    の現場で生まれたアー
    キテクチャだからか
    あ、
    なんかしっくりくると思った
    

    View Slide

18. チー
    ムに共有したい..
    

    View Slide

19. サンプルアプリを作った
    よさそう →
    自信を持って勧められる状態にするため
    シンプルなアプリで実装の流れをチー
    ムに知ってもらう
    

    View Slide

20. TL
    が見られる簡単なTwitter
    クライアント
    

    View Slide

21. 実装内容
    ログイン状態に応じたルー
    ティング
    追加ロー
    ディング
    エラー
    処理
    単体テスト
    コー
    ドジェネレー
    タ
    結果:
    自信を持って勧めたいと思った。
    チー
    ムでも好評だった
    

    View Slide

22. 各レイヤー
    はInterface
    で繋がっていて、
    実態が何をやっているかは知らない
    =
    テストが簡単
    

    View Slide

23. テスト
    Stub
    とSpy
    を使ったユニットテストを採用
    入力 (
    デー
    タ取得)
    Protocol
    を使ってスタブに差し替える
    出力 (View)
    Protocol
    を使ってスパイに差し替える
    メリット
    テストしたいこと以外のレイヤー
    をダミー
    にすることでテスト
    したいレイヤー
    以外の実装に振り回されずに済む
    参考：
    Speaker Deck:
    単体テストのハジメ @yokoyas000
    

    View Slide

24. 例)
    タイムライン表示のPresenter
    のテスト
    

    View Slide

25. 手順1.
    モックを作る
    テストケー
    スごとのダミー
    デー
    タを用意する
    

    View Slide

26. 手順2.
    モックを入力するスタブを作る
    Interactor
    の代わりに、
    指定されたモックを返すだけのスタブを作成
    

    View Slide

27. 手順3.
    結果を出力するスパイを作る
    View
    の代わりに、
    Presenter
    の結果を出力するだけのスパイを作成
    

    View Slide

28. 手順4. Presenter
    のテストを書く
    

    View Slide

29. VIPER x UnitTest
    各レイヤー
    がInterface
    だけで繋がっているため簡単にダミー
    に差し
    替えられた
    Presenter
    以外のレイヤー
    の実装に悩まされず済んだ
    (View
    層のUIKit
    のライフサイクルなど)
    単一責任なためレイヤー
    ごとのテストもしやすい
    

    View Slide

30. レイヤー
    が多い=
    ボイラー
    プレー
    トが多い問題
    Kuri
    などのコー
    ドジェネレー
    タを使って解決
    https://github.com/bannzai/Kuri
    テンプレを用意したら画面ごとに必要なファイルを吐き出してくれ
    る
    

    View Slide

31. VIPER
    で実装してみた感想
    どのレイヤー
    が何をすべきか理解しやすい
    欲しいレイヤー
    が揃っていてiOS
    開発してて、
    しっくりくる
    Interface
    で各レイヤー
    が依存しているため簡単にモックに差し替え
    られる
    UI
    ロジックとビジネスロジックが分離しているのでテストがし
    やすい
    

    View Slide

32. まとめ
    前提：
    現場によって必要なアー
    キテクチャは違う
    ただiOS
    やってる人には誰にもわかりやすく
    取り入れやすいアー
    キテクチャだと思った
    

    View Slide

33. サンプルアプリを公開しました
    https://github.com/hirothings/VIPERTwitterClient
    

    View Slide

34. 参考記事
    iOS Project Architecture: Using VIPER
    Architecting iOS Apps with VIPER
    

    View Slide

35. ご静聴ありがとうございました
    

    View Slide