Eight iOSを支えるアーキテクチャVol.2 / architecture to support Eight iOS 2

■イベント
Sansan Builders Box 2019
https://jp.corp-sansan.com/sbb2019/

■登壇概要
タイトル：Eight iOSを支えるアーキテクチャVol.2

登壇者：
Eight事業部 池端貴恵

▼Sansan Builders Box
https://buildersbox.corp-sansan.com/

Transcript

1. Eight iOSを⽀える アーキテクチャ Vol.2 KIE IKEBATA
2. 池端 貴恵（Kie Ikebata） 沖縄に⽣まれる。 ⾼校までを沖縄で過ごし、⼤学は中国・上海の⼤学へ進学。 卒業後、⼀年間上海で働いた後に帰国。 なんとなく⼤阪で就職活動、家具メーカーの海外バイヤーになる。 数年働いた後、キャリアチェンジすることを決意。 プログラミングを独学で始め、 キャリアスクールやインターンを経てiOSエンジニアとなる。 2018年4⽉にSansan株式会社⼊社。現在は関⻄⽀社にて勤務。 Eight事業部 iOSエンジニア
3. Sansan Builders Box Vol.1について https://speakerdeck.com/sansanbuildersbox/architecture-to-support-eight-ios Eight iOSを⽀えるアーキテクチャ Architecture to support Eight iOS
4. Sansan Builders Box - Eightについて - Eight iOSを⽀えるアーキテクチャ > アーキテクチャとは > アーキテクチャのいいところ > Eightのアーキテクチャ Agenda
5. Sansan Builders Box Eightとは " 
    '  & ! #  $ %    
   
