Jetpack Compose Academy · レッスン

任意のComposableでclickableを使う

ボタン以外の要素もタップ可能にします。

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

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Anything Can Be Tappable

Sometimes you want a whole card or row to respond to taps, not a button. The clickable modifier makes any composable react. 👆

The clickable Modifier

Add Modifier.clickable to any element and pass an onClick lambda. The element now handles taps just like a button.

Text(
    "Open profile",
    modifier = Modifier.clickable { open() }
)

Clicks Get a Ripple

By default clickable adds a Material ripple, giving instant visual feedback so the user sees their tap registered.

Box(Modifier.clickable { toggle() }) {
    Text("Tap this box")
}

Make Whole Cards Tappable

The pattern shines on list items: put clickable on the row's container so a tap anywhere opens the detail screen.

Row(Modifier.clickable { openItem(id) }) {
    Text(item.title)
}

Add a Content Description

For accessibility, pass an onClickLabel describing what the tap does, so screen readers announce the action clearly.

Modifier.clickable(
    onClickLabel = "Open profile"
) { open() }

Order in the Chain Matters

Place clickable before padding to make the padded area tappable, or after it to limit taps to the inner content.

Modifier
    .clickable { go() }
    .padding(16.dp)

Toggle State on Tap

Pair clickable with state to build custom toggles, like an expandable card that grows when the header is tapped.

Modifier.clickable { expanded = !expanded }

Disable a clickable

The clickable modifier also takes an enabled flag. Set it false and the element stops responding, just like a disabled button.

Modifier.clickable(enabled = isReady) { next() }

combinedClickable for More

Need long press or double tap too? Reach for combinedClickable, which exposes onLongClick and onDoubleClick alongside onClick.

Modifier.combinedClickable(
    onClick = { open() },
    onLongClick = { showMenu() }
)

Buttons vs clickable

Use a real Button for clear primary actions; reach for clickable when an arbitrary surface, like a card, needs to be tappable.

Keep Targets Big Enough

Small text with clickable can be hard to hit. Give it padding so the touch target stays at least about 48dp tall.

Quick Check

You want a tap anywhere on a list row to open its detail screen.

Recap: Tap Anything

You learned the clickable modifier turns any composable tappable, with ripples, labels, and an enabled flag. Cards and rows can react too. 🎉

よくある質問

「任意のComposableでclickableを使う」レッスンは無料ですか？

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

「任意のComposableでclickableを使う」で何を学びますか？

ボタン以外の要素もタップ可能にします。ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「任意のComposableでclickableを使う」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Jetpack Compose Academyに戻る