Android Academy · レッスン

初めてのComposable

Q: 「初めてのComposable」で何を学びますか？

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

Composable関数を作成してプレビューします

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

最初の Composable

Composable は、@Composable が付いた Kotlin 関数です。ユーザーの名前を使って挨拶する関数を書いてみましょう。

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

@Composable アノテーション

@Composable アノテーションは、この関数がUI を生成できることと、他の Composable を呼び出せることをコンパイラに伝えます。これがないと、Text、Button、その他の UI 関数を呼び出せません。

命名規則

UI を生成する Composable には、Greeting や ProfileCard のようなPascalCase の名詞を付けます。これはクラスに似た命名です。「値を返す」のではなく「何かを描画する」ことを示します。

パラメータが UI を決める

Composable は、他の関数と同じようにパラメータを受け取ります。パラメータが入力になります。異なる引数を渡すと、異なる UI が生成されます。

@Composable
fun Greeting(name: String) {
    Text(text = "Welcome, $name")
}
// Greeting("Sam") and Greeting("Mia") render different text

Composable の呼び出し

Composable は他の Composable からのみ呼び出せます。呼び出しを入れ子にして画面を構築します。

@Composable
fun WelcomeScreen() {
    Greeting(name = "Ada")
    Greeting(name = "Grace")
}

setContent でホストする

Composable を実際に表示するには、Activity が onCreate 内で setContent { } を呼び出します。このラムダが Compose UI のルートになります。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            WelcomeScreen()
        }
    }
}

Composable の戻り値は Unit

Composable は UI オブジェクトを返さないことに注目してください。戻り値の型は Unit で、呼び出されたときの副作用として UI を生成します。UI は値を返すのではなく、呼び出すことで構築します。

デフォルトパラメータ

Kotlin のデフォルト引数はここでも便利です。パラメータにデフォルト値を設定すると、呼び出し側でその引数を省略できます。

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

Composable の再利用

Composable は関数なので再利用可能です。Greeting を一度定義し、異なる名前を渡してどこからでも呼び出せます。これにより、UI コードの重複を避けられます。

小さく保つ

優れた Composable は小さく、役割が明確です。1つの Composable では、UI の1つの論理的なまとまりを記述します。小さな Composable を組み合わせて、より大きな画面を構築します。

組み合わせる

アクティビティに接続した、最初の完全な Composable を見てみましょう。デバイスで実行すると、「Hello, Compose!」と表示されます。

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

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

確認問題

@Composable アノテーションを付けると、関数は何ができるようになりますか。

まとめ

最初の Composable を作成しました。次の点を覚えておきましょう。

UI 関数には @Composable を付けます。
PascalCase の名前を使います。
パラメータは UI の形を決める入力です。
setContent { } でアクティビティ内に Composable をホストします。

よくある質問

「初めてのComposable」レッスンは無料ですか？

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

「初めてのComposable」で何を学びますか？

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

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

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

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

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

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

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

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

← Android Academyに戻る