SwiftUI・Xcode

【SwiftUI】ForEachの繰り返し処理を完全マスターへの道(随時追記)

※本ページはアフィリエイトプログラムによる収益を得ています

SwiftUIのみならずjavascriptやPHPなど、あらゆるプログラミング言語で絶対にマスターしておきたいのが繰り返し処理(ループ処理)で使うfor文やfor each文です。

SwiftUIの場合にもいくつかの構文が存在しますが、その中でも一番利用するであろうForEach文を完全マスターしたいと思いこの記事にまとめていきたいと思います。これ以上ForEachについては書くことがないというレベルの内容になるまで追記していきます。それではまずは超基本から。

※どのサンプルコードもContentViewに記述して動く一番シンプルな書き方にしています

数値を指定して処理を繰り返す方法(例:1から10まで10回繰り返す)

struct ContentView: View {
    var body: some View {
        ForEach(1..<11) { num in
            Text(String(num))
        }
    }
}

ForEachの括弧内に
「開始する数値」1を入れ、ドットを2つ、そして「<11」と書くことで11未満、つまり10まで繰り返すという指示になります。

「 { 」の一つ目のnumは変数です。1から10までの値が変数numを通じて1,2,3,4と送られていきます。

Textに送られた変数numはInt型なのでこのままでは表示できませんので、String関数で包んであげて文字列化してあげています。別のやり方にダブルクォーテーションで囲い文字列とし、その中にバックスラッシュ(maxの場合option + ¥でバックスラッシュ入力)と半角括弧で変数を囲ってあげる方法もあります。

NG:Text(num)
OK:Text(String(num)) or Text(“\(num)”)

配列の中身の数だけ繰り返す方法

やはりForEachを一番よく使う局面といえば配列の繰り返し処理です。以下の例で見てみましょう。

struct ContentView: View {
    var food = ["いちご", "りんご", "みかん"]

    var body: some View {
        ForEach(0..<food.count) { num in
            Text(food[num])
        }
    }
}

例として、foodという名前の配列に「いちご、りんご、みかん」の3つの値を入れています。

ForEachの部分を見てみましょう。
開始する数値が先ほどの例の1とは異なり0としています。これは配列の1つ目を抽出する際は0番で扱うためです。food.count の部分はfoodの中身の個数(3)です。配列名に.countをつなげてあげると配列の個数を返します。ですので、このForEach文は0から3未満までの 0 , 1 , 2 の値を繰り返すことになります。

次の行のText部分では、配列foodのnum個目を表示という処理が行われています。

1ループ目 food[0] → いちご
2ループ目 food[1] → りんご
3ループ目 food[2] → みかん

これで配列の中身が繰り返し表示されましたね。

とりあえず今日のところはこれまで。
ForEachの繰り返し処理の基本編でした。