Help us understand the problem. What is going on with this article?

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 登場以前

さて、ここが一番難しかったのですが、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 と言います。

参考

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 を構築する方がメンテナンス性・再利用性が高まるのです。

参考

まとめ

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

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

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


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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away