【Jetpack Compose】スクロールリスト基本編：LazyColumnの使い方

目標
なぜLazyColumnを使うのか
実装
- コード
次のステップ
おわりに
参考

目標

この記事では、「LazyColumn」を使用したスクロールできるリストの作成方法の基本実装の仕方を解説します。
基本的な使い方なので実際に使うには機能不足だと思いますが、まずは使い方のイメージをつかむことを目標にしています。

以下のリポジトリが今回作成するプロジェクトになります。
記事を読むだけではなく、自分の手元で動かしていただくとより理解が進むと思います。

コード

GitHub – Daiki-Iijima/JetpackCompose-Samples at Project/ScrollList-Basic

GitHub

プロジェクトのリンクに飛ぶと、VSCodeのような画面が表示されるので、「ScrollList-Basic」フォルダを右クリックして、「ダウンロード」を選択してご自身の環境で実行してみてください。

なぜLazyColumnを使うのか

「Lazy」はプログラミングのコンテキストでは、「遅延処理」を意味します。
「Lazy」という英単語の意味としては、「怠惰」などの意味ですが、私は、「怠惰だから、必要になるまで処理をしない(生成、表示しない)」という意味として理解しています。

通常の「Column」でもModifierを設定することでスクロールはできるようになります。
しかし、スクロールする可能性があるということは大量の、もしくは、動的に変化するデータを表示したいという意思があると思います。

その場合に「Column」を使ってしまうと、画面に表示されていない部分も生成してしまいます。
これはアプリの大幅なパフォーマンスの低下をもたらす場合があります。

なので、以下のように

徐々に追加削除される可能性のあるデータを表示しる可能性
スクロールする必要があるぐらい大量のデータを表示する可能性

がある場合は、表示されているデータだけをレンダリングするLazyColumnを使うのが適しています。

実装

「LazyColumn」は通常のComposableとは異なり、専用のDSL（Domain-Specific Language）を使用してアイテムを定義することで動作します。

DSLというワードに引っかかるかもしれませんが、簡単に説明すると「言語内で特定の動作に特化した記述方法を自分で実装できる機能」です。
詳しくは、以下の解説記事を参考にしてください。

コード

以下のコードがLazyColumnを使用して、102個のデータを表示したコードになります。

Kotlin

@Composable
fun ScrollList(modifier: Modifier = Modifier) {

    //  テストデータの生成
    val testData = List(100) { "データ項目 ${it + 1}" }

    LazyColumn(
        modifier = modifier.fillMaxSize()
    ) {
        //  1つのデータを表示
        item {
            Text(text = "First Item")
        }

        //  複数のデータを表示
        items(testData) { data ->
            Text(text = data)
        }

        //  1つのデータを表示
        item {
            Text(text = "Last Item")
        }
    }
}