Compose超初心者のPreview感動体験

Romie

自己紹介

はじめまして！モバイルアプリ開発Gにてmy routeアプリのAndroid側の開発を担当しておりますRomieです。
前職からAndroidの開発を始めて2年経ちましたが、個人開発も含めてレイアウトは全てxml形式で実装してきたためComposeにきちんと触れたのはお恥ずかしながら2023年12月にKINTOテクノロジーズ株式会社(以下KTC)に入社してからになります。
TechBlogに記事を書くのも初めてになります！

こんな人に読んでほしい

本記事は以下が対象です。

Androidの開発超初心者の方
さまざまな事情でxml形式でしかレイアウトを書いたことがなくComposeを全くご存知ない方
実機で動作確認する際なかなか修正した箇所を表示できず困っている方

Previewとの出会い

入社して一番最初Composeのコの字も知らないということで、以下の画面をxml形式からComposeで実装し直す作業を行いました。

About my route画面

早速コードリーディングを始めると、Previewを冠した謎の関数が。

@Preview
@Composable
private fun PreviewAccountCenter() {
    SampleAppTheme {
        AccountCenter()
    }
}

その関数はアカウントセンターのボタンのPreviewを表示するためのものでした。
ですがprivate関数にもかかわらず同じktファイル内のどの箇所でも呼び出されていなかったため「この関数は使用されていないのだろう」と考えPreview周辺のコードは触らずに実装を進めることにしました。
そして無事Compose化の作業を終え、pull requestを出したところcommentが来ました。
「Previewがないので作ってください！」

「呼び出されない関数を作って何の意味があるんだろう」と思いつつ他を真似して画面全体のPreviewを実装し、buildして実機が問題なく動いていることを確認しましたが、この時は実機ばかり見ていました。
Previewは何のためのものなのだとまだボンヤリしつつ何気なくAndroid StudioのSplit画面を見ると、そこには実機で表示されているのと全く同じ画面がAndroid Studioに表示されているではありませんか。
「Previewってそういうことか、関数を呼び出さなくてもSplit画面で表示するためのものなのか！」
公式ドキュメント^[1]にもきちんと書いてありました。

アプリをデバイスやエミュレータにデプロイする必要はありません。幅と高さの制限、フォントのスケーリング、テーマがそれぞれ異なる、特定のコンポーズ可能な関数を複数プレビューできます。アプリの開発を行うとプレビューが更新され、変更内容をすばやく確認できます。

Previewと動作確認

ある日、my routeアプリのルート詳細画面に駅出口からの進行方向セクション8方向の画像と文言を追加する作業を行いました。
実装自体はすぐにできましたが、問題は動作確認でした。8方向分の画像と文言が正しく追加できているかどうか確認するのに実際に動作させていると非常に時間がかかります。
再現手順は以下の通りです。

進行方向セクション表示の再現手順

では、効率的に8方向分全て確認するにはどうすればよいでしょうか。
更にUI表示が崩れていたり違った画像が表示されていたりして修正し最初から確認しようとすると、余計時間がかかります。

ここで活躍するのがPreviewです。
以下の通り実装します。

@Preview
@Composable
fun PreviewWalkRoute() {
    SampleAppTheme {
        Surface {
            WalkRoute(
                routeDetail = RouteDetail(),
                point = Point(
                    pointNo = "0",
                    distance = "200",
                    direction = Point.Direction.FORWARD,
                ),
            )
        }
    }
}