[初心者向け]SwiftUIで一覧画面（List：リスト）を作ろう！

「　SwiftUIで設定画面のようなリストデザインを使いたい…　」

「　配列データを1行ずつ画面に表示したい…　」

そんな時にピッタリなのがSwiftUIの機能「List(リスト)」です！

List（リスト）はデータを一覧形式で表示できますので、とてもよく利用される機能の一つになります。SwiftUIでのList作成の方法を学びましょう。

目次

• 1 List(リスト)とは
• 2 1. 一列に並べられたデータの行(リスト)を表示
• 3 2. 配列からList(リスト)を作成
  • 3.1 2-1 一意性を確保したデータ型を作る
  • 3.2 2-2 データを配列で管理
  • 3.3 2-3 Listに配列でーたをセットして順番に表示
• 4 3. List(リスト)の1行を選択できる機能をつくる
  • 4.1 3-1 List(リスト)内で選択した値を格納する変数を作る
  • 4.2 3-2 NavigationViewの追加
  • 4.3 3-3 リストタイトル、編集ボタンの追加
  • 4.4 3-4 一意が保証されたSet型の配列変数とListを紐付け(バインディング)
• 5 まとめ
  • 5.1 関連記事の紹介
  • 5.2 本記事の動画紹介

List(リスト)とは

List（リスト）はSwiftUIの機能の一つで、データをリスト一覧形式で表示できます。

みなさんもよく利用しているiPhoneの設定画面を思い出してもらうと、デザインをイメージしやすいと思います。

他の機能と組み合わせることで、リストを選択したり、並べ替えたり、タップすると他の画面に遷移したり等、様々な活用方法があります。
本記事ではリストの「選択」機能をご紹介していますので、ぜひマスターしましょう。

1. 一列に並べられたデータの行(リスト)を表示

まず初めに、Listの基本的な機能を確認していきましょう。

コード例のように、Listを記述して、Listのブロック内に一つの要素「Text(“りんご”)」を配置しました。

				
					struct ListView: View {

    var body: some View {

        List {

            Text("りんご")  // ⬅︎リスト要素

        } // List ここまで
    } // body
} // View
				
			

これだけの記述でも、画面にリスト要素が表示されているのがわかりますね。

同じ要領で複数の要素を作ってみます。

				
					struct ListView: View {

    var body: some View {

        List {

            // リスト内に複数の要素を記述
            Text("りんご")
            Text("オレンジ")
            Text("レモン")
            Text("いちご")
            Text("キウイ")

        } // List ここまで
    } // body
} // View
				
			

各要素がリストで表示されていることが確認できました。非常にシンプルですね。

2. 配列からList(リスト)を作成

次に、配列のデータをListで表示させてみましょう。

配列表示には、大きく分けて３つのステップがあります。

1. 一意性を確保したデータ型を作る
2. データを配列で管理
3. Listに配列データをセットして順番に表示

順を追って確認していきましょう。

2-1 一意性を確保したデータ型を作る

フルーツ要素を格納する構造体(struct)を新規で作成します。

Listの要素は一意(ユニーク)である必要があります。

構造体にIdentifiableプロトコルを準拠することで、値の一意性を確保することが可能になります。

✅Check!!!

「　一意性の確保_Identifiableプロトコルって？　」

Identifiableプロトコルを使用すると、クラスや値型に安定したIDの概念を提供することができます。たとえば、アプリとアプリのデータベースストレージ全体で安定した id プロパティを持つ User タイプを定義できます。このidプロパティは、ユーザー名など他のデータフィールドが変更された場合でも、特定のユーザーを識別するために使用することができます。

Identifiableは、IDの期間と範囲を特定できないようにします。

Apple公式ドキュメント：https://developer.apple.com/documentation/swift/identifiable

最近だと、わたしたちにも「マイナンバー」という番号が付与されていますよね。
この一意(ユニーク)な番号によって、例えば同じ名前の人がいたとしても、システムがデータを識別することができます。

それと同じ考え方で、suruct(構造体)にも一意なidを付与して、プログラムにList内の各データを識別してもらう必要がある、ということです！

では、コードを見ていきましょう。前項目で書いたコードにstruct(構造体)を加えていきます。

				
					// Identifiableプロトコル ⇨ 値が一意(ユニーク)であることを保証する
struct Fruit: Identifiable {

    let name: String // 名前
    let id = UUID() // 識別するためのIDを生成
}

