[SwiftUI][Xcode]ForEachの使い方

「ForEachって何？」

「ForEachの使い方を知りたい」

「ForEachってどうやって使えばいいの？」

と言う人に向けて、この記事は書かれています。

どうも、ちょげ（@chogetarou）です。

この記事では、SwiftUIのForEachの使い方について解説します。

ForEachとは
ForEach構造体の使い方
1. イニシャライザ
2. 使用例
まとめ
合わせて読みたい記事
終わりに

ForEachとは

疑問符, 問題, 質問, 応答, パズル, 問題の解決策, 文字, シンボル, タスク, 句読点, 壁, 傾く

まず、ForEachとは、繰り返し処理をする構造体です。

for-in文のように制御構文と同じに見えますが、ForEachは、構造体である点が違います。

ForEachは、繰り返しビューを定義する際に使われます。

ForEach構造体の使い方

イニシャライザ

ForEach構造体のイニシャライザは、以下のようになっています。

init(data, id, content)

data
繰り返しに使用するコレクション（配列などのデータの集まり）
id（キーパス）
dataの要素を特定する識別子
content（クロージャー）
繰り返し生成するビュー

使用例

コード, Html, デジタル, コーディング, Web, プログラミング, コンピュータ, 技術

数値の繰り返し

数値の範囲を指定して繰り返すのは次のように書きます。

        VStack {
            ForEach(1...5, id: \.self) { index in
                Text("\(index)")
            }
        }

まず、１から５までの数値を渡しています。

次にidに、キーパスとして、\.selfを指定しています。

\.selfは、1から５の数値自信をidとする指定方法です。

idについてよく分からないと言う人は、\.selfを指定すれば大丈夫です。

最後のクロージャには、「〜 in」を書くことで、dataから取り出した値を〜で変数として扱えます。

配列

配列に対して、繰り返し処理をしたい場合には、次のように書きます。

    var lang = ["swift", "kotlin", "c", "java", "python"]
    var body: some View {
        VStack {
            ForEach(lang, id: \.self) { i in
                Text(i)
            }
        }
    }

数値で指定していた部分を、配列名に変えるだけです。

Listを動的に作る

ForEachは、Listのビューを動的に作る際に役立ちます。

特別な処理などはなく、List内にForEach文を記述すれば、Listビューを動的に作ることが出来ます。

先程の配列の例であれば、

    var lang = ["swift", "kotlin", "c", "java", "python"]
    var body: some View {
        List {
                ForEach(lang, id: \.self) { i in
                    Text(i)
                }
            }
    }

のように書くことが出来ます。

Listの他にも、ビュー内にビューをいくつも定義するような場合には、ForEachが役に立ちます。