---
title: potatotips_画面遷移のアーキテクチャについて
tags: 
author: [Yoshitaka Tanaka](https://www.docswell.com/user/4109190)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/VJNMWP3178.jpg?width=480
description: potatotips #83 iOS/Android開発Tips共有会での登壇資料です。
published: July 25, 23
canonical: https://www.docswell.com/s/4109190/KQ8XME-2023-07-25-100851
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/VJNMWP3178.jpg)

画面遷移のアーキテクチャー検討について
potatotips #83 iOS/Android開発Tips共有会
yoshitaka


# Page. 2

![Page Image](https://bcdn.docswell.com/page/YE9NX39YE3.jpg)

yoshitaka
iOS エンジニア
・鉄道会社の社内アプリ
・CtoCのマッチングプラットフォームアプリ
・現在）コネヒト：出産育児系のQAアプリ ママリ
https://tech.connehito.com/entry/2023/07/07/192756


# Page. 3

![Page Image](https://bcdn.docswell.com/page/GE8K2M9K7D.jpg)

話すこと
• 画面遷移のアーキテクチャー
• それぞれの違い
• まとめ


# Page. 4

![Page Image](https://bcdn.docswell.com/page/LELZ23WPJR.jpg)

画面遷移のアーキテクチャー導入を検討するうえで
• MVVMの構成
• 画面遷移はViewControllerが担当
• 実装コストとメリットで導入判断したい
• SwiftUI化も見据えた形にできたら良さそう


# Page. 5

![Page Image](https://bcdn.docswell.com/page/4JMV8D92JW.jpg)

「iOSアプリ設計パターン入門」の中で
4.4 モバイルアプリにおけるアーキテクチャ - 画面遷移について
・CoordinatorパターンとMVVM-C
・RouterパターンとVIPER
などが挙げられていました
Coordinatorパターンの派生系
・FlowController パターン


# Page. 6

![Page Image](https://bcdn.docswell.com/page/PJR254G5E9.jpg)

Coordinatorパターン
・画面遷移ロジックを画面実装から引き剥がすデザインパターン
・再利用性を高め、ViewController同士が密結合することを防ぐ


# Page. 7

![Page Image](https://bcdn.docswell.com/page/PEXDK2XX7X.jpg)

Viewが画面遷移を行う場合
class FirstViewController: UIViewController {
private func buttonTapped() {
let vc = SecondViewController()
self.navigationController?.pushViewController(vc, animated: true)
}
}


# Page. 8

![Page Image](https://bcdn.docswell.com/page/3EKX5MW97D.jpg)

Coordinatorパターン
protocol Coordinator {
func start()
}
protocol FirstViewControllerDelegate: AnyObject {
func firstViewControllerDidTapButton()
}
class FirstViewController: UIViewController {
weak var delegate: FirstViewControllerDelegate?
private func buttonTapped() {
delegate?.firstViewControllerDidTapButton()
}
}


# Page. 9

![Page Image](https://bcdn.docswell.com/page/L735KY19E5.jpg)

Coordinatorパターン
class FirstViewCoordinator: Coordinator {
let navigator: UINavigationController
var firstViewController: FirstViewController?
var secondViewCoordinator: SecondViewCoordinator?
init(navigator: UINavigationController) {
self.navigator = navigator
}
func start() {
let firstViewController = FirstViewController()
firstViewController.delegate = self
self.navigator.viewControllers = [firstViewController]
self.firstViewController = firstViewController
}
}
extension FirstViewCoordinator: FirstViewControllerDelegate {
func firstViewControllerDidTapButton() {
let secondViewCoordinator = SecondViewCoordinator(navigator: self.navigator)
secondViewCoordinator.start()
self.secondViewCoordinator = secondViewCoordinator
}
}


# Page. 10

![Page Image](https://bcdn.docswell.com/page/87DD35X87G.jpg)

Coordinatorパターン
class FirstViewCoordinator: Coordinator {
let navigator: UINavigationController
var firstViewController: FirstViewController?
var secondViewCoordinator: SecondViewCoordinator?
init(navigator: UINavigationController) {
self.navigator = navigator
}
func start() {
let firstViewController = FirstViewController()
firstViewController.delegate = self
self.navigator.viewControllers = [firstViewController]
self.firstViewController = firstViewController
}
}
extension FirstViewCoordinator: FirstViewControllerDelegate {
func firstViewControllerDidTapButton() {
let secondViewCoordinator = SecondViewCoordinator(navigator: self.navigator)
secondViewCoordinator.start()
self.secondViewCoordinator = secondViewCoordinator
}
}


# Page. 11

![Page Image](https://bcdn.docswell.com/page/VJPX4GPW78.jpg)

Routerパターン
・特定の画面遷移のロジックをカプセル化し、
ViewControllerが直接画面遷移を管理する代わりにRouterオブジェクトに委任
・VIPERが有名


# Page. 12

![Page Image](https://bcdn.docswell.com/page/2EVLX629JQ.jpg)

Routerパターン
protocol FirstViewRouterProtocol: AnyObject {
func transitionToSecondView()
}
final class FirstViewRouter: FirstViewRouterProtocol {
private(set) weak var view: UIViewController!
init(view: UIViewController) {
self.view = view
}
func transitionToSecondView() {
let vc = SecondViewController()
view.navigationController?.pushViewController(vc, animated: true)
}
}
class FirstViewController: UIViewController {
private var router: FirstViewRouterProtocol!
private func buttonTapped() {
router.transitionToFirstTabSecond()
}
}


# Page. 13

![Page Image](https://bcdn.docswell.com/page/57GXVNR4EL.jpg)

まとめ
• Coordinatorパターン・Routerパターンどちらにしても各ViewControllerご
とにCoordinator・Routerを定義する必要があり導入コストは高そう
• SwiftUI化した場合には再度画面遷移のアーキテクチャーの構成は変わりそう


# Page. 14

![Page Image](https://bcdn.docswell.com/page/4EQ86QVRJP.jpg)

ご清聴ありがとうございました