R

ReflexKR

Reflex公式ドキュメント

触って覚えるReflexの基本

·

講座の概要

1

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

2

出たり消えたり:条件付きレンダリング

3

リストを描く:rx.foreach

4

なぜifが使えない?コンパイル時と実行時

5

見た目を整える:コンポーネント、props、スタイル

6

アプリとページ、そしてフルーツバスケット

触って覚えるReflexの基本
4限目

時間 0:18–0:28

なぜifが使えない?コンパイル時と実行時

2限目ではifの代わりにrx.condを、3限目ではforの代わりにrx.foreachを使いました。Pythonなのに、なぜPythonの文法をそのまま使えないのでしょうか?この回でその理由がわかると、Reflexで出会うエラーの大半がなぜ起きるのかを一度に理解できます。

4-1. コードが実行される2つのタイミング (3分)

Reflexアプリのコードは、異なる2つのタイミングで実行されます。

コンパイル時実行時
いつアプリの起動時に一度アプリが動いている間ずっと
何が画面の関数(show_login、render_item …)イベントハンドラ(increment、toggle_login …)
どこでPythonのコードがJavaScript(React)のコードに変換されるサーバー上のPython
Stateの値まだわからない実際の値がある

画面の関数は、アプリの起動時にJavaScriptへ変換されてブラウザに送られます。変換する時点では、どのユーザーが何を押すかはまだわからないので、画面の関数の中のLoginState.logged_inは実際のTrue/Falseではなく、「あとでブラウザで値が入る場所」です。この場所こそがVarです。

一方、イベントハンドラは変換されず、サーバー上でPythonのまま実行されます。そのため、ハンドラの中ではどんなPythonのコードやライブラリでも使えます。

4-2. ハンドラの中は本物のPython (2分)

下のハンドラはifを使い、State外に定義した関数も呼び出しています。実行時にサーバーで動くので、問題ありません。

def check_even(num: int):
    return num % 2 == 0


class MyState3(rx.State):
    count: int = 0
    text: str = "even"

    @rx.event
    def increment(self):
        # Use any Python code within state.
        # Even reference functions defined outside the state.
        if check_even(self.count):
            self.text = "even"
        else:
            self.text = "odd"
        self.count += 1


def count_and_check():
    return rx.box(
        rx.heading(MyState3.text, as_="h2"),
        rx.button("Increment", on_click=MyState3.increment),
    )

localhost:3000

操作してみよう

even

押すたびに、ハンドラ内のPythonのifがeven/oddを選びます。

画面の関数の中でもPythonは使えます。ただし、使えるのはコンパイル時にすでに値が決まっているもの(state varを使わないもの)だけです。下のrange(5)とcheck_even(i)は、アプリの起動時に計算が終わります。

def show_numbers():
    return rx.vstack(*[rx.text(f"{i} is {'even' if check_even(i) else 'odd'}") for i in range(5)])

localhost:3000

実行画面

0 is even

1 is odd

2 is even

3 is odd

4 is even

コンパイル時に計算が終わった5行です。この値はアプリの実行中に変わることはありません。

4-3. 画面のコードでできない3つのこと (2分)

state varはコンパイル時には値がわからないので、画面の関数の中で次のコードはすべてエラーになります。

ifでVarの値を判定する:値が真か偽か、まだわかりません。propsの値を選ぶ場合も同じです。

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


def count_if_even():
    return rx.box(
        rx.heading("Count: ", as_="h2"),
        # This will raise a compile error, as BadState.count is a var and not known at compile time.
        rx.text(BadState.count if BadState.count % 2 == 0 else "Odd"),
        # Using an if statement with a var as a prop will NOT work either.
        rx.text("hello", color="red" if BadState.count % 2 == 0 else "blue"),
    )

forでリストのVarを回す:項目がいくつあるか、まだわかりません。

class BadState(rx.State):
    items: list[str] = ["Apple", "Banana", "Cherry"]


def loop_over_list():
    return rx.box(
        # This will raise a compile error, as BadState.items is a list and not known at compile time.
        *[rx.text(item) for item in BadState.items]
    )

len()のようなPythonの関数にVarを渡す:文字数を数えるための文字列が、まだありません。

class BadTextState(rx.State):
    text: str = "Hello world"


def format_text():
    return rx.box(
        # Python operations such as `len` will not work on state vars.
        rx.text(len(BadTextState.text)),
    )

4-4. 解決策:Var演算 (3分)

では、画面で「偶数ならEven、奇数ならOdd」と表示するにはどうすればよいでしょうか?Reflexには、Varに対して使えるVar演算が用意されています。%、==、>のような演算子をVarに使うと、計算結果もVarになり、実際の計算はブラウザで値が入ったあとに行われます。

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

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


def count_if_even():
    return rx.box(
        rx.heading("Count: ", CountEvenState.count, as_="h2"),
        rx.cond(
            # Here we use the `%` and `==` var operations to check if the count is even.
            CountEvenState.count % 2 == 0,
            rx.text("Even"),
            rx.text("Odd"),
        ),
        rx.button("Increment", on_click=CountEvenState.increment),
    )

localhost:3000

操作してみよう

Count: 0

Even

Var演算 % と == の結果をrx.condが受け取り、Even/Oddを選びます。

これで、1〜3限目で使った道具がなぜ必要だったのかが、1つの表にまとまります。

やりたいこと画面のコードでは使えない代わりに使うもの
条件に応じて違う画面を出すif / elserx.cond(条件, 真のとき, 偽のとき)
リストを繰り返すfor、リスト内包表記rx.foreach(リスト, 関数)
長さを求めるlen(x)x.length()
計算・比較Pythonの関数にVarを渡す%、==、>などのVar演算
複雑な計算画面の関数の中のPythonイベントハンドラで計算してStateに保存

ポイント — 迷ったときは「このコードはいつ実行されるの?」と自問してみてください。画面の関数の中ならコンパイル時なので、Varはまだ空の場所です。ハンドラの中なら実行時なので、本物の値が入っています。

練習問題

  1. 4-3のformat_textを直して、文字数が表示されるようにしてみましょう。ヒント:BadTextState.text.length()。
  2. count_if_evenで、countが10以上になったら「Big!」が表示されるようにしてみましょう。ヒント:rx.cond(CountEvenState.count >= 10, ...)。
  3. MyState3のようにハンドラの中で計算する方法と、CountEvenStateのようにVar演算を使う方法を比べてみましょう。State変数が少なくて済むのはどちらでしょうか?

この回のチェックリスト

  • 画面の関数とイベントハンドラが、それぞれいつ、どこで実行されるかを説明できる。
  • 画面のコードでstate varにif、for、len()を使えない理由を説明できる。
  • Var演算とrx.cond、rx.foreachで同じことを実現する方法がわかる。

← 前へ

3限目 · リストを描く:rx.foreach

次へ →

5限目 · 見た目を整える:コンポーネント、props、スタイル

新しい授業・講座のお知らせを受け取る

この講座に授業が追加されたり、続きの講座が公開されたりしたらメールでお知らせします。

収集項目:メールアドレス・目的:この講座の新しい授業・公開のお知らせ・保有期間:解除のご依頼まで。他の目的には使わず、第三者にも提供しません。お知らせメールに返信いただければすぐに削除します。

質問と回答

この回について気になることを書き込んでください。すべての言語のページの質問がここに集まります。

リンクや書式なしで、そのままの文字で表示されます。

R

ReflexKR

触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。

ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する

アフィリエイトと支援について
한국어English日本語简体中文EspañolDeutsch

© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0

Built with Reflex