Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
iOSなアーキテクチャVIPERのススメ
Search
hirothings
February 22, 2018
Programming
5
3.3k
iOSなアーキテクチャVIPERのススメ
potatotips #48 (iOS/Android開発Tips共有会)
にて発表したスライドです
hirothings
February 22, 2018
Tweet
Share
More Decks by hirothings
See All by hirothings
VIPER with アーキテクチャ選定 実践入門 / VIPER Architecture
hirothings
4
980
実践Dark Mode対応 / Implementing Dark Mode
hirothings
4
190
iOS標準UIワークショップ / iOS Default UI Workshop
hirothings
3
10k
Modernizing Your UI for iOS 13
hirothings
1
1.1k
WWDC2019 pre party LT
hirothings
0
2.4k
Swiftへの愛2018
hirothings
1
3k
Swift2年生
hirothings
4
34k
Swiftへの愛
hirothings
0
35k
Other Decks in Programming
See All in Programming
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
2
250
技術同人誌をMCP Serverにしてみた
74th
1
530
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
0
590
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
260
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
660
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
530
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
0
450
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
140
PicoRuby on Rails
makicamel
2
120
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.2k
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
1k
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
How STYLIGHT went responsive
nonsquared
100
5.6k
Fireside Chat
paigeccino
37
3.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Adopting Sorbet at Scale
ufuk
77
9.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Faster Mobile Websites
deanohume
307
31k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Transcript
iOS なアー キテクチャVIPER のススメ @hirothings
5 分で話すこと 1. なぜプロダクト開発にVIPER を採用したか 2. VIPER とは 3. どうチー
ムに共有したか 4. テストについて
自己紹介 @hirothings 新卒でラー メン屋勤務 半年で麺場を任される 1 年でラー メン屋店長 色々 あって現在iOS
エンジニア Money Forward, Inc. 所属
MVC、MVVM アー キテクチャでアプリを作っ て感じた課題 工夫しないと ルー ティングがない デー タの取得・ 加工だけをする層がない
結果、View のロジックとデー タに関するロジックが混在する 依存性をひとまとめに解決する層がない よって実装が属人化する
新規でプロジェクトを始めるにあたって 先の課題は仕組みで解決したい 初期リリー スに間に合わせるにはそこまで時間がない 前提: デー タバインディングを多用するほどのインタラクティブな アプリではない( プロパティ監視などの実装で担保できると判断)
もう少しかっちりしたアー キテクチャが欲しい スピー ドも担保したい
VIPER 出典: https://cheesecakelabs.com/blog/ios‑project‑architecture‑using‑ viper/
VIPER とは 単一責任の原則をもとに作られたアー キテクチャ 各レイヤー はInterface(Protocol) にのみ依存している iOS の現場で生まれたアー キテクチャ
"VIPER is an application of Clean Architecture to iOS apps." 出典: https://www.objc.io/issues/13‑architecture/viper/
VIPER のレイヤー View Interactor Presenter Entity Router 各レイヤー の頭文字の組み合わせで VIPER
各レイヤー の説明 Entity バリュー オブジェクト
各レイヤー の説明 Interactor Presenter のイベントに応じてユー スケー スごとにデー タの取得、 加 工をする層
バリュー オブジェクト(Entity) を操作するビジネスロジックが含まれ る View からは完全に分離している
各レイヤー の説明 Presenter View に対するビジネスロジックを持つ層 View とRouter, Interactor の橋渡し的存在 View
から受け取ったイベントをもとにInteractor にデー タを要求す る View から受け取ったイベントをもとにRouter に画面遷移を依頼する Interactor から受け取ったデー タをView に渡す
各レイヤー の説明 View Presenter の言われたとおりに画面にデー タを表示する Presenter にユー ザー のイベントを通知する
各レイヤー の説明 Router 画面遷移を管理する 各レイヤー のインスタンスを生成し、 画面を描画する( 依存性をひと まとめに解決する層はここ)
※ 各レイヤー はInterface で繋がっていて、 別のレイヤー の具体的な 実装は知らない
今までの設計に抱いた課題 VIPER を採用すると ルー ティングがない Router が担保してくれる View のロジックとデー タに
関するロジックが混在 Presenter, Interactor で明確に分離され ている 依存性をひとまとめに解決 する層がない Router がインスタンスを生成し依存性 をまとめる役割を担っている 属人化する レイヤー が明確なため属人化しづらい
求めていたものが揃っている感☺ iOS の現場で生まれたアー キテクチャだからか あ、 なんかしっくりくると思った
チー ムに共有したい..
サンプルアプリを作った よさそう → 自信を持って勧められる状態にするため シンプルなアプリで実装の流れをチー ムに知ってもらう
TL が見られる簡単なTwitter クライアント
実装内容 ログイン状態に応じたルー ティング 追加ロー ディング エラー 処理 単体テスト コー ドジェネレー
タ 結果: 自信を持って勧めたいと思った。 チー ムでも好評だった
各レイヤー はInterface で繋がっていて、 実態が何をやっているかは知らない = テストが簡単
テスト Stub とSpy を使ったユニットテストを採用 入力 ( デー タ取得) Protocol を使ってスタブに差し替える
出力 (View) Protocol を使ってスパイに差し替える メリット テストしたいこと以外のレイヤー をダミー にすることでテスト したいレイヤー 以外の実装に振り回されずに済む 参考: Speaker Deck: 単体テストのハジメ @yokoyas000
例) タイムライン表示のPresenter のテスト
手順1. モックを作る テストケー スごとのダミー デー タを用意する
手順2. モックを入力するスタブを作る Interactor の代わりに、 指定されたモックを返すだけのスタブを作成
手順3. 結果を出力するスパイを作る View の代わりに、 Presenter の結果を出力するだけのスパイを作成
手順4. Presenter のテストを書く
VIPER x UnitTest 各レイヤー がInterface だけで繋がっているため簡単にダミー に差し 替えられた Presenter 以外のレイヤー
の実装に悩まされず済んだ (View 層のUIKit のライフサイクルなど) 単一責任なためレイヤー ごとのテストもしやすい
レイヤー が多い= ボイラー プレー トが多い問題 Kuri などのコー ドジェネレー タを使って解決 https://github.com/bannzai/Kuri
テンプレを用意したら画面ごとに必要なファイルを吐き出してくれ る
VIPER で実装してみた感想 どのレイヤー が何をすべきか理解しやすい 欲しいレイヤー が揃っていてiOS 開発してて、 しっくりくる Interface で各レイヤー
が依存しているため簡単にモックに差し替え られる UI ロジックとビジネスロジックが分離しているのでテストがし やすい
まとめ 前提: 現場によって必要なアー キテクチャは違う ただiOS やってる人には誰にもわかりやすく 取り入れやすいアー キテクチャだと思った
サンプルアプリを公開しました https://github.com/hirothings/VIPERTwitterClient
参考記事 iOS Project Architecture: Using VIPER Architecting iOS Apps with
VIPER
ご静聴ありがとうございました