StateとVar：データに画面を描かせる

この時限では、顧客データをStateに置き、テーブルとバッジがそのデータをもとに描画されるようにします。Reflexでいちばん重要な概念であるVarを学ぶ時間です。

3-1. データの形を決める：dataclass (5分)

import dataclasses


@dataclasses.dataclass
class User:
    name: str
    email: str
    gender: str

• 顧客1人がどんなフィールドを持つかを決めた「設計図」です。User(name="...", email="...", gender="...")のように作ります。
• 辞書（{"name": ...}）を使ってもかまいませんが、dataclassにしておくと、フィールド名の打ち間違いをエディタが指摘してくれますし、画面のコードでuser.nameのようにドットでアクセスできます。

3-2. Stateクラス (10分)

class State(rx.State):
    users: list[User] = [
        User(name="Danilo Sousa", email="danilo@example.com", gender="Male"),
        User(name="Zahra Ambessa", email="zahra@example.com", gender="Female"),
    ]

• rx.Stateを継承したクラスのクラス変数が、状態変数（state var）になります。ここに書いた値は初期値です。
• 型アノテーション（: list[User]）は必須です。Reflexは型を見て、ブラウザに送る形式（JSON）や使えるメソッドを決めます。
• Stateはサーバーのメモリ上に、ブラウザのセッションごとに別々に存在します。自分が追加した顧客は他の人には見えず、データベースではないので永続的に保存されることもありません。永続化は6限目の発展課題で扱います。

3-3. Var：「値」ではなく「画面に送る式」 (15分)

1限目で「画面の関数はアプリの起動時に一度だけ実行される」と説明しました。では、画面の関数の中でState.usersを使うと何が得られるのでしょうか。実際に出力してみるとこうなります。

>>> type(State.users).__name__
'ArrayCastedVar'
>>> print(State.users.length())
reflex___state____state__tutorial_261019___tutorial_261019____state.users_rx_state_.length

出てくるのは顧客のリストではなく、JavaScriptの式です。これがVarです。画面の関数が実行される時点では、まだユーザーもデータも存在しません。そのため、「あとでブラウザでこの値を読み取ってね」という約束だけを作っておくのです。

そのため、Pythonの文法の一部はVarに対して使えません。Reflex 0.10で実際に出るエラーと、その代わりの書き方は次のとおりです。

逆に、Var同士の比較や算術（State.page + 1）、f文字列にVarを埋め込むこと（f"合計 {State.total}人"）は問題なく使えます。演算そのものがJavaScriptの式に変換されるからです。

では、ヘッダーの仮のバッジを実際の顧客数に置き換えましょう。

rx.badge(
    State.users.length(),     # "2"の代わりにVar
    variant="soft",
    color_scheme="gray",
    radius="full",
),

3-4. 1行を描く関数：show_user (5分)

def show_user(user: User):
    return rx.table.row(
        rx.table.cell(user.name),
        rx.table.cell(user.email),
        rx.table.cell(user.gender),
        style={"_hover": {"bg": rx.color("gray", 3)}},
        align="center",
    )

• 型はUserと書きましたが、実際に渡されるのはUserを指すVarです。user.nameも「この行の顧客のnameを読み取れ」という式になります。dataclassでフィールドを宣言してあるおかげで、ドットでアクセスできます。
• style={"_hover": {...}}は、マウスを乗せたときのスタイルです。_hoverや_focusのように_で始まるキーは、CSSの:hoverのような状態セレクタにあたります。

3-5. テーブルとrx.foreach (10分)

ヘッダーの下、カードの中の2番目の子要素としてテーブルを入れます。

rx.box(
    rx.table.root(
        rx.table.header(
            rx.table.row(
                rx.table.column_header_cell("Name"),
                rx.table.column_header_cell("Email"),
                rx.table.column_header_cell("Gender"),
            )
        ),
        rx.table.body(rx.foreach(State.users, show_user)),
        variant="ghost",
        size="3",
        width="100%",
    ),
    overflow_x="auto",                                   # 狭い画面では横スクロール
    width="100%",
    border_top=f"1px solid {rx.color('slate', 4)}",
    border_bottom=f"1px solid {rx.color('slate', 4)}",
    padding_x="12px",
),

• テーブルの構造：root > header（見出し行）＋body（データ行）> row > cell。HTMLの<table>、<thead>、<tbody>、<tr>、<td>に対応します。
• rx.foreach(リストのVar, 関数)は、ブラウザ側でリストの各要素に関数を適用します。関数は呼び出さずに名前だけを渡します（show_user()ではなくshow_user）。
• 一方、見出し行のような固定のリストにはPythonのforを使ってもかまいません。コンパイル時に値が決まっているからです。例：*[rx.table.column_header_cell(h) for h in ["Name", "Email", "Gender"]]

ブラウザで確認 — カードの中に顧客2人分のテーブルができ、バッジの2はState.users.length()から来るようになりました。行にマウスを乗せると、背景が薄いグレーに変わります。

演習課題

1. 初期値に顧客をもう1人追加して、バッジの数字が3に変わるか確認してみましょう。
2. rx.condを使って、顧客が0人のときはテーブルの代わりに「まだ顧客がいません」と表示してみましょう。ヒント：rx.cond(State.users.length() > 0, テーブル, rx.text(...))
3. わざとlen(State.users)と書いて、エラーメッセージを実際に読んでみましょう。

チェックポイント

• テーブルに顧客2人が表示され、バッジが2を示している。
• Varとは何か、なぜlen/if/forが使えないのかを説明できる。
• rx.foreachに関数を呼び出さずに渡す理由がわかる。