1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

宣言的UI(SwiftUI)と命令的UI(UIKit)

Last updated at Posted at 2025-02-08

はじめに

最近はUIKitを用いた開発から、ようやくSwiftUIを用いた開発をしています。
頭の整理のため、そもそも宣言的UIと命令的UIってなんだっけ?という部分から落とし込んでいきます。

命令的UI(UIKit)

まず従来の命令的UIから...

  • どのようにViewが構成されているのか記述されている

ってことらしいんですが、正直これだけみたら全然わからないです。
具体例ともに見るのが一番。
ちょっと極端な例ですが、リスト表示するパターンを見てみます

import UIKit

class TableViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    
    let tableView = UITableView()
    let items = ["Apple", "Banana", "Cherry"]

    override func viewDidLoad() {
        super.viewDidLoad()

        // TableViewのセットアップ
        tableView.frame = view.bounds
        tableView.dataSource = self
        tableView.delegate = self
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
        view.addSubview(tableView) // Viewに追加
    }

    // MARK: - UITableViewDataSource
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return items.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        cell.textLabel?.text = items[indexPath.row]
        return cell
    }
}

UIKitのTableViewやCollectionViewは表示するための手続きが多く、DataSourceの登録や各アクションのDelegateが分かれており、エンジニアになった当初は苦戦した記憶があります。
ということで記述も多いですね。

どのようにViewが構成されているのか記述されている

ということだったのですが、

  • cell.textLabel?.textにはitems配列の各itemが代入され
  • tableViewを手動で宣言し
  • それをviewにaddSubviewする

以上のようにどのような流れでViewが構成されるか、そして状態が変化するか開発者が明示的に命令する。
ということかなと思います。
最終的にどんな階層構造のUIとなるのか、コードを見ただけではなかなか理解できないです。
これに加えて、描画の更新するにはreloadData()などを呼び、明示的に更新する必要があったりします。

宣言的UI(SwiftUI)

対して宣言的UIは

  • 何でViewが構成されているのか記述されている

ということらしいです。

import SwiftUI

struct ContentView: View {
    let items = ["Apple", "Banana", "Cherry"]

    var body: some View {
        List(items, id: \.self) { item in
            Text(item)
        }
    }
}

完結すぎる...

何でViewが構成されているのか記述されている

"何で"というのは、

  • items配列からなるListViewがあり
    • 配列の各itemを表示するTextViewがある

というように、何で(何のプロパティで、何のViewで)構成されているのか記述されているってことだと思います。
宣言的UIの名前の通り、UIの完成形の構造を宣言して構築しているので、構成が容易に想像できます。
また詳しくは今回割愛ですが、itemsが変更されれば、自動で再描画されるのもポイント高いです。

さいごに

はじめは宣言的命令的って言葉が何となく理解しずらく感じましたが、確かにそれぞれ宣言・命令していますね。
宣言的UIの

  • ひとめ見て構造が理解しやすい
  • 各Viewがどのデータに基づいて表示されているかわかりやすい
  • 記述量の少なさ

は本当に魅力的だなと感じました。

とはいえ、UIKitではできてSwiftUIだと実現できないような部分がまだあるのは事実です。

  • WebViewの実装
  • 複雑な描画制御
  • UIKit向けにしか提供していない外部ライブラリ

など...
今後SwiftUIがアップデートされ対応していく可能性はありますが、引き続きUIKitの知識は必要そうです。

余談

Androidの話になりますが、Droid会議2024のセッションなんかでも殆どJetpack Compose前提の話だったので、モバイル開発やフロント開発ではもう宣言的UIがスタンダードですね。

参考

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?