I'm recommending to create UIViewController using XIB. IBDesignable & IBInspectable are very powerful tools to develop UI components in interface builder.

1. UIViewController in XIB + IBDesignable
@akifumi
1

2. 自己紹介
● 名前
○ 深谷 哲史（ふかや あきふみ）
● 会社
○ 株式会社メルペイ（2018/06 ~ ）
● 職種
○ ソフトウェアエンジニア（ iOS）
● アカウント
○ Twitter: @akifumifukaya
○ Facebook: Akifumi Fukaya
○ Github: akifumi
2

3. こんな画面を作ってみる
● プロフィール画面
● User オブジェクトを受け取って表示する
● 表示内容
○ ユーザー名
○ アカウントID
○ プロフィール画像
○ 説明文
● Github
○ https://github.com/akifumi/uiviewcontroller-in-xib
3

4. UIViewControllerのインターフェースは何を
使用して作っていますか？
4

5. UIViewController in Storyboard
5

6. ProfileViewController.swift
final class ProfileViewController: UIViewController {
var user: User!
…
override func viewDidLoad() {
super.viewDidLoad()
…
}
}
👈 イニシャライザを定義できないため、
必須パラメータをIUOにしなければならない。
6

7. How to use ProfileViewController
let user = User(
id: "@akifumifukaya",
name: "akifumi",
profileImageUrl: "https://xxx.jpg",
description: "xxx"
)
let bundle = Bundle(for: ProfileViewController.self)
let storyboard = UIStoryboard(name: "Profile", bundle: bundle)
guard let profileViewController = storyboard.instantiateInitialViewController() as? ProfileViewController else { return }
vc.user = user
let navigationController = UINavigationController(rootViewController: profileViewController)
UIApplication.shared.open(navigationController)
👈 外部から値を代入
7

8. Storyboardの問題点
● イニシャライザを定義できない
● 必要な値を、定数(let)として定義することができない
● そのため、Implicit Unwrap Optionalを使うか、Nullableを使って定義しなければな
らない
○ IUOの場合、実際に値にアクセスする前に、値を代入しておかなければならない
○ Nullableの場合、nilのハンドリングを記載しなければならない
8

9. 9

10. UIViewController in XIB
10

11. ProfileViewController.swift
final class ProfileViewController: UIViewController {
private let user: User
…
init(user: User) {
self.user = user
super.init(nibName: nil, bundle: Bundle(for: type(of: self)))
}
@available(*, unavailable)
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
…
}
👈 定数(let)として定義することができる
👈 イニシャライザを定義することができる
11

12. How to call ProfileViewController
let user = User(
id: "@akifumifukaya",
name: "akifumi",
profileImageUrl: "https://xxx.jpg",
description: "xxx"
)
let profileViewController = ProfileViewController(user: user)
let navigationController = UINavigationController(rootViewController: profileViewController)
UIApplication.shared.open(navigationController)
👈 インスタンス生成時に必須パラメーターを指定
12

13. XIBの利点
● イニシャライザーを作成することができる
● 初期化時に必要な値を渡すことができるため、必須な値を定数として定義すること
ができる
● そのため、Implicit Unwrap Optionalを使わないで済む
13

14. 14

15. + IBDesignable
15

16. AccountView
16

17. AccountDescriptionView
17

18. Introduce IBDesignable & IBInspectable
18

19. Introduce IBDesignable & IBInspectable
19

20. Introduce IBDesignable & IBInspectable
● IBDesignable
○ InterfaceBuilder上で、カスタムビューを表示できる
○ Viewのコンポーネントを細かい単位で分離することができる
○ 細かく分割することで再利用が可能
○ クラスごとのコード量を減らすことができ、コードがスッキリする
○ ビュー階層を減らせることができるので、 xibの管理が容易になる
● IBInspectable
○ InterfaceBuilder上で、カスタムビューの変数に値を代入できる
○ UI要素に動的に値を入れることができ、 UIの状態を見ることができる
○ Viewコンポーネントを使用する側で、値を変更できる
20

21. 21

22. Conclusion
● UIViewControllerの作成にXIBを使うことで、Storyboardを使うよりスッキリした
コードを書くことができる
● XIB & IBDesignable を活用することで、ビューコンポーネントを細かく分割できる
● 細かく分割することで、リーダブルなコードになり管理しやすくなる
● IBInspectable を活用することで、IB上で動的に値を代入して確認ができる
● わからないことや気になる点などありましたら、 akifumi/uiviewcontroller-in-xib を
見ながら話しましょう！
22

23. Thank you for your attention.
23