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

「　SwiftUIのListとScrollViewの違いって？　」

「　どちらもそんなに変わらないのでは…?　」

SwiftUIには、スクロール画面を作ることができるという点で似た性質をもつ「List」と「ScrollView」があります。

一見同じように見えるこの二つの機能ですが、データの取り扱い方やメモリの使い方に違いがあり、用途によって使い分ける必要があります。

本記事では、ListとScrollViewの異なる点に加えて、どのように使い分けたら良いかをお話していきます！

[ 本記事はこんな人におすすめ ]

・SwiftUIを学びたい

・アプリでスクロール画面を作りたい

・ListとScrollViewの使い分けを知りたい

環境・バージョン

　> Swift 5.7.2

　> Xcode 14.2

　> macOS 12.5 Monterey

1 1. ListとScrollViewの違い
- 1.1 1-1 Listの特徴
- 1.2 1-2 ScrollViewの特徴
2 2. メモリ生成のタイミングを実験
3 3. ListとScrollViewの使い分け
4 まとめ
- 4.1 関連記事の紹介
- 4.2 動画の紹介

1. ListとScrollViewの違い

1-1 Listの特徴

Listは縦方向にのみ、画面スクロールが可能です。

デフォルトでセパレート線(区切り線)が引かれており、要素ごとに適度な余白が設けられています。

List機能について詳しくはこちらをご覧ください。

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

				
					struct ContentView: View {
    var body: some View {

        List {   // ⬅︎

            ForEach(1..<100) { index in

                Text("データ\(index)")

            } // ForEach
        } // List
    } // body
} // View

Listのメモリ生成の特徴として、スクロールによって画面に表示されるタイミングでデータをメモリ上に生成します。

画面に表示される分だけメモリを生成するため、処理が軽いという特徴があります。

これは「遅延読み込み」とも呼ばれます。

1-2 ScrollViewの特徴

ScrollViewは縦方向だけでなく、横、斜め、全方向への画面スクロールが可能です。

要素ごとのセパレート線(区切り線)はありません。

ScrollViewについて詳しくはこちらをご覧ください。

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

				
					struct ContentView: View {
    var body: some View {

        ScrollView { // ⬅︎

            ForEach(1..<100) { index in

                Text("データ\(index)")

            } // ForEach

        } // ScrollView
    } // body
} // View

ScrollViewのメモリ生成の特徴として、
画面表示時に、データ要素の全てをメモリ上に生成します。

一度に全てのデータを読み込むため、表示するデータ量が大きい場合は、読み込みに時間がかかる可能性があります。

2. メモリ生成のタイミングを実験

「ScrollView」と「List」では、保持しているデータのメモリ生成(インスタンス化)のタイミングが異なります。

それぞれのメモリ生成のタイミングの違いを実験してみましょう。

メモリとは

コンピュータやスマートフォンのデータを記憶する領域のこと。

メモリ領域には制限があり、メモリを過度に圧迫すると処理が重くなったり、

アプリケーションが落ちる原因になる。

2-1 子Viewを新規で作成

メモリ生成を実験するための下準備をしていきます。

新しくView構造体「RowText」を作成して、ContentView側から呼び出すコードを実装しました。

「row」とは、「１つ分、１つの」といった意味合いがあります。リスト内に表示される１つ分のテキスト要素と思っていただければ大丈夫です。

このように、Viewを呼び出す側は「親View」、呼び出される側は「子View」と呼ばれます。

今回の場合、親Viewは「ContentView」、子Viewは「RowText」ですね。

				
					// 独自の子View
struct RowText: View {

    // 画面表示されるテキストが格納される
    let outputText: String

    // ② イニシャライザー(最初に動くメソッド)
    init(_ inputText: String) {
        // プリント出力
        print(inputText)
        // 親Viewから渡された「inputText」を「outputText」に格納
        outputText = inputText
    }

    var body: some View {
        // ③ テキスト表示
        Text(outputText)

    } // body
} // View

struct ContentView: View {
    var body: some View {

        List {

            ForEach(1..<100) { index in

                // ① 子Viewを呼び出し
                RowText("データ\(index)")
            }

        } // ScrollView
    } // body
} // View

コード７〜13行目、initの中でprint出力を配置しています。

「init」内のコードは、Viewが生成された時に一番最初に実行されます。

この「RowText」が親Viewからの呼び出しによって生成された時に、print出力が実行されることで、どのタイミングで子Viewがメモリ生成されたのかがわかるという仕組みです。

…大丈夫でしょうか、ついて来れてますでしょうか？

構造体(struct)の呼び出しの仕組みに慣れていないと、少し難しく感じるかもしれません。

本記事では「ListやScrollViewが表示データ分のメモリを生成した時のタイミングがわかるようにしている」ということが分かれば大丈夫です◎

では、作成した子Viewを使ってメモリ生成のタイミングを実験していきます。

2-2 Listのメモリ生成

Listは、画面上に表示されているViewのみがメモリ上に生成されます。

画面スクロールに合わせて、表示に必要な分だけ順次にメモリ生成がされるので、大量のデータでも処理が軽いという特徴があります。これを「遅延読み込み」とも呼ばれます。

				
					// 親View Listバージョン
struct ContentView: View {
    var body: some View {

        List {

           ForEach(1..<100) { index in  // ⬅︎

                // 子Viewを呼び出し
                RowText("データ\(index)")

            }

        } // ScrollView
    } // body
} // View

では、上記のコードをシミュレータ「command + R」で確認してみましょう。

画面のスクロールに合わせて、新しく表示されるデータ範囲に合わせてメモリが生成されていることがわかります。

一度に全てのデータを読み込まず、ユーザの操作に合わせてメモリ生成する
「遅延読み込み」が確認できますね。

2-3 ScrollViewのメモリ生成

ScrollViewは、画面表示時に全てのViewがメモリ上に生成されます。

コードとしては、「List」部分を「ScrollView」に書き換えたのみです。

				
					struct ContentView: View {
    var body: some View {

        ScrollView {

            ForEach(1..<100) { index in

                // 子Viewを呼び出し
                RowText("データ\(index)")

            } // ForEzch

        } // ScrollView
    } // body
} // View

では、こちらもシミュレータ「command + R」で確認していきます。

今回はシミュレータ起動時から挙動を見てみましょう。

シミュレータによって画面が描画された時点で、画面に表示されていない箇所も含めて、（1..<100）までの全てのデータが全てメモリ生成されていることがわかります。

ScrollViewは描画時に自身が保持するデータ全てをメモリ生成するため、たくさんのデータ数を表示するのにはあまり向かないということですね。

✅Check!!!

– ScrollViewでも遅延読み込みが可能に –

Swiftは日々技術が刷新されています。

iOS14から、ScrollViewでも「LazyVStack」「LazyHStack」を併用することで、遅延読み込みが実装できるようになりました。

Lazyとは「怠惰」といった意味があり、遅延のニュアンスを指しています。

ScrollViewが保持しているデータを「LazyVStack」で囲みます。

				
					struct ContentView: View {
    var body: some View {

        ScrollView {

            LazyVStack {  // ⬅︎

                ForEach(1..<100) { index in
                     RowText("データ\(index)")
                 }

            } // LazyVStack
        } // ScrollView
    } // body
} // View

これによって、ScrollViewでも遅延読み込みが実装できます。