【SwiftUI超入門】ForEachで数値範囲や構造体の値を取り出す方法
この記事の目次
ForEachとは
ForEachとはUI部品を繰り返し生成するためのものです。
ListやVStackなど複数のUI部品を配置できるものの中に記述します。
ForEachは主に
| 1.数値範囲を用いて複数回繰り返す方法 2.構造体の配列から要素を一つづつ取り出していく方法 |
といった二つの方法があります。
それぞれやっていきましょう。
3-10-2.実際に使ってみる
3-10-2-1.数値範囲
まずは数値範囲を用いて複数個のUI部品を生成しましょう。
SwiftUIのプロジェクトを作成しておいてください。
数値範囲を用いた方法は
| ForEach(数値範囲) { 変数 in UI部品 } |
と記述します。
実際に使ってみましょう。
今回はHello,WorldというTextを11回表示させてみようと思います。
Text(“Hello, World!”)を
| List{ ForEach(0..<11) { num in Text(“\(num): Hello, World!”) }} |
と書き換えましょう。
コードについて説明していきます。
まず、Listを作ります。
これは、ForEachはListやVStackなど複数のUI部品を配置できるものの中にしか記述できないためです。
次にForEachの中身をみていきましょう。
ForEachの（）の中には数値範囲を入れます。
今回は『0から11よりも小さい値、つまり10』までの範囲を表しており、10回ループします。
次に『num』という変数を作っています。
この変数には繰り返されるごとに『0 ~ 10』までの数値が順に格納されます。
例えば、１回目には『０』が２回目には『1』が、といったように順に格納されていき、『10』まで続きます。
ForEachの中にはTextを記述しています。
Textは『Hello, World!』という文字列で、
最初に変数『num』を埋め込んでいます。
どのように表示されるのかプレビューで確認してみましょう。
右上のボタン、
Canvas、
Resumeと順に押していきましょう。
するとプレビューが表示されます。
プレビューを見てみると11回『Hello,World!』と出力されていますね。
3-10-2-2.構造体の配列
次に構造体の配列を用いて複数個のUI部品を生成しましょう。
構造体の配列を用いた方法は
| ForEach(構造体の配列) { 変数 in UI部品 } |
と記述します。
実際に使ってみましょう。
今回は名前のプロパティを持った構造体を作って、その配列の中身をForEachで取り出してみようと思います。
まずは新しくViewを作ってPreviewに表示されるようにしましょう。
ArrayContentViewというViewを作ります。
| struct ArrayContentView: View { var body: some View { Text(“こんにちは”) } } |
と記述しましょう。
はViewプロトコルが適用されているものは何らかのUI部品が記述されていないとエラーが出るため、とりあえず記述しています。
次に作ったArrayContentViewがPreviewに表示されるようにしましょう。
現在はContentVIewがPreviewに表示されています。
ここの記述を
| ArrayContentView() |
と書き換えましょう。
するとPreviewにArrayContentViewの内容が表示されます。
次に、配列にするために名前のプロパティを持った構造体を作りましょう。
| struct Human { let name:String } |
と記述します。
構造体を作ったら、それを使って配列を作りましょう。
ArrayContentViewに
| let humans = [ Human(name: “田中”), Human(name: “鈴木”), Human(name: “佐藤”)] |
と記述します。
それでは作った配列をForEachを使って取り出してみましょう。
一つのPreviewに収めたいのでListの中に記述します。
bodyの中の
| Text(“こんにちは”) |
を
| List { ForEach(humans) { human in Text(“\(human.name)さん、こんにちは”) }} |
と書き換えましょう。
この記述ではForEachを使って配列humansの中身を取り出したかったのですが、エラーが出ています。
このエラーの内容はForEachを使うには構造体Humanに
『Identifiable』プロトコルを適用する必要があるのにされていないといったものです。
Identifiableプロトコルというのは、インスタンスを特定するためのIDを持たせるプロトコルです。
例えば、HumanにIdentifiableプロトコルを適応した場合、Humanを用いたインスタンスは
IDを持ち、それぞれ特定できるようになります。
それでは、エラーを解消するためにHumanにIdentifiableプロトコルを適用しましょう。
Humanの横に
| : Identifiable |
と記述してプロトコルを適用しましょう。
Identifiableプロトコルが適用された構造体は『id』というプロパティが必要です。
| let id = UUID() |
と記述しましょう。
『UUID』は
適当なidを作成する関数です。
なので定数『id』には
適当な『id』が格納されています。
これで、エラーが出なくなったのでPreviewで確認してみましょう。
『Resume』を押してください。
Previewを見ると、ForEachを使って、構造体の配列の中身をうまいこと取り出すことができていますね。
ついでにそれぞれのインスタンスのidプロパティがどのようになっているのか確認しておきましょう。
を
| Text(human.id.description) |
と書き換えましょう。
簡単に説明しておくと、まず、『Text』は
『String型』を引数にとります。
それぞれのインスタンスの『id』は
『UUID』という型なので、『descriptionメソッド』を使って、
String型に変換しているという内容です。
この状態でPreviewを見てみましょう。
『Resume』を押してください。
すると、それぞれのインスタンスのidが表示されます。
これらのIDは被ることがなく(ものすごく低い確率で被ることはある)、それぞれのインスタンス独自のものです。