Android Academy · レッスン

Jetpack Composeとは？

Q: 「Jetpack Composeとは？」で何を学びますか？

Androidの宣言的UIを理解します ブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Androidの宣言的UIを理解します

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

Jetpack Compose とは

Jetpack Compose は、ネイティブ UI を構築するための Android の最新ツールキットです。XML レイアウトファイルを書く代わりに、UI を Kotlin コードで直接記述します。

Compose は宣言的です。ある状態で画面がどう見えるべきかを指定すると、どのように描画して更新するかは Compose が判断します。

従来の方法：XML ビュー

従来、Android の画面には次の2つの要素が必要でした。

ウィジェットを記述する XML レイアウトファイル
findViewById でビューを取得し、変更する Kotlin/Java コード

XML とコードの同期を保つ作業は面倒で、間違いも起こりやすいものでした。

<!-- res/layout/activity_main.xml -->
<TextView
    android:id="@+id/greeting"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

命令型と宣言型

XML ビューでは命令型コードを書きます。ビューを取得し、手順に沿って変更します。

Compose では宣言型コードを書きます。データに応じた最終的な結果を記述します。データが変わると、Compose が必要な部分を自動的に再描画します。

// Imperative (old views)
val tv = findViewById<TextView>(R.id.greeting)
tv.text = "Hello"
tv.visibility = View.VISIBLE

Composable 関数

Compose の基本単位はComposable 関数です。これは @Composable が付いた通常の Kotlin 関数で、UI を生成します。

Composable は他の Composable を呼び出せるため、小さく再利用可能な部品から画面を構築できます。

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

findViewById は不要

Compose には findViewById がなく、ビュー ID もありません。UI は関数呼び出しそのものです。異なるテキストを表示するには、別の引数を渡すだけで、Compose に再コンポーズさせることができます。

@Composable
fun Screen() {
    Greeting(name = "Ada")
    Greeting(name = "Linus")
}

状態の関数としての UI

中心となる考え方は、UI = f(state) です。画面は、現在の状態を渡した Composable の出力です。状態を変更すると、同じ関数が新しい UI を生成します。

これにより、UI の動作を予測しやすくなり、理解もしやすくなります。

すべて Kotlin

Composable は Kotlin 関数なので、ループ、条件分岐、変数を使って UI を構築できます。特別なテンプレート言語は必要ありません。

@Composable
fun Items(names: List<String>) {
    for (n in names) {
        Text(text = n)
    }
}

ボイラープレートの削減

Compose は大量の橋渡しコードをなくします。XML のインフレーションも、単純なリスト用のアダプターも、レイアウトとロジックを手動で接続する処理も必要ありません。

その結果、ファイル数が減り、バグも減ります。

ビューとの相互運用

アプリ全体を書き直す必要はありません。Compose は従来の View システムと相互運用できます。既存の XML 画面に Compose を埋め込むことも、Compose に View を埋め込むこともできます。

これにより、チームは段階的に移行できます。

必要なもの

Compose を使用するには、次のものが必要です。

新しいバージョンの Android Studio
Gradle ファイル内の Compose 依存関係
Composable をホストするために setContent { } を呼び出す Activity

小さな画面

完全な最小構成の Compose 画面を見てみましょう。setContent は、Android の Activity と Compose の世界をつなぐ橋渡しです。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting(name = "World")
        }
    }
}

確認問題

Jetpack Compose の説明として最も適切なものはどれですか。

まとめ

Jetpack Compose は、Kotlin を中心とした宣言型 UI ツールキットであることを学びました。主なポイントは次のとおりです。

UI は @Composable 関数から構築します。
XML と findViewById は必要ありません。
UI = f(state) — 状態を変更すると、Compose が再描画します。

よくある質問

「Jetpack Composeとは？」レッスンは無料ですか？

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

「Jetpack Composeとは？」で何を学びますか？

Androidの宣言的UIを理解しますブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Jetpack Composeとは？」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Android Academyに戻る