【Swift】UIKitとは？アプリ開発方法とSwiftUIとの違い
この記事からわかること
- SwiftのUIKitとは？
- UIKitの特徴とメリット、使用方法
- UIKitとSwiftUIとの違い
- プロジェクトを作成する方法
- 実際にアプリを開発してみる
index
[open]
＼ アプリをリリースしました ／
iOSアプリを開発するためのプログラミング言語である「Swift」。代表的なフレームワークが「UIKit」と「SwiftUI」です。
両者の違いとプロジェクトの作成方法などを、まとめていきたいと思います。
おすすめ記事：Swiftとは？Swift UIとの違いと特徴やメリット
UIKitとは？
UIKitはAppleが提供してくれているiOSアプリケーションを構築するためのグラフィカルUIフレームワークです。フレームワークとはアプリ開発の際に土台として使用するソフトウェアで、様々な機能があらかじめ組み込まれており、少ない工数でリッチな仕組みを実現可能なアプリ開発には欠かせない存在です。
その中でもUIフレームワークはアプリ開発をする際のUI部分を手助けしてくれます。UI(ユーザーインターフェース)とは人が直接見たり触ったりする部分のことを指しています。
SwiftでのUIフレームワークは「UIKit」と「SwiftUI」の2つが主流で、 SwiftUIは2019年6月に発表されたばかりの比較的新しめのフレームワークです。
※UIKitはiOS専用のフレームワークであり、MacOSの場合は使用できません。代わりに似たような機能を提供するAppKitフレームワークが用意されています。
使用方法
Appleが提供している「統合開発環境(:IDE)Xcode」には「UIKit」と「SwiftUI」が既に組み込まれており、Xcodeをダウンロードするだけでどちらのフレームワークでもスムーズに開発を始めることができます。XcodeにはUIKitやSwiftUIだけでなく様々なフレームワークが同梱されているので開発者側がわざわざダウンロードする必要はありません。
Xcodeは「App Store」から通常のアプリと同様にダウンロードすることができるので簡単にiOSアプリの開発環境を整えることができます。基本的にはMacを使っての開発になるのでwindowsのPCを使用している方は注意してください。
フレームワークは同梱されていますが、そのままでは使用できません。使用したいファイル内で下記のようなインポート文を使って有効にしていきます。
import UIKit // UIKitを使用可能に
import SwiftUI // Swift UIを使用可能にUI意外の機能はFoundationフレームワークが担ってくれています。
UIKitの特徴
- Storyboard
- MVCアーキテクチャ
Storyboardとは？
StoryboardとはUIKitの機能ではなくXcodeに組み込まれているUI(ユーザーインターフェース)を表示させるための機能のことです。
開発中のアプリの見た目を確認したり、ドラッグ&ドロップでUIコンポーネント(ボタンなど)を配置できたり、画面遷移を青い線を繋げていくだけで実装できたりと、コードを打つことなく視覚的で直感的な開発を手助けしてくれます。
Swiftプロジェクトを作成する際にインターフェースを「Storyboard」と「SwiftUI」の2つから選択でき、「Storyboard」を選択した場合にはプロジェクトファイル内に「Main.storyboard」と「LaunchScreen.storyboard」が生成されます。UIKitで開発をしていきたい場合は「Storyboard」を選択します。
StoryboardではViewControllerという名前でアプリの画面が管理されています。複数画面のアプリを開発する際はその都度ViewControllerを増やしていくことになります。
MVCアーキテクチャ
UIKitを使ったアプリ開発にはMVCアーキテクチャに則ったアプリ構造とすることがAppleから推奨されています。
MVCアーキテクチャとはModel-View-Controllerの3つの要素でアプリを構成する考え方のことです。
MVCアーキテクチャの3つの要素
- Model(モデル)：データそのもの
- View(ビュー)：表示される画面
- Controller(コントローラ)：MとVを操作する
UIKitで生成されるファイルの役割
UIKitベースでSwiftプロジェクトを立ち上げると以下のようなファイル群が最初に生成されます。それぞれの役割を見てみます。
├── Swiftプロジェクト
│ ├── プロジェクト名
│ ├── AppDelegate.swift
│ ├── SceneDelegate.swift
│ ├── ViewController.swift
│ ├── Main.storyboard
│ ├── Assets.xcassets
│ ├── LaunchScreen.storyboard
│ └── info.plist
│ └── プロジェクト名.xcodeprojAppDelegate.swift
アプリ全体のライフサイクルを管理するクラスが実装されているファイル。デリゲートメソッドを使用してアプリの起動時や終了時に処理を行わせることができます。
SceneDelegate.swift
AppDelegate.swiftが担っていたシーンで発生するアプリのライフサイクルを管理するファイル。iOS13/Xcode11から生成されるようになりました。
ViewController.swift
画面を管理するためのViewControllerクラスが実装されているファイル。後述するStoryboardのsceneと結びつき、さまざまなビューを表示させるために使用します。
アプリ内のページの数だけViewControllerクラスを増やしていくようなイメージです。
Main.storyboard
アプリ内の画面表示を閲覧できるファイル。ファイルを開くと「Interface Builder」と呼ばれる画面設計ツールが開き、デバイスが表示されマウス操作でビューの追加や編集、sceneからsceneへの遷移も実装可能です。
Assets.xcassets
アプリ内で使用する画像やカラーなどのアセットを管理するファイル。ドラッグ&ドロップで画像を追加できたり、アプリ内で使いまわせるカスタムカラーを定義できます。
LaunchScreen.storyboard
スプラッシュ画面と呼ばれるアプリ起動時に最初に表示される画面を管理するファイル。アプリのロゴや起動時に見せたい画像などを表示させます。
info.plist
アプリ内の設定を保持するファイル。プロパティリストと呼ばれており、中身はXML形式で保存されています。
プロジェクト名.xcodeproj
作成したプロジェクトのIDEを起動するためのファイル。
UIの構築方法
UIKitフレームワークを使用したUI構築には2種類の方法があります。最終的な結果(画面にUI部品を配置する)は同じですがそこまでの導線が異なります。
- Storyboard
- コードで実装
Storyboardで開発
先に紹介したStoryboard(Interface Builder)を使ってUI部品を配置し画面を構築します。この方法はマウス操作だけで感覚的にUI部品を配置でき、誰でも簡単に開発できるのがメリットです。とはいえSwiftのコードを書かないという訳でもなく、配置したビューはコードと結び付けることができるので少し複雑な処理はSwiftファイルの編集を行う必要があります。
簡単に開発できる一方、大規模な開発にはあまり向いておらずGitによる管理がしにくかったり複雑な構造を再現するのが難しくなってきます。
コードで実装
UI部品の配置をコードで記述する方法です。単純に画面上の座標で指定したり、「Auto Layout」などの制約を使った位置指定で配置を行います。こちらもStoryboardを触らないわけではなく、Storyboard側のビューとの紐付けをする必要があるので、どちらに重きを置くかという違いになります。
また、UI部品にアニメーションをつけることができる「UIKit Dynamics」なども使用できるのでアプリ開発の幅が大きく広がります。
Swift(UIKit)を学びたての時はStoryboardによる開発を慣れてきたらコード(主にAuto Layout)を使った開発をしてみると良いかもしれません。
※Swift UIではまたさらにUI構築方法が異なります。
UIKitを使ったアプリ開発の手順
実際にUIKitフレームワークで簡素なアプリを作成する流れを見ていきます。
- Xcodeをダウンロード
- 新規プロジェクトを作成
- インターフェースをStoryboardに指定
- ファイル内で UIKitをimport
- Storyboardから感覚的に開発
主な手順は上記の通りになります。まずはXcodeをダウンロードして新規プロジェクトを作成します。 マークの「Create a new Xcode project」をクリックすると新規プロジェクトを作成することができます。
続いて作成するプロジェクトの設定を決めていきます。「使用想定の機種(Multiplatform/iOS/macOS...)」と「アプリ形態(APP/Document APP/GAME...)」を選択して「Next」をクリックします。
アプリ名や開発チームなどを設定しUIKitを使用して開発をしたいのでインターフェースは「Storyboard」としておきます。(画像が違くてごめんなさい...)「Next」を押すと「プロジェクト名」のフォルダが作成されます。
ファイルを開くと以下のような構成になっているので、その中の「プロジェクト名.xcodeproj」というファイルがXcodeの統合開発環境(IDE)を開くファイルになるのでクリックしてXcodeを起動させます。
Xcodeから「Main.storyboard」ファイルを開くと下記のような画面になります。
これでアプリ開発するための前準備が整いました。
簡素なアプリを作ってみる
今回は「テキストを切り替えるボタン」と「クリックで画面が遷移するボタン」の2種類を作ってみます。
Storyboardには既にViewControllerSceneが用意されているのでここにUIコンポーネント(ボタンやラベル)を追加していきます。追加するにはツールバーにある「＋」をクリックしてUIコンポーネントをドラッグ&ドロップするだけです。 UI部分はこのようにコードを記述しなくてもマウス操作だけで構築していくことが可能です。追加したら右側のインスペクタから文字色やサイズなどを調整していきます。
コードを記述する
続いてボタンをクリックした処理などをコードで記述していきます。プロジェクトの中の「ViewController.swift」を選択します。中にはUIViewControllerをスーパークラスとするViewControllerクラスが定義されているのでこの中に処理を記述していきます。
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
}
@IBOutletと@IBAction
まずはラベルのテキスト部分を変数として宣言します。@IBOutletは変数宣言時に付けられるAttribute(属性)でStoryboardに配置されたUIと関連付ける役割があります。IBはInterface Builderの略称です。
ラベルのテキスト部分はインスペクタから変更していないので初期値を与えてあげます。初期値はviewDidLoadメソッド内に追加します。
class ViewController: UIViewController {
@IBOutlet var textLabel: UILabel! // ラベル用の変数を定義
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
textLabel.text = "waiting..." // 初期値を格納
}
}
viewDidLoadメソッドは画面が表示された直後に読み込まれて実行されるメソッドで、UIViewControllerクラスに定義されています。それをoverride(元のメソッドを生かしつつコードを追加)する事で処理を追加していきます
続いてボタンクリック時のアクションを記述します。@IBActionをつけて関数を宣言し、中に処理を記述します。@IBActionは関数定義の前に付けられるAttribute(属性)で@IBOutletと同様の役割を持ちます。
class ViewController: UIViewController {
@IBOutlet var textLabel: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
textLabel.text = "waiting..."
}
@IBAction func helloWorld() {
textLabel.text = "Hello world!!"
}
}
UIコンポーネントとコードの関連付け
コードを書き終えたらStoryboardで設置したボタンと記述したコードをマウス操作で関連付けていきます。
Storyboardに戻ったらViewControllerにカーソルを合わせます。右のインスペクタの一番右をクリックすると先ほど定義した変数と関数が表示されています。あとはその変数名(関数名)の横にある「○」をマウスでクリックしたままUIコンポーネントまで引っ張り「Touch Up Inside」を選択すれば紐付けが完了します。
Xcode上部のツールバーからRunボタン( )をクリックするとシミュレータが起動し、開発したアプリの挙動を試すことができます。試しに「Helloボタン」を押して文字が変わることを確認してみてください。
画面遷移の実現方法
続いて「クリックで画面が遷移するボタン」を作成していきます。
まずは遷移先となるページを作成します。Storyboardでボタンなどと同じ要領で「＋」をクリックし「ViewController」を検索し追加します。追加したViewControllerもインスペクタから名称を変更できますので識別しやすいようにしておきます。
画面遷移の関連付けは「Segue(セグエ)」と呼ばれるひもで繋いでいきます。2つ並んでいる「ViewController」の上部をマウスで右クリックしたままひっぱりもう一つと結びつけます。結びつけたSegueにはインスペクタから識別子(identifier)をつけることで後程コードから参照できるようにしておきます。ついでにラベルとボタンを設置しておきました。
最初にボタンは作成していたのでアクション部分を追記していきます。画面遷移はperformSegueで実装します。引数のwithIdentifierには先ほどSegueに付与した識別子を指定します。
@IBAction func changeScene() {
performSegue(withIdentifier: "newScene", sender: nil)
}
アクションを追加したらStoryboardからのUIとの関連付けも忘れないようにしてください。これで片側の画面遷移が完成しました。続いて遷移後のページから戻るボタンを実装していきます。
新規のViewControllerファイルを作成したいので「File」>「new」>「File...」から「Cocoa Touch Class」を選択しファイルをプロジェクト内に生成します。
作成したら空のクラスが用意されているのでプロトコルはUIViewControllerに準拠させ、viewDidLoadメソッドもオーバーライドさせておきます。そして遷移処理であるchangeSceneメソッドを追加しておきます。
import UIKit
class SecondViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
@IBAction func changeScene() {
self.dismiss(animated: true,completion: nil)
// animatedはアニメーションの有無
}
}
画面を戻す処理はdismissメソッドで実装します。「解散させる」の意味通り遷移先の画面で実装すれば遷移前の画面に戻してくれます。
アクションが記述できたらUIとの関連付けをします。Storyboardから「SecondViewController」を選択しインスペクタの真ん中のアイコンからclassを先ほど作成したSecondViewController.swiftファイルに指定します。
あとはこれまで同様にボタンとメソッドを紐づければ完成です。
Swift UIとの違い
SwiftUIとUIKitはUIフレームワークということが共通点なだけで全く別のフレームワークです。SwiftUIからUIKitの部品を使うためのラッパーとしてUIViewRepresentable、UIKitからSwiftUIを使うUIHostingControllerなどが用意されていますが、基本的には別々に使用しながらの開発が主になります。
UIKitではStoryboardを使ってUI部分を表示させていましたがSwiftUIではStoryboardは使用せず、プレビューするためのコードを記述するだけで簡単に表示させることができます。
UIKit
- Storyboardを使ってプレビュー
- APIが豊富
- 歴史がある
- 複雑な機能も実装可能
Swift UI
- iOS13以降でしか使えない
- 簡単にプレビュー
- 機能的には発展途中
- 宣言的UI
SwiftUiではコードを変更するとリアルタイムでプレビューが更新されたり、リッチなUIも少ないコードで実装できるというメリットがあります。
SwiftUIを使ったアプリ開発の流れもQiitaで投稿していますので興味があればご覧ください。
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。
