最後の回です。これまで作ってきた画面の関数を実際のURLに結びつける方法を見たあと、1〜5限目で学んだことをすべて組み合わせて、小さなアプリを1つ完成させます。
Reflexアプリはrx.Appで作り、画面の関数をadd_pageでURL（route）に結びつけます。
def index():
return rx.text("Root Page")
app = rx.App()
app.add_page(index, route="/")app = rx.App()は、メインファイルのいちばん外側（トップレベル）に置く必要があります。Reflexはappという名前でアプリを探します。route="/"はサイトのトップページです。app.add_page(about, route="/about")のように、ページをどんどん追加できます。routeを省略すると、関数名がそのままURLになります。indexは/、aboutは/aboutです。ボタンでフルーツを入れたり出したりするバスケットです。短いコードですが、この講座の概念がすべて詰まっています。
FRUITS = ["Apple", "Banana", "Cherry", "Grape", "Mango", "Peach"]
class BasketState(rx.State):
basket: list[str] = []
@rx.event
def add_fruit(self):
# Event handlers run real Python: pick the next fruit in the list.
self.basket.append(FRUITS[len(self.basket) % len(FRUITS)])
@rx.event
def remove_last(self):
if self.basket:
self.basket.pop()
def fruit_basket():
return rx.vstack(
rx.hstack(
rx.heading("My basket", as_="h2", size="5"),
# Var operations: .length() and % work on vars in components.
rx.badge(BasketState.basket.length()),
rx.cond(
BasketState.basket.length() % 2 == 0,
rx.badge("even", color_scheme="green"),
rx.badge("odd", color_scheme="orange"),
),
align="center",
),
rx.cond(
BasketState.basket.length() > 0,
rx.list.unordered(rx.foreach(BasketState.basket, rx.list.item)),
rx.text("The basket is empty.", color_scheme="gray"),
),
rx.hstack(
rx.button("Add fruit", on_click=BasketState.add_fruit),
rx.button("Remove last", on_click=BasketState.remove_last, variant="soft"),
),
align="start",
)
app = rx.App()
app.add_page(fruit_basket, route="/")localhost:3000
操作してみようThe basket is empty.
コードの各部分が、どの回で学んだものかを確認してみましょう。
| コード | 概念 | 回 |
|---|---|---|
basket: list[str] = [] | 変化するデータを入れるstate var | 1限目 |
on_click=BasketState.add_fruit | イベントトリガーとハンドラ | 1限目 |
rx.cond(... > 0, リスト, "empty") | 条件付きレンダリング | 2限目 |
rx.foreach(BasketState.basket, rx.list.item) | リストのレンダリング。コンポーネントの関数をそのまま渡しても構いません | 3限目 |
ハンドラ内のlen(self.basket)、if | 実行時に動く本物のPython | 4限目 |
画面の.length()、% 2 == 0 | コンパイル時に使うVar演算 | 4限目 |
variant="soft"、color_scheme="gray" | propsで見た目を整える | 5限目 |
app.add_page(fruit_basket, route="/") | ページの登録 | 6限目 |
同じlenが、ハンドラでは使えるのに画面では.length()に変わる点に注目してください。4限目の「いつ実行されるの？」という問いに答えられれば、Reflexの基本はすべて身についています。
基本が身についたら、いよいよ本格的なアプリを作ってみましょう。
add_fruitを直してみましょう。ハンドラの中なので、if fruit not in self.basketが使えます。rx.condを使います。rx.Appとadd_pageでページを登録できる。新しい授業・講座のお知らせを受け取る
この講座に授業が追加されたり、続きの講座が公開されたりしたらメールでお知らせします。
R
ReflexKR
触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。
ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する
アフィリエイトと支援について© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
質問と回答
この回について気になることを書き込んでください。すべての言語のページの質問がここに集まります。