Skip to content

SwiftUI

kobayashiharuto edited this page Aug 7, 2021 · 5 revisions

SwiftUI とは?

Apple が開発した、Swift で iOS アプリを作れるフレームワークの一つ。
※ フレームワーク:何かしらの目的を実現するための機能の集まり。


どんなの?

iOS アプリがめちゃ簡単に作れる。
UI の見た目、アニメーション、動作などなどを全部実現できる。
とにかく、これ使っときゃいい。


UIKit は使わないの?(知ってる人向け)

SwiftUI は UIKit に比べてめちゃくちゃ書きやすい。
まずあの Storyboard を使わなくていいのが最高。
そして宣言的 UI がすっげえ便利。

UIKit だと、まず Storyboard で UI 作って、そこに命令的に動作を指示する必要があった。
どういう意味かと言うと、例えばリストを作って欲しいときは以下のような指示を出す必要がある。
「とりあえずリストの見た目はあれ使って、配列はこれ使って、区切りはあれ入れて、テキストの中身はこれを使って、それを読み込み時に作成して...」

final class TableViewController: UIViewController {
    private let data = Array(0..<20)

    private lazy var tableView: UITableView = {
        let view = UITableView(frame: .zero, style: .plain)
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        navigationItem.title = "TableView"
        tableView.dataSource = self
        view.addSubview(tableView)

        NSLayoutConstraint.activate([
            tableView.topAnchor.constraint(equalTo: view.topAnchor),
            tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
        ])
    }
}

extension TableViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        data.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell: UITableViewCell
        if let dequeuedCell = tableView.dequeueReusableCell(withIdentifier: "TableViewCell") {
            cell = dequeuedCell
        } else {
            cell = UITableViewCell(style: .default, reuseIdentifier: "TableViewCell")
        }
        cell.textLabel?.text = String(data[indexPath.row])

        return cell
    }
}

しかし、SwiftUI は宣言的に指示すればよい。つまりやりたいことだけ書けばいい。

「リスト作ってくれ、配列はこれで頼むわ。後はいい感じに調節してくれ。」

struct TableView: View {
    @State private var data = Array(0..<20)

    var body: some View {
        List(data, id: \.self) { value in
            Text(String(value))
        }
        .navigationTitle("TableView")
        .navigationBarTitleDisplayMode(.inline)
    }
}

「あとはいい感じに調節してくれ」がめちゃくちゃ便利で、とにかくやりたいことだけ書いときゃ何とかなる。

最高。

Clone this wiki locally