@Composable関数の構造
Composableを読み、特別な点を見つけます。
「@Composable関数の構造」はCoddyKit上の無料Jetpack Compose Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJetpack Compose Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Jetpack Compose Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
What Is a Composable?
A Composable is just a Kotlin function that describes a piece of UI. Call it, and Compose draws that UI on screen. It is the building block of everything. 🧱
The @Composable Annotation
The magic marker is @Composable above the function. It tells the Compose compiler this function can emit UI and may be recomposed when data changes.
@Composable
fun Greeting() {
Text("Hello!")
}Name It Like a UI Piece
By convention, Composable names use PascalCase nouns like Greeting or ProfileCard, not verbs. The name describes the thing on screen, not an action.
It Returns Unit
A Composable usually returns nothing (Unit). Instead of returning UI, it emits it by calling other Composables inside its body. The side effect is the drawing.
Built-In Composables
Compose ships ready-made Composables like Text, Button, Image, and Icon. You combine these to build your own, so you rarely start from a blank canvas.
@Composable
fun Welcome() {
Text("Welcome to Compose")
}Parameters Pass In Data
Composables take parameters just like any function. Pass data in, and the UI reflects it. This is how the same component shows different content.
@Composable
fun Greeting(name: String) {
Text("Hello, " + name)
}The Modifier Parameter
Most Composables accept a modifier to control size, padding, and layout. By convention it is the first optional parameter, ready for you to customize.
Composables Call Composables
A Composable can only be called from another Composable. This rule lets Compose track the tree of UI and recompose the right parts when state changes.
Keep Them Small
Aim for small, focused Composables that do one thing. Tiny pieces are easier to reuse, preview, and combine into bigger screens later on.
Prefer No Side Effects
A good Composable is predictable: same inputs, same UI. Avoid surprises like network calls in the body, since Compose may run it many times.
Compose Builds a Tree
As Composables call each other, they form a UI tree. Compose walks this tree to draw the screen and to update only the branches that changed.
Quick Check
Let's verify what marks a function as a UI builder.
Recap: The Composable
A Composable is a Kotlin function with @Composable that emits UI, takes parameters, accepts a modifier, and calls other Composables to build a tree.
よくある質問
「@Composable関数の構造」レッスンは無料ですか？
はい。「@Composable関数の構造」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Jetpack Compose Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Jetpack Compose Academyコースには全4レッスンが含まれています。
「@Composable関数の構造」で何を学びますか？
Composableを読み、特別な点を見つけます。 ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Jetpack Compose Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJetpack Compose Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「@Composable関数の構造」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJetpack Compose Academyレッスンでコードを書いて実行できますか？
はい。すべてのJetpack Compose Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。