0Pricing
Android Academy · レッスン

プレビューとホットリロード

Composeのプレビューで素早く改善します

「プレビューとホットリロード」はCoddyKit上の無料Android Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAndroid Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Android Academyコースには全4レッスンが含まれています。

デザイン時プレビュー

Composeの特に優れた機能の1つが@Previewです。デバイスやエミュレーターでアプリを実行せずに、Android Studio内でコンポーザブルの表示を確認できます。

@Previewアノテーション

@Composable関数の上に@Previewを追加します。Android Studioがデザインペインにその内容を表示します。

@Preview
@Composable
fun GreetingPreview() {
    Greeting(name = "Preview")
}

プレビューにはパラメータ不要

プレビュー関数は引数なしで呼び出せる必要があります。そのため、サンプルデータを渡すラッパーコンポーザブルを作成し、そのラッパーをプレビューします。

@Preview
@Composable
fun CardPreview() {
    ProfileCard(name = "Ada", followers = 42)
}

プレビュー関数の命名

慣例として、プレビュー用のラッパーにはコンポーザブルの名前にPreviewという接尾辞を付けます。たとえばGreetingPreviewです。これにより見つけやすくなり、本番環境では使用しない関数であることもわかります。

プレビューのパラメータ

@Previewには、showBackground、name、widthDpなど、表示を調整するための引数を渡せます。

@Preview(showBackground = true, name = "Light")
@Composable
fun GreetingPreview() {
    Greeting(name = "Hi")
}

showBackground

デフォルトでは、プレビューの背景は透明です。showBackground = trueを渡すと不透明な背景が表示され、デザイン中にテキストを見やすくできます。

複数のプレビュー

1つの関数に複数の@Previewアノテーションを重ねて指定し、異なる設定を横に並べて確認できます。たとえば、幅の小さい表示と大きい表示を比較できます。

@Preview(name = "Phone", widthDp = 360)
@Preview(name = "Tablet", widthDp = 720)
@Composable
fun ScreenPreview() {
    HomeScreen()
}

インタラクティブプレビュー

Android Studioには、プレビュー用のInteractive Modeがあります。アプリをデプロイせずに、プレビュー内でボタンをクリックして状態の変化を発生させることができます。

Live Edit / Hot Reload

Live Editを使うと、コンポーザブル本体への編集がプレビューや実行中のデバイスにほぼ瞬時に反映されます。完全なビルドは必要ありません。これにより、デザインと確認を繰り返すサイクルが大幅に速くなります。

プレビューは無料

プレビュー関数はリリースビルドから除外されるため、プレビューをいくつ追加しても実行時のコストはかかりません。各コンポーザブルを視覚的に記録・テストするために、積極的に活用してください。

完全な例

コンポーザブルとそのプレビューの例を示します。デザインペインを開くと、すぐに表示を確認できます。

@Composable
fun Badge(label: String) {
    Text(text = label, color = Color.White)
}

@Preview(showBackground = true)
@Composable
fun BadgePreview() {
    Badge(label = "NEW")
}

クイックチェック

@Preview関数がパラメータを受け取ってはいけないのはなぜですか？

まとめ

プレビューを使うとComposeの開発が速くなります。

  • 引数を持たないコンポーザブルの上に@Previewを追加します。
  • showBackgroundやwidthDpなどのオプションを使用します。
  • 複数のプレビューを重ねて指定し、高速に反復するためにInteractive ModeとLive Editを使用します。

よくある質問

「プレビューとホットリロード」レッスンは無料ですか？

はい。「プレビューとホットリロード」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Android Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Android Academyコースには全4レッスンが含まれています。

「プレビューとホットリロード」で何を学びますか？

Composeのプレビューで素早く改善します ブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Android Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのAndroid Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「プレビューとホットリロード」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAndroid Academyレッスンでコードを書いて実行できますか？

はい。すべてのAndroid Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Jetpack Composeとは？
  2. 初めてのComposable
  3. Text、Image、Button
  4. プレビューとホットリロード
← Android Academyに戻る