Genta Hirauchi

公開日:2020/08/29
更新日:2020/09/01

【SwiftUI】ForEachで、Viewを繰り返し実装する方法を解説

  • SwiftUIで、Viewを繰り返し実装する方法が知りたい
  • 配列の要素の数だけ繰り返して実装したい

SwiftUIでは、ForEachを使用することで、Viewを繰り返し実装することができます。

本記事では、ForEachの基本的な実装方法から、配列をデータとして受け渡し、配列の要素の数だけViewを繰り返し実装する方法について解説致します。

目次

指定した範囲を繰り返す

まずは、範囲指定によるForEachの実装方法を紹介致します。範囲指定によるForEachは、以下のように実装します。

ForEach(範囲) { rangeNum in
    View
}

ForEachの引数には、0..<3のように、繰り返す範囲を指定します。

繰り返し処理内では、指定した範囲内の数値が、順番に引数として渡ってきます。上の例では、rangeNumとう変数で受け取れます。変数名は変更可能です。

以下は、3..<7 の間を繰り返し、Textを実装するサンプルコードです。

配列の要素数の数だけ繰り返す

続いて、ForEachに配列を渡し、配列の要素の数だけ、繰り返し処理を行う方法について解説致します。ForEachに渡す配列のデータは、Hashableか、Identifiableに準拠している必要があります。

Hashableに準拠したデータ配列の繰り返し

ForEachに、Hashableに準拠したデータ配列を受け渡す場合は、以下のように実装します。

ForEach(配列, id: 識別ID) { data in
    View
}

第1引数には、繰り返したい配列を指定します。この配列のデータは、Hashableに準拠している必要があります。

第2引数のid: には、配列のデータを識別するためのIDを指定します。

繰り返し処理内では、配列のデータが引数として渡ってきます。

以下は、Hashableに準拠したUserというstructを定義し、その配列をForEachで繰り返すサンプルコードです。

id: の部分には、\.hashValueが指定されております。これは、配列の要素であるUserのhashValueを指しております。

「Userには、nameというプロパティしかないじゃないか?」
と思われる方もいらっしゃるかもしれませんが、Userは、Hashableに準拠しているため、使用することが可能です。
Hashableは、以下のように、hashValueという一意のIntを保持するプロパティを持っているため、UserでもhashValueが使用できるというわけです。

public protocol Hashable : Equatable {
    var hashValue: Int { get }
    func hash(into hasher: inout Hasher)
}

ちなみに、以下のように、hashValueの部分をselfに置き換えることも可能です。

ForEach(users, id: \.self) { user in
    Text(user.name).font(.title)
}

今回は、Userというstructを用意しての解説を致しましたが、StringやIntもHashableに準拠しているので、StringやIntの配列をForEachで繰り返す場合も、上記と同様の実装が可能です。

Identifiableに準拠したデータ配列の繰り返し

ForEachに、Identifiableに準拠したデータ配列を受け渡す場合は、以下のように実装します。

ForEach(配列) { data in
    View
}

ForEachの引数に指定する配列のデータは、Identifiableに準拠している必要があります。

繰り返し処理内では、配列のデータが引数として渡ってきます。

以下は、Identifiableに準拠したUserというstructを定義し、その配列をForEachで繰り返すサンプルコードです。

Identifiableに準拠したクラスや構造体は、自身を識別するためのidというプロパティを持つ必要があります。
今回は、UserにInt型のidをプロパティとして宣言しておりますが、idはInt型である必要はありません。

なお、ForEachの繰り返し処理では、このidを使用してデータの識別を行うので、idは一意である必要があります。

配列内で、同じidを持つ要素があった場合にどうなるのかを試してみたところ、配列の要素の数だけ繰り返し処理が行われましたが、引数として渡ってくるデータは、配列の順番として先にあるデータが引数として渡ってきました。

以上、ForEachでViewを繰り返し実装する方法についてでした。最後までご覧いただき、ありがとうございました。