押すと変わる：Stateとイベント

説明の前に、まずは押してみましょう。下のボタンを押すと数字が1ずつ増えます。この回を終えるころには、この10行ほどのコードがどう動いているのかを説明できるようになります。

import reflex as rx


class CounterState(rx.State):
    count: int = 0

    @rx.event
    def increment(self):
        self.count += 1


def counter_increment():
    return rx.hstack(
        rx.heading(CounterState.count, as_="h2"),
        rx.button("Increment", on_click=CounterState.increment),
    )

コードは3つの部分に分かれています。

ボタンを押すとincrementがサーバーで実行され、countが変わると、Reflexがその値を使っている部分の画面だけを自動で描き直します。画面を直接書き換えるコードは1行もありません。

1-1. State：変化するデータの置き場所 (2分)

アプリには、時間とともに変化するデータがあります。カウンターの数字、ログインしているかどうか、カートの中身などです。Reflexでは、こうしたデータをStateクラスに入れておきます。

• rx.Stateを継承したクラスを作り、その中に変数を書きます。この変数をVar（state var）と呼びます。
• Varには必ず型を書き（count: int）、初期値を与えることもできます（= 0）。

画面でVarを使うときは、MyState.countのようにクラス名で参照します。子要素として入れても、propsの値として渡しても構いません。

class MyState(rx.State):
    count: int = 0
    color: str = "red"


def counter():
    return rx.hstack(
        # The heading `color` prop is set to the `color` var in MyState.
        rx.heading("Count: ", as_="h2", color=MyState.color),
        # The `count` var in `MyState` is passed as a child to the heading component.
        rx.heading(MyState.count, as_="h2"),
    )

同じVarを複数のコンポーネントで使っても大丈夫です。値が変わると、そのVarを使っている箇所がすべて一緒に変わります。

1-2. イベントハンドラと@rx.event (2分)

State内に定義したメソッドのうち、データを変更するものをイベントハンドラと呼びます。on_clickのようにコンポーネントが持つ特別なpropsをイベントトリガーと呼び、トリガーとハンドラをつなぐと、画面がユーザーの操作に反応するようになります。

1. ユーザーがボタンを押します（イベントトリガーが発生）。
2. つながっているイベントハンドラがサーバーで実行され、Stateを変更します。
3. Reflexが変更後のStateをブラウザに送り、画面が描き直されます。

ハンドラの上の@rx.eventは、必ず付けることをおすすめします。このデコレーターがあると、エディタや型チェッカーが「このハンドラに引数をいくつ、どんな型で渡すべきか」を確認してくれるので、ミスを事前に防げます。

1-3. 引数を受け取るイベントハンドラ (2分)

ハンドラも普通の関数と同じように引数を受け取れます。1ずつ増やすボタンと5ずつ増やすボタンを、1つのハンドラで作ってみましょう。

class CounterState2(rx.State):
    count: int = 0

    @rx.event
    def increment(self, amount: int):
        self.count += amount


def counter_variable():
    return rx.hstack(
        rx.heading(CounterState2.count, as_="h2"),
        rx.button("Increment by 1", on_click=lambda: CounterState2.increment(1)),
        rx.button("Increment by 5", on_click=lambda: CounterState2.increment(5)),
    )

• この例ではlambda: CounterState2.increment(1)のようにlambdaで包んで、「押されたら1を渡して呼ぶ」という意図をはっきりさせています。
• on_click=CounterState2.increment(1)のように直接書いても、まったく同じように動きます。このコードはハンドラをその場で実行するのではなく、「押されたらamount=1で実行する」というイベント情報を作っておくだけです。ハンドラのコードは、ボタンが押されたときにサーバーで実行されます。

1-4. トリガーが値を渡してくれる場合：on_blur (2分)

on_clickはハンドラに何も値を渡しませんが、値を渡してくれるトリガーもあります。on_blurは、入力欄からフォーカスが外れたとき（ほかの場所をクリックしたり、Tabキーを押したりしたとき）に、入力された文字列をハンドラに渡します。

class TextState(rx.State):
    text: str = ""

    @rx.event
    def update_text(self, new_text: str):
        self.text = new_text


def text_input():
    return rx.vstack(
        rx.heading(TextState.text, as_="h2"),
        rx.input(default_value=TextState.text, on_blur=TextState.update_text),
    )

練習問題

1. CounterStateにdecrementハンドラを追加し、数字を1ずつ減らすボタンを作ってみましょう。
2. counter_variableに「Reset」ボタンを追加して、countを0に戻してみましょう。引数を受け取るハンドラで作れるでしょうか？
3. on_blurの代わりにon_changeを使ってみましょう。文字を入力するたびに見出しが変わります。

この回のチェックリスト

• State、Var、イベントハンドラ、イベントトリガーがそれぞれ何かを説明できる。
• 画面でVarをクラス名.変数名で参照できる。
• on_clickに引数付きでハンドラをつないでも、ハンドラがすぐには実行されない理由がわかる。