講座の概要

4時間かけて、Pythonファイル1つ（約220行）で顧客一覧＋追加フォーム＋性別ごとの集計チャートを備えたウェブアプリを、ゼロから完成まで作ります。HTML、CSS、JavaScriptは1行も書きません。

対象者

• Pythonの基本文法（関数、リスト、辞書、クラス）がわかる人
• ウェブ開発は初めて、またはフロントエンド（React）を別に学ばずにウェブアプリを作りたい人
• データ分析や自動化スクリプトの結果をウェブ画面で見せたい人

学習目標

この講座を終えると、次のことができるようになります。

1. uvでReflexプロジェクトを作成し、実行できる。
2. コンポーネントを組み合わせて画面を作り、キーワード引数でスタイルを指定できる。
3. rx.Stateにデータを置き、画面がそのデータに合わせて変わるようにできる。
4. ボタンやフォームのイベントを受け取り、サーバー側のPythonコードで状態を変更できる。
5. 状態を加工して、チャートで可視化できる。
6. 「コンパイル時と実行時」の違いを説明し、それが原因で起きる代表的なエラーを修正できる。

完成するアプリ：Customer Data App

準備するもの

• Windows 10/11、macOS、Linuxのいずれか（WindowsはWSL推奨ですが必須ではありません）
• uv（Pythonとパッケージをまとめて管理）
• Node.js 22.22.0以上（Reflex 0.10が要求する最低バージョン）
• VS Codeなどのコードエディタ、ウェブブラウザ
• この教材の基準バージョン：Reflex 0.10.0、Python 3.12

時間割（合計240分）

この教材の使い方

• 各時限は学習目標 → 概念の説明 → コードの写経 → 演習 → チェックポイントの順に進みます。
• 講師メモは、動画収録やライブ講義で口頭で補足するポイントです。ブログ記事にする場合は、本文の説明として書き直してもかまいません。
• コードは時限ごとに少しずつ書き足しながら完成させます。最終コードは付録にあります。