ユニファ開発者ブログ

ユニファ株式会社プロダクトデベロップメント本部メンバーによるブログです。

SwiftUIを使ってみた

こんにちは。iOSエンジニアのキムです。

今回はSwiftUIを使ってみた感想を書きたいと思います。

Xcode - SwiftUI - Apple Developer

SwiftUIが発表されてからしばらく経ちました。最初はすごい革新的で今までStoryboardやXibなどで開発していた時に抱えていた課題(XML分かりづらい、コンフリクト起きやすいのでチーム開発が大変など)を解決してくれるのではないかと思いましたが、新しい文法や技術に関する情報も少なくてなかなか手が出せませんでした。

しかし、今ではかなり情報も増えて、チュートリアルなどもたくさんあるので、私も軽く触ってみることにしました。

準備

SwiftUIを使うためには、macOSは10.15以上でXcode 11以上が必要です。macOS 10.14以下でも開発はできますが、Preview Canvas機能が使えないなど、SwiftUIが完璧にサポートされてないので、10.15以上がおすすめです。

処理内容

今回はSwiftUIのListを作ってみました。既存のUIKitのTableViewのようなものです。おそらくListは一番よく使われるのではないかと思います。 まずはリストで表示するモデルとテストデータを用意します。 

struct RainbowColor: Identifiable {
    var id: String = UUID().uuidString
    let name: String
    let color: Color
    
    init(name: String, color: Color) {
        self.name = name
        self.color = color
    }
}

struct RainbowColorList: Identifiable {
    var id: String = UUID().uuidString
    var rainbowColor: RainbowColor
    var description: String
    
    init(rainbowColor: RainbowColor, description: String) {
        self.rainbowColor = rainbowColor
        self.description = description
    }
}

// テストデータ
struct TestData {
    static let redColor = RainbowColor(name: "Red", color: Color.red)
    static let orangeColor = RainbowColor(name: "Orange", color: Color.orange)
    static let yellowColor = RainbowColor(name: "Yellow", color: Color.yellow)

    static func lists() -> [RainbowColorList] {
        let item1 = RainbowColorList(rainbowColor: redColor, description: "Red Color \nSome description space")
        let item2 = RainbowColorList(rainbowColor: orangeColor, description: "Orange Color \nSome description space")
        let item3 = RainbowColorList(rainbowColor: yellowColor, description: "Yellow Color \nSome description space")
        return [item1, item2, item3]
    }
}

次は、UITableViewCellに当たるRowを作成します。

struct ColorRow: View {
    
    let list: RainbowColorList
    
    var body: some View {
        VStack(alignment: .leading, spacing: 8){
            VStack(alignment: .leading) {
                HStack(spacing: 10) {
                    RoundColorView(color: list.rainbowColor.color, size: 50)
                    Text(list.rainbowColor.name).font(.headline)
                }
                Text(list.description).lineLimit(5).font(.body)
            }
            .padding(.leading, 32)
            .padding(.trailing, 32)
        }
        .padding(.top, 16)
        .padding(.bottom, 16)
    }
}

最後に上記で作ったものを一覧で表示するList画面です。

struct ContentView: View {
    let lists = TestData.lists()
    var body: some View {
        NavigationView {
            List {
                ForEach(lists) { list in
                    ColorRow(list: list)
                }
            }
            .padding(.leading, -20)
            .padding(.leading, -20)
            .navigationBarTitle(Text("Color List"))
        }
    }
}

イメージ

f:id:unifa_tech:20191204145737p:plain
List

感想

既存のUITableViewと比べるとかなりシンプルに書けました。 今までの開発ではStoryboardにUIViewControllerを作ってUITableViewを設置してUITableViewCellを設置してAutoLayoutの設定をする作業などが必要でした。また、SwiftファイルではUITableViewのDelegateを宣言したり、StoryboardのオブジェクトとのOutletの設定をするなど、色々と手間がかかりました。 SwiftUIではこれらが簡単に設定できてコーディングもシンプルになっているので開発にかかる時間も短縮されるのではないかと思いました。 ただ、UIをコードで作成するのでUIが複雑になる場合はコード全体を理解するまで時間もかかりそうだなと思いました。

最後に

今すぐSwiftUIが既存のUIKitを代替できるとは言えませんが、これからSwiftUIの進化が楽しみです。