struct ContentView: View {
    var body: some View {

        List {

            // リスト内に複数の要素を記述
            Text("りんご")
            Text("オレンジ")
            Text("レモン")
            Text("いちご")
            Text("キウイ")

        } // List ここまで
    } // body
} // View
				
			

「UUID()」と記述することで、一意なidを生成することができます。

プログラムはこのid値を読み取ってデータの一意性を確認します。

2-2 データを配列で管理

先ほど作成したFruit構造体を用いて配列データを作成していきます。

まずは、要素が入っていない空の配列を用意します。

配列の要素は角括弧「[]」で囲みます。

				
					struct Fruit: Identifiable {
    let name: String // 名前
    let id = UUID() // 識別するためのIDを生成
}

// 空の配列を用意
let fluits = [

]


struct ContentView: View {

...
				
			

次に、配列の中に要素を入れていきましょう。

ここで先ほど作成した構造体を用います。配列内に複数の要素を格納する場合、

一要素ごとにピリオド「,」をつけて要素を分けます。

				
					// Identifiableプロトコル ⇨ 値が一意(ユニーク)であることを保証する
struct Fruit: Identifiable {
    let name: String // 名前
    let id = UUID() // 識別するためのIDを生成
}

let fruits = [

    Fruits(name: "りんご"),
    Fruits(name: "オレンジ"),
    Fruits(name: "レモン"),
    Fruits(name: "いちご"),
    Fruits(name: "キウイ")
]

struct ContentView: View {

…
				
			

これで、struct(構造体)データ「Fruit」を合計5つ、配列に格納することができました。

2-3 Listに配列でーたをセットして順番に表示

ではいよいよ、先ほど作った配列を用いてListを表示していきましょう。

現在のListブロック内はこのようになっているかと思います。

こちらのList内要素を配列に置き換えていきましょう。

Listに外部からデータを渡すには、Listの記述の後に()をつけ、中に参照するデータ名を記述します。

				
					struct ContentView: View {
    var body: some View {

        List(fruits) {  // ⬅︎


            // リスト内に複数の要素を記述
            Text("りんご")
            Text("オレンジ")

            ...
				
			

List(fruits)としました。

これでListが配列「Fruits」を参照するようになります。

これだけではエラーが出ますので、続けて記述していきます。

				
					struct ContentView: View {
    var body: some View {

        List(fruits) { oneFruit in    // ⬅︎

            // リスト内に複数の要素を記述
            Text("りんご")
            Text("オレンジ")
            
            ...
				
			

Listの処理ブロックの初めに、「 oneFruit in 」と追記しました。

「oneFruit」には、指定した配列内の要素から一つ分が取り出された値が格納されています。

命名は普段の変数の命名と同じように、任意で命名可能です。

今回は配列fruitsの一要素のため、oneFruitとしています。

このoneFruitがどのように使われるのか、次で見ていきましょう。

(※取り出された値は、List内でのみ扱うことができます)

				
					struct ContentView: View {
    var body: some View {

        List(fruits) { oneFruit in

            // リスト内に配列一要素分のnameを表示
            Text(oneFruit.name)   // ⬅︎

        } // List ここまで

    } // body
} // View
				
			

Listに配列を渡すことで、配列から一要素ずつ参照して取り出すことができると、前項目で解説しましたね。

Listの処理ブロック内でText(oneFruit.name)と記述することで、
一要素分が格納されたoneFruitのname(名前)を取り出して、一つずつリストに表示させることができます。

配列fruitsのname(名前)が一要素ずつ参照されて、リストに表示されていますね！

配列内の要素の数に応じて、Listブロック内の処理はループ(繰り返し)されます。
それによって、Textを1行記述するだけで、配列の全ての要素を表示させることができます。

これで配列データを使ったList表示ができました！

ここまでの手順をもう一度復習しておきましょう。

1. 一意性を確保したデータ型を作る
2. データを配列で管理
3. Listに配列データをセットして順番に表示

3. List(リスト)の1行を選択できる機能をつくる

最後に、ここまでで作成したList(リスト)に、編集機能を追加していきましょう。

Listには、要素を選択、並び替え、削除といった編集機能を持たせることができます。
今回はその中から「選択」機能の追加方法をご紹介します。

リスト選択機能追加の大まかな手順は以下の４ステップです。

1. List内で選択した値を格納する変数をつくる
2. NavigationViewを追加
3. リストタイトル、編集(Edit)ボタンを追加
4. 一意が保証されたSet型の配列変数とListを紐付け(バインディング)

一つ一つの工程は複雑なものではないので、順を追って実装していきましょう。

コードを変更する箇所はContentViewの内部です。

アイテム構造体と配列データに変更はありません。

3-1 List(リスト)内で選択した値を格納する変数を作る

まず、選択されたList(リスト)要素を格納するための変数を用意します。

Listと値を連動させるため、変数に@Stateを付与します。

@Stateは、SwiftUIが提供している機能であるプロパティラッパーの一種です。

				
					struct ContentView: View {

    // 選択されたリスト要素を格納する
    @State private var multiSelection = Set<UUID>() // ⬅︎

    var body: some View {

        List(fluits) { oneFruits in

            // リスト内に配列位置要素分のnameを表示
            Text(oneFruits.name)

        } // List ここまで

    } // body
} // View
				
			

Setとは、値が重複しない配列のことを意味します。

UUIDはユニークな値を生成することができましたね。

Listの要素を編集するには、選択された要素が他の要素と重複していないことを保証する必要があります。

こちらの変数をListと紐づけることで、格納される値が一意であることを保証した上で、リスト上で選択された値を保持することができます。

3-2 NavigationViewの追加

続いて、リストの編集機能を作るためにNavigationViewを生成します。

NavigationViewのブロック内に、Listを丸ごと引越しさせましょう。

				
					struct ContentView: View {

    var body: some View {

        NavigationView { // ⬅︎ 

            List(fruits) { oneFruit in

                Text(oneFruit.name)

            } // List ここまで
        } // NavigationView ここまで

    } // body
} // View
				
			

これでNavigationViewの準備はOKです◎

3-3 リストタイトル、編集ボタンの追加

次に、NavigationViewの機能の一つを使ってリストにタイトルを表示させてみましょう。

List処理ブロックの直下に、「.navigationTitle」を記述します。

				
					 　　　...
 　　　
 　　　　NavigationView {

            List(fluits) { oneFruits in

                // リスト内に配列位置要素分のnameを表示
                Text(oneFruits.name)

            } // List ここまで
            .navigationTitle("フルーツ")        // ⬅︎
        } // NavigationView ここまで
        
        ...
				
			

リストの上部にリストタイトル「フルーツ」が表示されましたね。

さらに、画面右上に編集ボタンを追加していきましょう。

「 .toolbar{ EditButton() } 」を追記します。

				
					        ...
        
        NavigationView {

            List(fruits) { oneFruit in

                Text(oneFruit.name)

            } // List ここまで
            .navigationTitle("フルーツ")
            .toolbar { EditButton() } // ⬅︎

        } // NavigationView ここまで

    } // body
} // View
				
			

画面右上にEditボタンが追加されました!

しかし、これだけではまだListに編集機能は追加されていません。

ここで、前項目で作っておいた、@Stateを付与した状態変数を活用します。

3-4 一意が保証されたSet型の配列変数とListを紐付け(バインディング)

前項目で作成した状態変数multiSelectionと、Listを紐付けましょう。

Listに新しく引数「selection:」を追加し、$multiSelectionを指定してデータバインドを行います。

頭文字に「$」を忘れないようにしましょう。

				
					struct ContentView: View {

    // 選択されたリスト要素を格納する
    @State private var multiSelection = Set<UUID>()

    var body: some View {

        NavigationView {

            List(fruits, selection: $multiSelection) { oneFruit in // ⬅︎

                Text(oneFruit.name)

            } // List ここまで

            .navigationTitle("フルーツ")
            .toolbar { EditButton() }

        } // NavigationView ここまで
    } // body
} // View
				
			

これで、Editボタンを押すことでリストの選択ができるようになりました！

リスト選択機能の手順を改めて復習しておきましょう。

1. List内で選択した値を格納する変数をつくる
2. NavigationViewを追加
3. リストタイトル、編集(Edit)ボタンを追加
4. 一意が保証されたSet型の配列変数とListを紐付け(バインディング)

まとめ

今回はSwiftUIの機能「List(リスト)」についてご紹介しました。

今回ご紹介した機能以外にも、たくさんの便利な機能がListには詰まってますので、楽しみながら色々試してみてください！

Listは直感的にリストデザインを構築することができ、アプリ開発で非常に多用する機能です。
ぜひこの機会にマスターして使いこなしていただければと思います◎

関連記事の紹介

[ ScrollViewの使い方 ]

[SwiftUI]スクロール画面を作ろう！ScrollViewの使い方

[ ListとScrollViewの特徴と使い分け ]

[SwiftUI]ListとScrollViewはどうやって使い分ける？二つの特徴と違い

本記事の動画紹介