【Swift】UIKitとは?アプリ開発方法とSwiftUIとの違い

この記事からわかること

  • SwiftUIKitとは?
  • UIKitの特徴メリット使用方法
  • UIKitとSwiftUIとの違い
  • プロジェクト作成する方法
  • 実際アプリ開発してみる

index

[open]

\ アプリをリリースしました /

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

iOSアプリを開発するためのプログラミング言語である「Swift」。代表的なフレームワークが「UIKit」と「SwiftUI」です。

両者の違いとプロジェクトの作成方法などを、まとめていきたいと思います。

UIKitとは?

公式リファレンス: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だけでなく様々なフレームワークが同梱されているので開発者側がわざわざダウンロードする必要はありません。

App storeの中のxcode

Xcodeは「App Store」から通常のアプリと同様にダウンロードすることができるので簡単にiOSアプリの開発環境を整えることができます。基本的にはMacを使っての開発になるのでwindowsのPCを使用している方は注意してください。

フレームワークは同梱されていますが、そのままでは使用できません。使用したいファイル内で下記のようなインポート文を使って有効にしていきます。

import  UIKit  //  UIKitを使用可能に
import  SwiftUI  //   Swift UIを使用可能に

UI意外の機能はFoundationフレームワークが担ってくれています。

UIKitの特徴

Storyboardとは?

SwiftのXcodeでStoryboardを使ってアプリ開発をしている様子

StoryboardとはUIKitの機能ではなくXcodeに組み込まれているUI(ユーザーインターフェース)を表示させるための機能のことです。

開発中のアプリの見た目を確認したり、ドラッグ&ドロップでUIコンポーネント(ボタンなど)を配置できたり、画面遷移を青い線を繋げていくだけで実装できたりと、コードを打つことなく視覚的で直感的な開発を手助けしてくれます。

Swiftプロジェクトを作成する際にインターフェースを「Storyboard」と「SwiftUI」の2つから選択でき、「Storyboard」を選択した場合にはプロジェクトファイル内に「Main.storyboard」と「LaunchScreen.storyboard」が生成されます。UIKitで開発をしていきたい場合は「Storyboard」を選択します。

Xcodeの新規プロジェクト作成画面

StoryboardではViewControllerという名前でアプリの画面が管理されています。複数画面のアプリを開発する際はその都度ViewControllerを増やしていくことになります。

MVCアーキテクチャ

UIKitを使ったアプリ開発にはMVCアーキテクチャに則ったアプリ構造とすることがAppleから推奨されています。

MVCアーキテクチャとはModel-View-Controllerの3つの要素でアプリを構成する考え方のことです。

MVCアーキテクチャの3つの要素

UIKitで生成されるファイルの役割

UIKitベースでSwiftプロジェクトを立ち上げると以下のようなファイル群が最初に生成されます。それぞれの役割を見てみます。

├── Swiftプロジェクト
│   ├── プロジェクト名
│        ├──  AppDelegate.swift
│        ├──  SceneDelegate.swift
│        ├──  ViewController.swift
│        ├──  Main.storyboard
│        ├──  Assets.xcassets
│        ├──  LaunchScreen.storyboard
│        └──  info.plist
│   └── プロジェクト名.xcodeproj

