Swift

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

SwiftUI ForEach

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

※2021年4月追記

2019年頃は自社でiOSアプリ開発をしていたので、その時の経験を元に記事を書きました。
現在のSwiftの仕様とは異なる部分があるかもしれません、ご了承ください。

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

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

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

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

この記事では主に

  • iOSアプリを開発したことがない
  • その他プログラミングを経験したことのない

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

今回実装した環境は以下の通りです。

違う環境では異なった挙動を示す可能性があります。ご注意ください。

  • macOS10.15 Catalina
  • Xcode11.0
  • Swift5

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

import SwiftUI
import Foundation

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

            Text("ダー!")
        }
    }
}
SwiftUI forEach

画面に「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)…")
}

となります。

プログラミング初心者の方はあまり気にしなくても良いですが・・・

id: \.self と記述した部分は、SwiftUIが配列のそれぞれの要素を一意に特定するために必要です。詳しくはこちらの記事を参考にしてください。(英語記事です)

https://www.hackingwithswift.com/quick-start/swiftui/how-to-create-views-in-a-loop-using-foreach

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

SwiftUI ForEach

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

  • 連続した数字
  • 配列の要素

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

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

Web制作会社 取締役
クウルス
EarthCampus株式会社 取締役。 Webサイトの受注制作・運営をしています。 TwitterではITビジネスにつながる技術的な学びを発信。 趣味はエレクトーンと格闘ゲーム。
\ Follow me /