6. アーキテクチャとは
7. Sansan Builders Box アーキテクチャとは! アーキテクチャ【architecture】 1. 建築学。また、建築様式。 2. 構造。構成。組織。 3. コンピューターの特性を決定するデータの形式やハードウエア の機能分担などを含めた、コンピューターシステムの基本構造。 引⽤: goo辞書 アーキテクチャ = アプリケーション全体の構造
8. アーキテクチャのいいところ
9. Sansan Builders Box どちらの棚が使いやすそうですか？
10. Sansan Builders Box 最近のアプリは⾊々な事ができる 連絡先⼀覧 名刺撮影 フィード プレミアム機能
11. Sansan Builders Box API通信 画像処理 矩形認識 データ保存 アニメーション ⼀つの機能に関しても…
12. Sansan Builders Box API通信 画像処理 矩形認識 データ保存 アニメーション 実現するために必要なこと 複雑、そして、やること沢⼭
13. Sansan Builders Box ⼀貫性のあるコードベースに アーキテクチャでアプリケーション全体に秩序を
14. Sansan Builders Box どちらの資料が理解しやすそうですか？
15. Sansan Builders Box 課題を分割せよ 「複雑なアプリを動かす」ための課題を、アーキテクチャで解決する
16. Sansan Builders Box 共通理解 アーキテクチャは、チーム開発において、⼀つの指針となる
17. Sansan Builders Box 共通理解 レビューによってカオス化を防ぐ
18. Sansan Builders Box 共通理解 Eight iOSアプリ アーキテクチャの指針
19. Sansan Builders Box 「アーキテクチャのいいところ」まとめ ・アプリケーション全体に秩序をもたらす。 ・ 「複雑なアプリを動かす」ための課題の解決策となる。 ・チームでの開発を可能とする。 より早く、安定した価値のあるものを提供することに繋がる
20. Eightのアーキテクチャ
21. Sansan Builders Box Eightで採⽤しているアーキテクチャ MVVM ( Model View ViewModel ) 採⽤している理由 ・ViewControllerが肥⼤化してしまう課題への解決策 ・RxSwiftのbinding機構を最⼤限に⽣かす
22. Sansan Builders Box MVVMの構造 ( Apple が提供する UIKit には UIViewController という View を管理するクラスが あり、画⾯のライフサイクルと画⾯遷移を担う ) UI Events Data Binding Requests View (ViewController) ViewModel Model Data
23. Sansan Builders Box Model UI Events Data Binding Requests View (ViewController) ViewModel Model Data Entity Request UseCase Repository
24. Sansan Builders Box 全体 UI Events Data Binding Requests Data Request Knows about Knows about Data, Result CRUD View (ViewController) ViewModel UseCase Request Entity Repository Response Model
25. 処理の流れと各層の役割
26. Sansan Builders Box 要件 1. カメラで名刺を撮影する 2. その結果をOCR（API）かける 3. OCRの結果が返ってきたら画⾯に遷移する
27. Sansan Builders Box 処理の流れ UI Events Data Binding Requests View (ViewController) ViewModel Model Data シャッターボタンが 押されました 画像をOCRに かけてください
28. Sansan Builders Box View UI Events Data Binding Requests View (ViewController) ViewModel Model Data シャッターボタンが 押されました 画像をOCRに かけてください
29. Sansan Builders Box View すべきでないこと ・プレゼンテーションのロジックをかく すべきこと ・UIの操作 例：ボタンの⾊を設定する ・ユーザーからのアクションの受付 ・画⾯遷移
30. Sansan Builders Box ViewModel UI Events Data Binding Requests View (ViewController) ViewModel Model Data シャッターボタンが 押されました 画像をOCRに かけてください
31. Sansan Builders Box ViewModel すべきこと ・プレゼンテーションのロジックをかく - ユーザーアクションを監視し、Modelに必要な処理を依頼する - Modelから取得した情報を元にViewがするべきことを通知する すべきでないこと ・UIの操作 ・API通信やDBの操作
32. Sansan Builders Box Model UI Events Data Binding Requests View (ViewController) ViewModel Model Data シャッターボタンが 押されました 画像をOCRに かけてください
33. Sansan Builders Box Model すべきこと ・UIに関係しない処理 ・ビジネスロジックをかく すべきでないこと ・ UIの定義や、UIのロジック
34. Sansan Builders Box Entity (Model) UI Events Data Binding Requests Data Request Knows about Knows about Data, Result CRUD ViewModel UseCase Request Entity Repository Response View (ViewController) Model
35. Sansan Builders Box Entity (Model) struct OCRResult { var name: String var companyName: String var title: String? var department: String? }
36. Sansan Builders Box Request (Model) UI Events Data Binding Requests Data Request Knows about Knows about Data, Result CRUD Response ViewModel UseCase Request Entity Repository View (ViewController) Model
37. Sansan Builders Box Request (Model) 通信処理が書かれたクラス リクエスト情報 リクエスト情報 リクエスト情報
38. Sansan Builders Box Request (Model) struct PostOCRResultRequest: RequestType { typealias Response = OCRResult let image: UIImage var method: HTTPMethod { return .PUT } var parameters: [String: AnyObject]? { return ["image": image as AnyObject] } var path: String { return // Path } func responseFromObject(_ object: OCRResult) -> OCRResult? { return OCRResult(from: object) } }
39. Sansan Builders Box Repository (Model) UI Events Data Binding Requests Data Request Knows about Knows about Data, Result CRUD ViewModel UseCase Request Entity Repository Response View (ViewController) Model
40. Sansan Builders Box Repository (Model) func load() -> OCRResult? func find(ID: Int) func update(result: OCRResult) func delete(ID: Int) 読み込み、検索、削除、更新等、データベースの操作を⾏う
41. Sansan Builders Box UseCase (Model) UI Events Data Binding Requests Data Request Knows about Knows about Data, Result CRUD ViewModel UseCase Request Entity Repository Response View (ViewController) Model
42. Sansan Builders Box UseCase (Model) Entity, Repository, Request を利⽤(依存)して、 必要とされる⼿続きを実⾏する。 private let repository: OCRResultRepository func check(of image: UIImage) -> Completable { let request = PostOCRResultRequest(image: image) return client .rx_request(request) .flatMapCompletable({ [unowned self] result in return self.repository.save(result: result) }) }
43. Sansan Builders Box 要件 1. カメラで名刺を撮影する 2. その結果をOCR（API）かける 3. OCRの結果が返ってきたら画⾯に遷移する
44. Sansan Builders Box 処理の流れ UI Events Data Binding Requests View (ViewController) ViewModel Model Data OCRの結果を表⽰する画⾯ に遷移してください OCRの結果取得に 成功しました✌
45. Sansan Builders Box 処理の流れ UI Events Data Binding Requests View (ViewController) ViewModel Model Data エラーダイアログを 出してください OCRの結果取得に 失敗しました
46. Sansan Builders Box ViewModel すべきこと ・プレゼンテーションのロジックをかく - ユーザーアクションを監視し、Modelに必要な処理を依頼する - Modelから取得した情報を元にViewがするべきことを通知する すべきでないこと ・UIの操作 ・API通信やDBの操作
47. Sansan Builders Box View すべきでないこと ・プレゼンテーションのロジックをかく すべきこと ・UIの操作 例：ボタンの⾊を設定する ・ユーザーからのアクションの受付 ・画⾯遷移
48. Sansan Builders Box 完成 1. カメラで名刺を撮影する 2. その結果をOCR（API）かける 3. OCRの結果が返ってきたら画⾯に遷移する 完成
49. Sansan Builders Box まとめ
50. Sansan Builders Box まとめ アーキテクチャはアプリケーション全体の構造。 どんなものでも構造がしっかりしていれば、簡単に倒れることはない。 しっかりとした構造の基で、プロダクトを成⻑させる
51. Thank you for listening✨ ★