---
title: "Jetpack Compose"
description: "Jetpack Compose で作った Android アプリに Tanrei を追加します。"
url: "https://tanrei.chnotchy.com/ja/getting-started/compose/"
last_updated: 2026-10-20T01:38:40.000Z
---

# Jetpack Compose

> Jetpack Compose で作った Android アプリに Tanrei を追加します。

Compose 向けのライブラリは、コンポーザブル、`TanreiTheme`、生成されたトークンのオブジェクトを提供します。Material のコンポーネントライブラリではなく Compose Foundation に依存しているので、アプリに 2 つ目のデザインシステムを持ち込むことはありません。

> [!WARNING]
> **まだ公開していません**
>
> `io.github.chnotchy:tanrei` はまだ Maven Central にありません。プラットフォームは現在の仕様に追従してから公開し、それまで Jetpack Compose の CI は止めてあります。下の「ソースから」は [chnotchy/tanrei](https://github.com/chnotchy/tanrei) からパッケージを加える方法、「公開後」は公開されてからの導入方法です。

## インストール

### ソースから

> [!WARNING]
> **現在はビルドできません**
>
> Compose のライブラリは、現在の仕様とトークンに追従していません。ソースは以前の版の生成されたトークンコードに合わせて書かれていて、現在のコードではコンパイルできません。追従するまで CI は止めてあり、[ステータスページ](https://tanrei.chnotchy.com/ja/status/)ではそのコンポーネントを_追従待ち_としています。以下はアプリに追加する手順で、ライブラリが追従すれば動きます。

リポジトリをアプリの隣にクローンし、その Gradle ビルドをインクルードします。ライブラリはそのビルドの中でプロジェクト `:tanrei` になっています。

```kotlin
// settings.gradle.kts
includeBuild("../tanrei/packages/compose") {
  dependencySubstitution {
    substitute(module("io.github.chnotchy:tanrei")).using(project(":tanrei"))
  }
}
```

```kotlin
// build.gradle.kts
dependencies {
  implementation("io.github.chnotchy:tanrei")
}
```

### 公開後

```kotlin
// build.gradle.kts
dependencies {
  implementation("io.github.chnotchy:tanrei:<version>")
}
```

## 使い方

ルートの近くで一度だけ、コンテンツを `TanreiTheme` で包みます。

```kotlin
import io.github.chnotchy.tanrei.components.TanreiButton
import io.github.chnotchy.tanrei.theme.TanreiTheme
import io.github.chnotchy.tanrei.tokens.TanreiButtonVariant

@Composable
fun DeployScreen(isDeploying: Boolean, onDeploy: () -> Unit) {
  TanreiTheme {
    TanreiButton(
      text = "デプロイ",
      onClick = onDeploy,
      variant = TanreiButtonVariant.Filled,
      enabled = !isDeploying,
    )
  }
}
```

Compose の慣習は肯定形のフラグ `enabled` なので、Tanrei もそれを使います。仕様の `disabled` プロパティは、その逆に対応します。テキストのラベル以上のものが必要なときは、`content` ラムダを受け取るスロット版のオーバーロードを使います。

## テーマとコントラスト

`TanreiTheme` は、既定ではシステムのダークテーマと、システムのコントラスト設定に従います。どちらも固定できます。

```kotlin
TanreiTheme(theme = TanreiThemeMode.Dark, contrast = TanreiContrast.High) {
  App()
}
```

## フォント

既定では、タイプスケールはプラットフォームの既定のフォントファミリーに解決されます。アプリのフォントリソースにある Inter（および Noto Sans JP、Roboto Mono）を使うには、自分の `TanreiFontFamilies` を `TanreiTheme` に渡します。テキストスタイルは階層で名付けられています（`TanreiTheme.tokens.typescale.heading2`、`.body`、`.label`。`.toTextStyle()` で Compose の `TextStyle` に変換できます）。`TanreiTheme.tokens.typescale.heading1.emphasized()` は、同じスタイルを、その太さに見出しのファミリーの強調のステップを足した太さにしたものです（コンポジションの外では `emphasized(system.typescale.emphasis)`）。