AppDelegate.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(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フレームワークで簡素なアプリを作成する流れを見ていきます。

  1. Xcodeをダウンロード
  2. 新規プロジェクトを作成
  3. インターフェースをStoryboardに指定
  4. ファイル内で UIKitをimport
  5. Storyboardから感覚的に開発

主な手順は上記の通りになります。まずはXcodeをダウンロードして新規プロジェクトを作成します。 マークの「Create a new Xcode project」をクリックすると新規プロジェクトを作成することができます。

Xcodeのユーザー登録画面

続いて作成するプロジェクトの設定を決めていきます。「使用想定の機種(Multiplatform/iOS/macOS...)」と「アプリ形態(APP/Document APP/GAME...)」を選択して「Next」をクリックします。

Xcodeの新規プロジェクト作成画面

アプリ名や開発チームなどを設定しUIKitを使用して開発をしたいのでインターフェースは「Storyboard」としておきます。(画像が違くてごめんなさい...)「Next」を押すと「プロジェクト名」のフォルダが作成されます。

Xcodeの新規プロジェクト作成画面

ファイルを開くと以下のような構成になっているので、その中の「プロジェクト名.xcodeproj」というファイルがXcodeの統合開発環境(IDE)を開くファイルになるのでクリックしてXcodeを起動させます。

Xcodeの新規プロジェクト編集画面

Xcodeから「Main.storyboard」ファイルを開くと下記のような画面になります。

SwiftのXcodeでStoryboardを使ってアプリ開発をしている様子

これでアプリ開発するための前準備が整いました。

簡素なアプリを作ってみる

今回は「テキストを切り替えるボタン」と「クリックで画面が遷移するボタン」の2種類を作ってみます。

Storyboardには既にViewControllerSceneが用意されているのでここにUIコンポーネント(ボタンやラベル)を追加していきます。追加するにはツールバーにある「」をクリックしてUIコンポーネントをドラッグ&ドロップするだけです。 UI部分はこのようにコードを記述しなくてもマウス操作だけで構築していくことが可能です。追加したら右側のインスペクタから文字色やサイズなどを調整していきます。

Swift/XcodeのStoryboardyとUIKitを使ってアプリ開発をしている様子

コードを記述する

続いてボタンをクリックした処理などをコードで記述していきます。プロジェクトの中の「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」を選択すれば紐付けが完了します。

Swift/XcodeのStoryboardyとUIKitを使ってアプリ開発をしている様子

Xcode上部のツールバーからRunボタン( )をクリックするとシミュレータが起動し、開発したアプリの挙動を試すことができます。試しに「Helloボタン」を押して文字が変わることを確認してみてください。

Swift/XcodeのStoryboardyとUIKitを使ってアプリ開発をしている様子

画面遷移の実現方法

続いて「クリックで画面が遷移するボタン」を作成していきます。

まずは遷移先となるページを作成します。Storyboardでボタンなどと同じ要領で「」をクリックし「ViewController」を検索し追加します。追加したViewControllerもインスペクタから名称を変更できますので識別しやすいようにしておきます。

画面遷移の関連付けは「Segue(セグエ)」と呼ばれるひもで繋いでいきます。2つ並んでいる「ViewController」の上部をマウスで右クリックしたままひっぱりもう一つと結びつけます。結びつけたSegueにはインスペクタから識別子(identifier)をつけることで後程コードから参照できるようにしておきます。ついでにラベルとボタンを設置しておきました。

Swift/XcodeのStoryboardyとUIKitを使ってアプリ開発をしている様子

最初にボタンは作成していたのでアクション部分を追記していきます。画面遷移はperformSegueで実装します。引数のwithIdentifierには先ほどSegueに付与した識別子を指定します。


@IBAction  func changeScene() {
    performSegue(withIdentifier: "newScene", sender: nil)
}

アクションを追加したらStoryboardからのUIとの関連付けも忘れないようにしてください。これで片側の画面遷移が完成しました。続いて遷移後のページから戻るボタンを実装していきます。

新規のViewControllerファイルを作成したいので「File」>「new」>「File...」から「Cocoa Touch Class」を選択しファイルをプロジェクト内に生成します。

Swift/XcodeのStoryboardyとUIKitを使ってアプリ開発をしている様子

作成したら空のクラスが用意されているのでプロトコルは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/XcodeのStoryboardyとUIKitを使ってアプリ開発をしている様子

あとはこれまで同様にボタンとメソッドを紐づければ完成です。

Swift UIとの違い

SwiftUIとUIKitはUIフレームワークということが共通点なだけで全く別のフレームワークです。SwiftUIからUIKitの部品を使うためのラッパーとしてUIViewRepresentable、UIKitからSwiftUIを使うUIHostingControllerなどが用意されていますが、基本的には別々に使用しながらの開発が主になります。

UIKitではStoryboardを使ってUI部分を表示させていましたがSwiftUIではStoryboardは使用せず、プレビューするためのコードを記述するだけで簡単に表示させることができます。

UIKit

Swift UI

SwiftUiではコードを変更するとリアルタイムでプレビューが更新されたり、リッチなUIも少ないコードで実装できるというメリットがあります。

SwiftUIを使ったアプリ開発の流れもQiitaで投稿していますので興味があればご覧ください。

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index