講座の概要

Reflexでアプリを作るときに毎日使う考え方を、短く、実際に操作しながら身につける講座です。すべての例の下に実際に動く画面が付いているので、コードを読んだらすぐにクリックして結果を確かめられます。

この講座で学ぶこと

• ボタンを押すと画面が変わるようにする（Stateとイベントハンドラ）
• 条件に応じて違う画面を表示する（rx.cond）
• リストを画面に描く（rx.foreach）
• 画面のコードでif、for、len()が使えない理由（コンパイル時と実行時）
• コンポーネントを組み立てて見た目を整える（子要素、props、スタイル）
• アプリとページを作る

なぜこの順番なのか

Reflexの公式ドキュメントは、コンポーネントとスタイルから順を追って説明しています。この講座では順番を入れ替え、ボタンを押して数字を増やすところから始めます。画面が反応する様子を先に見ておくと、残りの概念が「これをやるために必要なもの」として自然につながるからです。

1. 1限目で数字を増やし、2限目・3限目で条件とリストを使って画面を切り替えます。
2. 4限目で「そもそも、なぜ普通のifを使ってはいけないの？」という疑問を解き明かします。この講座でいちばん大事な回です。
3. 5限目では仕組みを理解したうえで画面の見た目を整え、6限目で学んだことをすべて組み合わせて小さなアプリを完成させます。

準備するもの

• Pythonの基本文法（関数、クラス、リスト）
• Reflexをインストールした開発環境。まだない場合は、先にReflexで始めるPythonフルスタックWeb開発の1限目を進めてください。

このページの例は、インストールしなくてもその場で操作できます。自分で入力して試したい場合は、Reflexプロジェクトのメインファイルに例の関数を書き、app.add_page(関数名)で登録してください。

元になったドキュメント

この講座は、Reflex公式ドキュメントGetting Started › Basicsをもとに、入門者向けに順番と説明を組み直したものです。例のコードはReflex 0.10.0で実行して確認しています。