Android Academy · レッスン

Composableとは

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

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

UIを記述する関数を学びます。

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

Composable とは

Jetpack Compose では、XML レイアウトを inflate するのではなく、関数を記述して画面を構築します。composable とは、ユーザーインターフェースの一部を記述する Kotlin 関数です。

このような関数には @Composable アノテーションを付けます。これにより、Compose コンパイラーは、その関数が UI を生成し、他の composable 関数を呼び出せることを認識します。

@Composable アノテーション

関数の上に @Composable を追加すると、Compose の機能を利用できるようになります。関数内では、Text や Column など、他の composable を呼び出せます。

慣例として、composable 関数の名前はクラスと同じように大文字で始めます。これにより、コード内で UI 関数を簡単に見つけられます。

@Composable
fun Greeting() {
    Text("Hello, Compose!")
}

Kotlin で UI を記述する

composable は View オブジェクトを返しません。代わりに、Compose が実行すると副作用として UI を出力します。画面に何を表示するかを記述するだけでよいのです。

これは宣言型のスタイルと呼ばれます。現在のデータに対して UI がどのように見えるかを宣言すると、Compose が描画方法を判断します。

@Composable
fun WelcomeMessage() {
    Text("Welcome back!")
}

Composable は composable を呼び出す

本当の力は、入れ子にできることから生まれます。composable は他の composable を呼び出せるため、小さく再利用可能な部品から複雑な画面を構築できます。

ここでは、親 composable が子 composable を呼び出しています。Compose はそれらを上から下へ実行し、出力された UI を配置します。

@Composable
fun Header() {
    Text("My App")
}

@Composable
fun Screen() {
    Header()
}

戻り値のない関数

ほとんどの composable は Unit を返します。つまり、意味のある値は何も返しません。役割は値を返すことではなく、UI を出力することです。

そのため、結果を受け取るのではなく、画面への効果を目的として composable を呼び出します。通常の関数とは異なりますが、すぐに自然に感じられるようになります。

@Composable
fun Footer() {
    Text("\u00A9 2024 CoddyKit")
}

パラメーターとしてデータを渡す

composable は通常の Kotlin 関数と同じように、パラメーターを受け取れます。これにより、同じ composable で異なるデータを表示できます。

ここでは、Greeting が name を受け取り、それを表示します。データを渡すことで、アプリ全体で柔軟かつ再利用可能な composable になります。

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

Composable を再利用する

composable は関数なので、異なる引数を指定して何度も呼び出せます。呼び出すたびに、それぞれ独立した UI が出力されます。

これにより、同じコードを繰り返さずに済みます。UI を一度記述し、必要な場所で再利用します。

@Composable
fun NameList() {
    Greeting("Ada")
    Greeting("Linus")
}

Composable を配置する場所

Android のアクティビティ内で setContent を使って composable を配置します。このブロックが Compose に画面の制御を引き継ぐ入口です。

setContent の中でトップレベルの composable を呼び出すと、それが出力するすべての要素がアプリの UI になります。

setContent {
    Greeting("World")
}

再コンポジションの基本

composable が読み取るデータが変化すると、Compose は画面を更新するためにその関数を再実行します。この再実行を再コンポジションと呼びます。

UI を手動で更新する必要はありません。データを変更すると、Compose が影響を受ける composable を自動的に再コンポジションします。これにより、画面と状態が常に同期します。

Composable は小さく保つ

各 composable に1つの明確な役割を持たせるのがよい習慣です。小さく焦点を絞った composable は、読みやすく、テストしやすく、再利用もしやすくなります。

関数が大きくなりすぎた場合は、より小さな composable に分割して組み合わせて呼び出します。将来の自分に感謝されるでしょう。

@Composable
fun ProfileHeader(name: String) {
    Text(name)
}

目にするインポート

composable は Compose ライブラリから提供されます。アノテーションには androidx.compose.runtime.Composable、テキストには androidx.compose.material3.Text をインポートすることがよくあります。

通常、Android Studio がこれらのインポートを自動的に追加します。どこから提供されるかを知っておくと、インポートが不足しているときに役立ちます。

import androidx.compose.runtime.Composable
import androidx.compose.material3.Text

理解度チェック

関数を composable にするものを復習しましょう。

まとめ

composable とは、@Composable が付いた Kotlin 関数で、宣言的に UI を記述するものだと学びました。composable はパラメーターを受け取ったり、他の composable を呼び出したりでき、名前は大文字で始めます。

戻り値は Unit で、値を返す代わりに UI を出力します。データが変化すると、Compose はそれらを再コンポジションして画面を更新します。次は、実際のテキストを表示し、Column でビューを縦に積み重ねます。

よくある質問

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

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

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

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

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

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

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

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

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

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

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

← Android Academyに戻る