【SwiftUI】迷路を描画する方法

やりたいこと

以下のような迷路を描画する方法を紹介します。
あくまで一例です。

迷路データの定義

mazeData という2次元の配列を定義します。
1は壁を、0は通路を示します。

ContentView.swift

    let mazeData: [[Int]] = [
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 1],
        [1, 0, 1, 1, 0, 1, 1, 0, 0, 1, 0, 1, 0, 1, 1],
        [1, 0, 1, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 1],
        [1, 0, 0, 1, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 1],
        [1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 0, 1, 1],
        [1, 1, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 1, 1],
        [1, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1, 1, 1],
        [1, 0, 1, 1, 0, 1, 0, 0, 0, 1, 1, 1, 0, 0, 1],
        [1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 0, 1],
        [1, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 1],
        [1, 1, 0, 1, 1, 1, 0, 1, 0, 0, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1],
        [1, 1, 1, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 1],
        [1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1],
        [1, 0, 0, 1, 0, 1, 1, 1, 1, 1, 0, 1, 0, 0, 1],
        [1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1],
        [1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
    ]

UI作成

ContentView.swift

    var body: some View {
        VStack(spacing: 0) {
            ForEach(0..<mazeData.count, id: \.self) { rowIndex in
                HStack(spacing: 0) {
                    ForEach(0..<self.mazeData[rowIndex].count, id: \.self) { colIndex in
                        Rectangle()
                            .fill(self.mazeData[rowIndex][colIndex] == 1 ? Color.black : Color.white)
                            .frame(width: 20, height: 20)
                    }
                }
            }
        }
    }

解説

このコードは、小さな四角形を組み合わせて大きな迷路を作るための絵を描いています。

①VStack:

内部のビューを垂直に配置します（迷路の行）。

②最初のForEach:

ForEach(0..<mazeData.count, id: \.self) { rowIndex in ... }

このForEachはmazeDataの各行に対して反復処理を行っています。
rowIndexは現在の行のインデックスを表しています。

③HStack:

内部のビューを水平に配置します。

④2つ目のForEach:

ForEach(0..<self.mazeData[rowIndex].count, id: \.self) { colIndex in ... }

現在の行内の各セルに対して反復処理を行っています。
colIndexは現在のセルのインデックス（列のインデックス）を表しています。

⑤四角形のビュー：

Rectangle()
  .fill(self.mazeData[rowIndex][colIndex] == 1 ? Color.black : Color.white)
  .frame(width: 20, height: 20)

Rectangle()は四角形のビューを生成します。
.fillでmazeDataの現在のセルの値に基づいて四角形の色を決定しています。
値が1の場合、四角形は黒で塗りつぶされ、そうでない場合は白で塗りつぶされます。

小さな四角形の組み合わせで迷路の絵を描くことが出来ました！