【SwiftUI】似たようなViewの繰り返しはForEachで

どうも、Web制作会社で働いている、クウルス(@Qoo_Rus)と申します。

WWDC19でSwiftUIが発表されてからしばらく経ちました。

従来よりコード量を少なく簡単にUI設計ができるSwiftUIの活用が様々な企業の開発現場で進んでいます。

これからiOSアプリ開発に取り組み始めたいと考えている方は、SwiftUIから取り組むと楽しみながら画面作りができるのでかなりオススメです。

今回は似たような画面の要素を繰り返し生成するForEachについてご紹介します。

この記事では主に

という初心者に向けての視点で書いていますので、ぜひお役立てください。

ForEachで数字の連続を処理する

import SwiftUI
import Foundation

struct ContentView: View {
    
    var body: some View {
        VStack {
            ForEach(1...3, id: \.self) {
                Text("\($0)…")
            }

            Text("ダー！")
        }
    }
}

画面に「1…2…3…ダー！」と出してみました。

どのような仕組みになっているかを分解して見ていきましょう。

ForEachを使わない場合

struct ContentView: View {
    
    var body: some View {
        VStack {
            Text("1…")
            Text("2…")
            Text("3…")
            Text("ダー！")
        }
    }
}

ForEachを使わずに実装した場合は、単純に4つのText要素を並べることになりますね。

もし数字が10とか100とか、数がどんどん大きくなっていくとどうでしょうか？

10行分、100行分コードを書くという、めんどくさい作業になります。

数字が大きくなっていく連続データの表示はひとまとめにしましょう。

ForEachで置き換える部分

Text("1…")
Text("2…")
Text("3…")

の部分をForEachで置き換えると

ForEach(1...3, id: \.self)
    Text("\($0)…")
}

となります。

ForEachで配列の要素を順番に使って表示する

struct ContentView: View {
    let choices: [String] = ["ごはん", "お風呂"]

    var body: some View {
        VStack {
            ForEach(choices, id: \.self) { choice in
                Text("\(choice)にする？")
                    .padding()
            }
        }
    }
}

数字の連続だけでなく、配列の要素を連続で使うこともできます。

また先ほどの例に .padding() を付け加えて、要素の間に適度な余白を与えました。

ForEachの部分を書くときのルール

ForEach(choices, id: \.self) { choice in
    Text("\(choice)にする？")
        .padding()
}

通常、配列は英語の複数形を使って表現しますよね。

実際に当てはめるパーツはそのうち一つを取り出して表現するので、英語の単数形にします。

変数の命名ルールは守らなくてもアプリは動きますが、別の誰かが維持管理をしていくソースコードは「どういう意味でその変数を使っているのか」をはっきりしておく必要があります。

また、自分一人で管理するにも時間が経ってしまえば、訳のわからない命名だと自分の書いたコードでも理解するのがしんどくなります。

繰り返したい要素を追加する

let choices: [String] = ["ごはん", "お風呂", "・・・それともワタシ"]

「・・・それともワタシ」を配列に追加しました。

これだけで画面に表示される文章が見事にイヤらしくなります。

繰り返し処理のパターンを知って、より良いコードを目指そう

を繰り返し使ってViewを書きたい場合はForEachが便利であることをご紹介しました。

プログラミングで繰り返しの処理はたくさん出てくるので、意識して使えるようになりましょう。