🥏

iOS開発中にListについて学んだことから派生して遊びたかったのでPlaygroundを使ってみた

2021/12/12に公開

iOS

前書き

ACCESS Advent Calender 10日目担当だったはずの @krmtmint です。
諸事情により盛大に遅刻しました。ごめんなさい。

社会人1年目、色々な業務に携わる機会を頂けています。現在は初めてのiOS開発に挑戦中です。
開発過程でたくさんのことを学ぶと、手元で動かして遊んでみたい気持ちが湧いてきます。そうはいっても開発中のアプリそのもので遊ぶわけにはいきません。手元でアプリを1つ作成することも考えましたが、もっとサクッと小規模なコードを試したいな…→ Playground 使ってみよう！となりました。

今回のターゲットは SwiftUI の List になります。
なお、Xcode のバージョンは 13.1 です。

Playground の起動方法

Xcode を起動し、上部のメニューバーから File -> New -> Playground... を選択して起動しました。
深く考えずに iOS タブの Single View を選択。

最初から Hello World!! 用のコードが入っていました。
コード左の再生ボタンを押すと実行できます。

SwiftUI のコードを実行する

サンプルコードは UIKit を使用していたので、そこを書き換えました。

- import UIKit
+ import SwiftUI
  import PlaygroundSupport

https://developer.apple.com/documentation/swiftui/displaying-data-in-lists を参考に、以下のコードを実行してみました。

import SwiftUI
import PlaygroundSupport

struct Whiskey: Identifiable {
    let id = UUID()
    var name: String
    var producincDistrict: String
}

var whiskeyAtHome = [
    Whiskey(name: "Bowmore", producincDistrict: "Islay"),
    Whiskey(name: "白州", producincDistrict: "Japan"),
    Whiskey(name: "Jack Daniel\'s", producincDistrict: "Tennessee")
]

struct WhiskeyRowView: View {
    var whiskey: Whiskey
    
    var body: some View {
        VStack(alignment: .leading, spacing: 3) {
            Text(whiskey.name)
                .foregroundColor(.primary)
                .font(.headline)
            Text(whiskey.producincDistrict)
                .foregroundColor(.secondary)
                .font(.subheadline)
        }
    }
}

struct WhiskeyAtHomeList: View {
    var body: some View {
        List {
            ForEach(whiskeyAtHome) { whiskey in WhiskeyRowView(whiskey: whiskey)}
        }
    }
}

let viewController = UIHostingController(rootView: WhiskeyAtHomeList())
PlaygroundPage.current.liveView = viewController

実行結果はこちら

ちゃんとリストが表示されました！

終わりに

サクッと手元でコードを実行して動きを確認できるっていいですね。
次はスクロールしたときのセルの再利用について、挙動を観察したいと思っています。

（とりあえず表示項目を増やして、スクロールが発生するリストの作成までできました）

遅刻したので、私より後の日付担当の方も既に投稿されています。
11日：@yocidama さんによるユーザーを理解してプロダクトをつくるということ
12日：@kiito1000 さんによる Reactに対応していないUIライブラリでもコンポーネントで描画したい
です。ぜひご覧ください〜！
また、明日（13日）は @n2-freevas さんが語ってくれるそうです〜

前書き

Playground の起動方法

SwiftUI のコードを実行する

終わりに

Discussion