【SwiftUI】ForEachでPixel Artアプリを作ってみる

概要

SwiftUIではForEachを使用することでViewを繰り返し処理で生成することができます。
そんなForEachの使い方をご紹介しつつ今回は以下のようにドット絵が描けるPixel Artアプリを作ってみたいと思います。

環境

この記事は以下のバージョン環境のもと作成されたものです。
【Xcode】14.0
【iOS】16.0
【macOS】Monterey バージョン 12.5

ForEachの基本的な使いかた

VStack {
    ForEach(0..<10) { index in
        Text("Index: \(index)")
    }
}

ForEachは繰り返しViewを生成するのでListやVStack内で使用します。
基本的な使い方は()内に繰り返したい範囲を記述し、クロージャー内でViewを書きます。
上記のサンプルではVStackで縦に配列するコンテナ内にForEachでTextを繰り返し生成している状態です。

配列やIdentifiable、cに準拠したデータを使う

ForEachの()に配列のデータを渡すこともできます。

struct SampleView: View {
    let fruits: [String] = ["Apple", "Orange", "Banana", "Pineapple"]
    var body: some View {
        VStack {
            ForEach(fruits, id: \.self) { index in
                Text(index)
            }
        }
    }
}

配列のデータを範囲に渡し、第二引数でid: .selfとしてIDを渡しています。
この配列にはIDの情報がないので必ず必要となります。
またクロージャーのindexは配列で定義した型になるのでString型となるのでText内でそのまま使用することができます。

structを利用した配列を利用する場合は必ずHashableに準拠させる必要があります。

struct FruitsData: Hashable {
    var name: String
}

struct SampleView: View {
    let fruits: [FruitsData] = [
    FruitsData(name: "りんご"),
    FruitsData(name: "みかん"),
    FruitsData(name: "バナナ"),
    FruitsData(name: "パイナップル")
    ]
    var body: some View {
        VStack {
            ForEach(fruits, id: \.self) { fruits in
                Text(fruits.name)
            }
        }
    }
}

Identifiableに準拠したstructの型で配列のプロパティを渡すと第二引数でのIDを省略することができます。

struct FruitsData: Identifiable {
    var id: String { name }
    var name: String
}

struct SampleView: View {
    let fruits: [FruitsData] = [
    FruitsData(name: "りんご"),
    FruitsData(name: "みかん"),
    FruitsData(name: "バナナ"),
    FruitsData(name: "パイナップル")
    ]
    var body: some View {
        VStack {
            ForEach(fruits) { fruits in
                Text(fruits.name)
            }
        }
    }
}

Identifiableに準拠したstructは必ずIDが保証されたているのでForEachでIDを定義しなくてもよくなります。
またIDの省略だけでなく、サーバーからデータを取得して、取得したデータの値をList形式で表示させたりする時は非常に簡単にできます。

Pixel Artアプリを作ってみる

ForEathでVStackとHStackにRectangleを表示させることで、ほんの数行で10×10のマスを作ることができます。
またちょっとしたカーソルボタンを作成し、選択しているIndexに色を付けることで、マスを移動しているように表示させています。
全体のコードでも100行ちょっとだけで作ることができます。
以下サンプルコードのリンクを貼っておくので是非手元で試して見てください！

github.com