---
title: "React"
description: "Tanrei の Web Components から生成した、型付きの React コンポーネント。"
url: "https://tanrei.chnotchy.com/ja/getting-started/react/"
last_updated: 2026-10-23T21:16:19.000Z
---

# React

> Tanrei の Web Components から生成した、型付きの React コンポーネント。

`@tanrei/react` は、`@tanrei/web` の各カスタム要素を、型付きのプロパティとイベントハンドラーを持つ本物の React コンポーネントでラップします。ラッパーはカスタム要素のマニフェストから生成されるので、ラップしている要素と常に一致します。

> [!WARNING]
> **プレリリース**
>
> `0.1.0-next.0` を npm の dist-tag `next` で公開しています。`0.1.0` までは `@tanrei/react@next`、`@tanrei/web@next` をインストールしてください。0.x のプレリリースのあいだは後方互換を保ちません。どのプレリリースも、先に非推奨の期間を置くことなく何でも壊すことがあり、何を壊したかはその changeset に書いてあります。

## インストール

React 18 以降が必要です。

### npm から

```sh
npm install @tanrei/react @tanrei/web
```

### ソースから

`main` のソースを使うには、[Web のパッケージ](https://tanrei.chnotchy.com/ja/getting-started/web/)と同じく（Git、Node 22.22 以降、pnpm 12）、リポジトリのクローンで 2 つのパッケージをビルドしてパックします。

```sh
git clone https://github.com/chnotchy/tanrei.git
cd tanrei
pnpm install
pnpm --filter @tanrei/web --filter @tanrei/react build
pnpm --filter @tanrei/web --filter @tanrei/react pack --pack-destination ../tanrei-packages
```

次に、パックした 2 つのファイルを 1 つのコマンドでプロジェクトにインストールします。こうすると、React のパッケージが隣にある Web のパッケージを見つけられます。

```sh
npm install path/to/tanrei-packages/tanrei-web-*.tgz path/to/tanrei-packages/tanrei-react-*.tgz
```

## 使い方

コンポーネントが描画される前に、スタイルシートを一度だけ読み込みます。`tanrei.css` は、ページのベース、トークン、パッケージのほかのすべてのスタイルシートを 1 つにまとめたファイルです。1 つずつ読み込む方法は [Web のガイド](https://tanrei.chnotchy.com/ja/getting-started/web/)を参照してください。

```tsx
import '@tanrei/web/tanrei.css';
import '@tanrei/web/words/en';
import { Button } from '@tanrei/react';

export function Toolbar({ onDeploy }: { onDeploy: () => void }) {
  return (
    <>
      <Button variant="filled" onClick={onDeploy}>
        デプロイ
      </Button>
      <Button variant="text" size="small" disabled>
        ロールバック
      </Button>
    </>
  );
}
```

プロパティの名前は、要素の属性と同じです（`variant`、`size`、`disabled`）。イベントは、通常の React のハンドラーです。要素が独自に出すイベントは、React 自身のイベントと同じく、`on` にイベント名をキャメルケースで続けた名前で受け取ります（`onKeyDown` と同じ形）。ナビゲーションドロワーが出す `expandedchange` は `onExpandedChange` です。

`@tanrei/web/words/en` は、コンポーネントが描いたり読み上げたりするラベルとメッセージ（必須のタグや閉じるボタンの名前など）のすべてに、平易な英語の言葉を渡します。使わずに、`@tanrei/react` の `setWords()` で自分の言葉を渡してもかまいません。[言葉](https://tanrei.chnotchy.com/ja/foundations/words/)を参照してください。

## デザインシステムごとのエントリー

このパッケージには、Tanrei が出荷するデザインシステムごとにエントリーがあります。エディターが候補に出し、型チェックが通すのは、あなたのシステムにあるものだけです。

| エントリー | エクスポートするもの |
| --- | --- |
| `@tanrei/react` | 既定のシステム Tanrei のコンポーネント。m3-like レイヤーにある FAB メニューと、Tanrei が持たないセグメントボタンはここにありません。Tanrei が持たないバリアントも、プロパティの値になりません。`<TextField variant="outlined">` は型チェックを通りません |
| `@tanrei/react/m3-like`、`@tanrei/react/m3-expressive-like`、`@tanrei/react/cupertino` | そのプリセットのコンポーネントと、そのバリアント |
| `@tanrei/react/advanced` | 上級者向けのコンポーネント、つまりほかのコンポーネントの部品です。`TextInput`、`ModalLayer`、`Combobox` など。プロダクトでは、ふつうはそれから作られたコンポーネント（`TextField`、`Dialog`、`ComboboxField`）を書きます |
| `@tanrei/react/all` | どのシステムにあるかを問わず、すべてのコンポーネント。独自のデザインシステムで使うときと、デザインシステムを作るときのためのものです |

```tsx
import '@tanrei/web/tokens.css';
import '@tanrei/web/systems/m3-like.css';
import { FabMenu, FabMenuItem, TextField } from '@tanrei/react/m3-like';
```

コンポーネントはどのエントリーでも同じものなので、バンドラーが残すのは、インポートしたものだけです。どのエントリーも `setWords`、`missingWords` と `TanreiEvent` 型をエクスポートします。エントリーは、各システムのコンポーネント一覧（`@tanrei/web/systems/<id>.components.json`）から生成されます。この一覧には、各コンポーネントのエントリー（`react.import`）が書かれています。`tanrei build` が書く独自のシステムの一覧では、それは `@tanrei/react/all` です。

## サーバーレンダリング

コンポーネントは、サーバーではカスタム要素のタグをレンダリングし、ブラウザーでアップグレードされます。サーバーとクライアントが分かれているフレームワークでは、使うエントリーをクライアントコンポーネントからインポートして、要素の定義がブラウザーで登録されるようにしてください。

> [!NOTE]
> **ノート**
>
> テーマ、コントラスト、トークン、フォントは、[Web のガイド](https://tanrei.chnotchy.com/ja/getting-started/web/)に書かれているとおりに動作します。React のパッケージが独自に加えるものはありません。