iOS アプリの View 実装方法の関係 (SwiftUI、Storyboard、Xib、UIKit)

Swift で iOS アプリを開発するにあたり View の実装方法を調べていたところ、Storyboard、Xib、UIKit といった用語の関係が全然分からず非常に苦労しました。

これらの全体的な関係が (自分にとって) 分かりやすくまとまっている記事などが全く見つからなかったので、現時点での自分の理解をまとめます。

※ iOS 開発初心者のため、間違いあればご指摘ください

# 結論 (ざっくりした分類)

SwiftUI、Storyboard、Xib、UIKit をざっくり分類すると以下の通りです。

| 分類 | 要素名 | GUI or コード | コンポーネント化 | 概要 |
| --- | --- | --- | --- | --- |
| SwfitUI | SwiftUI | コード | ◯ | iOS 13 以上で使える新しい実装方法 |
| SwfitUI 登場以前 | Storyboard | GUI | × | GUI でアプリの View 全体を管理 |
|  | Xib | GUI | ◯ | GUI で View のコンポーネントを作成 |
|  | UIKit | コード | ◯ | Swift のコードで View 周辺を扱うフレームワーク |

以下でそれぞれ説明していきます。

# SwiftUI vs SwiftUI 登場以前

まず**大きな分類として、Swift UI と Swift UI 登場以前の 2 種類**の実装方法があります。

Xcode の最近のバージョンで新規プロジェクトを作成しようとすると、User Interface の選択肢に SwiftUI と Storyboard が並んでいます。
この選択肢は、SwiftUI を使うか、それ以前の実装方法を使うかを選ぶのとかなり近いです。

## SwiftUI

2019 年に登場した、iOS 13 以降でのみ利用可能な新しい UI 実装方法です。
コードで UI を実装することになります。
ざっくり言うと、Flutter での UI 実装と似ていると言われています。

現時点では細かい UI の再現は苦手な場合もあるようです。

なお、SwiftUI と SwiftUI 登場以前の実装方法 (UIKit) は共存可能とのことです。

参考

* [SwiftUIの考察](https://qiita.com/tamadeveloper/items/3ea2696333725735fee8)
* [SwiftUIアプリ開発実践ポイント](https://qiita.com/tattn/items/920f17868ee3f97ea17d)

## SwiftUI 登場以前

さて、ここが一番難しかったのですが、SwiftUI 登場以前の UI の実装方法には以下の 3 つがあります。

* Stobyboard (GUI)
* Xib (GUI)
* UIKit (コード)

これらからどれか 1 つを選んで実装するのかと思いきや、そうではありません。
**UIKit 単独で View を実装することも可能ですが、Storyboard や Xib と組み合わせて実装することも多い**ようです。

以下、これら 3 つを簡単に説明していきます。

### Storyboard

GUI でアプリの各ページの View や画面遷移 (Segue) を実装するものです。
Storyboard だけで View を全て実装することができます。
**View のコンポーネント化は苦手で、View 全体の管理に適している**ようです。
View とプログラム (UIViewController) の紐付けは GUI の操作で実施します。

### Xib

**GUI で各ページの View やコンポーネントを作る方法**です。
Storyboard が苦手とする、View の再利用に適しています。
**Xib で作成した View のコンポーネントは Storyboard やコードから利用可能**です。

ちなみに、Storyboard や Xib を編集するための Xcode のエディタを Interface Builder と言います。

参考

* [StoryboardのBestPracticeについて考える(2) 〜ビューの再利用〜](https://qiita.com/UJIPOID/items/d9d0ebf5f34d73fb15d1)
* [iOS 開発で storyboard と xib をうまく使い分けるプラクティス](https://techlife.cookpad.com/entry/2015/06/24/190546)
* [Storyboard よりも Xib を使いたい理由](https://culumn.hatenablog.com/entry/2018/12/07/230000)
* [xibファイルでビューを作成して、ストーリーボードやコードから利用する方法(Swift3編)](https://dev.classmethod.jp/smartphone/xib/)

### UIKit

**UIKit 自体は、SwiftUI 登場以前の iOS アプリの View 開発全般を担うフレームワーク**です。
UIKit は View の構築だけでなく、View とプログラムの紐付け (UIViewController) なども含んでいます。
なので、**Storyboard や Xib で View を構築する場合であっても、プログラムとの紐付けのために UIKit を使う**ことになります。

**Storyboard や Xib でできることは UIKit で何でもできます。**
**「UIKit で View を構築するのは大変なので、Storyboard や Xib で代替する」**というイメージです。

UIKit だけで View を構築することを推奨している例もあります。
当然ではありますが、GUI (Storyboard や Xib) で View を構築する方が学習コストや初期実装コストが低いのに対し、UIKit のみで View を構築する方がメンテナンス性・再利用性が高まるのです。

参考

* [Interface Builderに依存しないiOS開発のススメ](https://medium.com/eureka-engineering/interface-builder%E3%81%AB%E4%BE%9D%E5%AD%98%E3%81%97%E3%81%AA%E3%81%84ios%E9%96%8B%E7%99%BA%E3%81%AE%E3%82%B9%E3%82%B9%E3%83%A1-13811b9236d5)
* [Storyboard派がコードでUIを実装するためのチュートリアル](https://qiita.com/gaku2n/items/fa095276ab2d75cc8797)
* [StoryboardやXibは使わない方が良いかも？](https://www.rk-k.com/archives/2962)
* [iOSとコードベースレイアウト](https://qiita.com/shtnkgm/items/e2f393fd97e34bc90dc6)

# まとめ

以上から、iOS の UI 実装には主に以下のパターンがあると言えます。[^1]

[^1]: SwiftUI とそれ以外を組み合わせるパターンは調査不足のため除外しました。

* SwiftUI のみで実装する
* UIKit のみで実装する
* Storyboard + UIKit で実装する
* Xib + UIKit で実装する
* Storyboard + Xib + UIKit で実装する

どれを採用するか、各実装方法をどう使い分けるかは、アプリの特性や開発者の習熟度次第と思われます。