List の基本的な使い方

SwiftUI の List は、データを縦方向に並べて表示するためのコンポーネントです。UIKit の UITableView に相当しますが、はるかにシンプルに記述できます。

最もシンプルな List

List の中に直接ビューを並べるだけで、リスト表示が完成します。

struct ContentView: View {
    var body: some View {
        List {
            Text("りんご")
            Text("みかん")
            Text("バナナ")
        }
    }
}

このコードだけで、区切り線付きのリストが表示されます。各行は自動的にセルとして扱われ、タップ時のハイライトも標準で適用されます。

配列からリストを生成する

実際のアプリでは、配列データからリストを生成することがほとんどです。List のイニシャライザに配列を渡すことで、動的なリストを作成できます。

struct ContentView: View {
    let fruits = ["りんご", "みかん", "バナナ", "ぶどう", "もも"]
    
    var body: some View {
        List(fruits, id: \.self) { fruit in
            Text(fruit)
        }
    }
}

id: \.self は、各要素を一意に識別するためのキーパスです。String 型の場合は文字列そのものを識別子として使っています。

List と ForEach の組み合わせ

List の中で ForEach を使う方法もあります。この書き方は、リスト内に静的な要素と動的な要素を混在させたい場合に便利です。

struct ContentView: View {
    let fruits = ["りんご", "みかん", "バナナ"]
    
    var body: some View {
        List {
            Text("フルーツ一覧")
                .font(.headline)
            
            ForEach(fruits, id: \.self) { fruit in
                Text(fruit)
            }
        }
    }
}

List(配列) 形式

配列のみを表示する場合にシンプルに書ける

List + ForEach 形式

静的要素と動的要素を混在させたい場合に使う

List は SwiftUI でデータ一覧を表示する際の基本コンポーネントです。次の記事では ForEach についてより詳しく解説します。