まとめ、デバッグ、次のステップ

今日作ったアプリは、状態（State）→ 画面（Var）→ イベント（ハンドラ）→ 状態の変更という1つのループで動いています。Reflexのアプリはどれだけ大きくなっても、このループが増えていくだけです。

6-1. 今日学んだことを1つの表に (5分)

概念	コードでは	覚えておきたい一言
コンポーネント	`rx.box(子要素, 属性=値)`	位置引数は子要素、キーワード引数は属性
ページ	`app.add_page(index, on_load=...)`	1ページ＝1関数
State	`class State(rx.State)`	型アノテーションは必須、セッションごとのサーバーメモリ
Var	`State.users.length()`	画面の関数の中では値ではなく式
繰り返し・条件	`rx.foreach`, `rx.cond`	Varには`for`、`if`の代わりにこれを使う
イベント	`@rx.event def add_user(self, ...)`	状態を変える唯一の方法、中身は本物のPython
フォーム	`rx.form(on_submit=...)` + `name=`	`name`が`form_data`のキーになる
制御コンポーネント	`open=` + `on_open_change=`	セッターは自分で定義する（0.10）
computed var	`@rx.var def ...() -> 型`	ほかの状態から計算される値
チャート	`rx.recharts.bar_chart(data=...)`	データは`list[dict]`

症状	原因	解決策
`TypeError: object of type '...Var' has no len()`	画面の関数でVarに`len()`を使った	`.length()`
`VarTypeError: Cannot convert Var ... to bool`	Varに`if` / `and` / `or`を使った	`rx.cond(...)`
`VarTypeError: Cannot iterate over Var`	Varに`for`を使った	`rx.foreach(...)`
`AttributeError: ... has no attribute 'set_xxx'`	自動セッターがあると思い込んでいる（古い資料）	`@rx.event`でセッターを自分で定義
キャンセルボタンを押してもデータが追加される	フォーム内のボタンの既定のtypeがsubmit	`type="button"`
`TypeError: __init__() got an unexpected keyword argument`	入力欄の`name`とdataclassのフィールド名が一致していない	名前をそろえる
ダイアログが開かない	`open=`だけがあり`on_open_change`がない	2つをセットで使う
チャートが空のまま	チャートのデータを入れるタイミングがない	`on_load`に登録するか、computed varにする

デバッグの3つの習慣

まずサーバーのターミナルのログを見ます。ハンドラで起きた例外は画面にはっきり表示されず、ターミナルにだけ出力されることがよくあります。
uv run reflex compile --dryで先にチェックします。サーバーを起動せずに、画面コードの文法エラーやVarのエラーを素早く見つけられます。
ハンドラの中にprint()を入れます。ハンドラはサーバーで動くPythonなので、print(form_data)はサーバーのターミナルに出力されます。画面の関数の中のprintは、アプリの起動時に一度だけ出力されます。

難易度の低い順に並べています。どの課題も、今日学んだ概念の1つをさらに深く使います。

削除ボタン：各行の末尾にゴミ箱アイコン（rx.icon("trash-2")）を置き、押すとその顧客を削除します。ヒント：on_click=lambda: State.delete_user(user.email)のように引数を渡します。
検索：名前の検索欄を作ってvalue=＋on_change=（制御コンポーネント）でつなぎ、computed varで絞り込んだ一覧をテーブルに表示します。on_change=State.set_search.debounce(300)として、入力が止まってから検索するようにしてみましょう。
入力の検証：メールアドレスの重複や形式の誤りがあればrx.toast.errorを返し、ダイアログは閉じないようにします。
永続化：SQLModelでCustomerテーブルを作り、on_loadで読み込んでadd_userで書き込みます。再読み込みやサーバーの再起動のあとも、顧客が残っている必要があります。インストールはuv add "reflex[db]"で行います。Reflex 0.10では、rx.Modelの代わりにSQLModelを直接使うことが推奨されています。

複数ページとルーティング：@rx.page(route="/customers/[id]")のような動的なパスを作り、顧客の詳細ページを追加します。
ファイルの分割：models.py、state.py、components/、pages/に分けて、規模が大きくなっても管理しやすくします。
デプロイ：reflex run --env prodで本番モードを確認し、Reflex Cloudや自前のサーバー（Docker）にデプロイします。
公式ドキュメント：reflex.dev/docs。古いブログ記事には、自動セッター、rx.Model、rx.App(theme=...)など、すでに変更されたAPIが使われていることがあるので、バージョンを確認してから読みましょう。