ReflexによるPython onlyでの高速なWebアプリケーションプロトタイピング

PyCon mini 東海 2024 トーク資料

Transcript

1. ReflexによるPython onlyでの高速なWeb アプリケーションプロトタイピング Hiroshi Kawase
2. 私のアイデアはちゃんと課題を解決するだろうか 自分が検討しているソリューションが、本当に課題を解決するのか検証したいことがある 新規事業開発 ハッカソン 個人開発
3. プロトタイピング ソリューションの仮説検証をするために試 作品を作ること 仮説が否定されることもある 時間をかけずに試作品を作り、仮説検証を 高速に回したい ソリューション 仮説を立てる 試作品を作る 顧客にあてる
4. プロトタイピングの選択肢 例 検証できること 紙 企画書、簡易なチラシ 需要、提供すべき価値 手作業 人手で課題解決する 価値/体験、業務プロセス 組み合わせ LINEやtwitter等を組み合わせる 必要機能、既存ツールとの差分、 ツールによる体験の毀損 デザイン 1枚のHP、UI、ロゴ 使いやすさ、わかりやすさ 動くもの Bubble、Shopify、Raspberry Pi 顧客による使われ方 最小限の機能 Webアプリケーション 実際に作ってわかること https://alphadrive.co.jp/knowledge/article/prototyping/ 数分 数週間
5. Webアプリのプロトタイプを高速に実装するために ブラウザでちゃんと動くWebアプリケーションを高速に実装できれば • 仮説検証をたくさん回せる • 実物に近いため、多くの精緻な学びが得られる 課題解決をもたらすソリューションを早 く見つけることができる
6. 課題：知識や技術の不足 例）Pythonを主に使うバックエンドエンジニアの場合 TypeScriptに入門して読み書き できるようにならなきゃ... フレームワークって、とりあえずNext.jsで いいの？てか何があるの？？ よう知らんけどツールチェインいっ ぱい要るんですよね CSSこわい
7. 課題：書かなければならない定型的なコード 別々の技術スタックで実現されたフロントエンドとバックエンドを接続するためには、多く の定型的なコードを書かなければならず、開発スピードが下がる • パース • 変換 • ダンプ • パース • 変換 • ダンプ フロントエンド バックエンド
8. Reflex Pythonのみでフロントエンドとバックエンドの両方を実装できるWebアプリケーションフ レームワーク • Pure Python Pythonのみで他の言語の学習が不要 • Easy to Learn 初めてのアプリも数分で作成でき、Web開発経験も不要 • Full Flexiblity 高度なユースケースに対応できる柔軟性を持ち、大規模なアプリも実装可能 • Battery Included 他のツール無しでUI, サーバサイドロジックを実装しデプロイできる
9. ReflexでのWebアプリケーション実装 Reflexで最低限記述すべきは以下の3つ 1. State：変数およびEvent Handler 2. Reflex Componentを返す関数：User Interface 3. Page / Routing
10. 実装例：Markdown Editor
11. Markdown Editor 実装例 - Setup mkdir mdeditor cd mdeditor python -m venv .venv source .venv/bin/activate pip install reflex reflex init お好みの手段で仮想環境を準備し、reflexをインストールする reflex initするとプロジェクトのテンプレートを尋ねられるので、Blankを選択 以降、mdeditor/mdeditor.pyに必要なコードを記述していく
12. Markdown Editor 実装例 - State rx.Stateを継承したクラスに変数とevent handlerを記述する import reflex as rx class State(rx.State): text: str = "" def change(self, text: str): self.text = text
13. Markdown Editor 実装例 - Reflex Componentを返す関数 Reflex Componentを組み合わせてUIを記述する def index() -> rx.Component: return rx.container( rx.vstack( rx.heading("Markdown Editor"), rx.hstack( rx.text_area( value=State.text, on_change=State.change, width="50%", height="80vh" ), rx.markdown(State.text, width="50%", height="80vh"), width="100%", spacing="4" ) ) )
14. Markdown Editor 実装例 - Routing Reflex Componentを返す関数とURLを紐づける app = rx.App() app.add_page(index, title="Markdown Editor")
15. Markdown Editor 実装例 - 起動 reflex run で起動し、 http://localhost:3000/ にブラウザでアクセスする
16. Reflexのアーキテクチャ Frontend Backend Reflex code Websocket User Compile
17. Reflexの長所 - 汎用性 例）あるネットワークサー ビスの論理リソースの接 続を可視化 svgによる要素間のライ ン生成を含む 5日程度で実装完了
18. Reflexの長所 - 学習リソースの量 典型的なWebアプリの実装であれば十分な、公式の学習リソースがある awesome-reflexには非公式の学習リソースもまとまっている （日本語の学習リソースはまだあまり多くない） Builtin Components ReflexにBuiltinされた、再利 用可能な部品 • UI: 73 • Graphing: 19 Recipe Builtin Componentを組み合わ せて作る、よくあるUIの実装例 Login FormやSidebarなど、15 パターン Example Reflexによるアプリケーション 実装例 データ可視化アプリや顧客情 報管理アプリなど
19. Reflexの長所 - React Componentの活用 React Library内でexposeされているReact Componentであれば、Reflex Componentとしてwrapできる シンプルなReact Componentなら以下のように書けばOK // react-colorfulのHexColorPickerをReflex ComponentとしてWrapする例 class ColorPicker(rx.Component): // rx.Componentを継承 library = "react-colorful" // libraryを指定 tag = "HexColorPicker" // wrapしたいReact Component color: rx.Var[str] // props on_change: rx.EventHandler[lambda color: [color]] // event handler
20. Reflexの短所 - カスタムJavaScriptコードの書きづらさ カスタムJavaScriptコードを書くことは できるが、保守性が下がる React Componentをexposeしていな いフロントエンドの資産（ライブラリ等） は活かしづらい 公式でも、必要な時だけ使うよう推奨 している
21. Reflexの短所 - それでもフロントエンドの知見は必要 • PythonでUIを記述できるものの、最終的にはHTML/CSS/JavaScriptであることに は変わらない ◦ DevToolsを使ってデバッグする作業は発生する • 特にCSSからは逃れられない ◦ 細かいStyleの指定はCSS PropertyをReflex Componentに渡すことになる ◦ Reflexのコンセプトとして No web development experience required. と謳っているが、公式ドキュ メントには読者が基本的なフロントエンド知識を持つ前提の記述も多少見られる ▪ 例）Box Component • Box is a generic container component that can be used to group other components. • By default, the Box component is based on the div and rendered as a block element. It's primary use is for applying styles.
22. スタイルの記述を補助するReverse Compiler HTMLをReflex Codeに変換する、Reverse Compilerが提供されている（Webアプリ ケーションとしての提供） 完璧な変換ではなく、自分の手での調整が必要なことも Figma Reflex (Not using Round to Tailwind Values)
23. FlexgenによるReflex Componentの生成 • Reflex公式で開発されている、 AnthropicのモデルをベースにReflexに 特化させたUI生成ツール • 出力はReflex Componentのみ ◦ State、add_pageの出力はサポートしていな い • ChatGPT, ClaudeよりもReflex Componentの出力は得意
24. 高速にプロトタイピングするためのアプローチ デザインツールやLLMで得たHTMLをReflex Codeに変換する、あるいはFlexgenを活 用することで、UI実装の土台を作ることができる Reverse Compiler LLM Design Tool Designer UI Design Requirements Reflex Code Requirements Engineer HTML Flexgen State, Routing Reflex Component App Engineer Requirements
25. まとめ • 実際につくってわかることを検証するために、Webアプリケーションを実装すると、 数週間かかることもある • Reflexは汎用的なWebアプリケーションのGUIおよびAPIを、ほとんどPythonのみ で実装することができる • フロントエンドの知見なしで実装できるほどではない • デザインツールやLLM、Reverse Compiler、Flexgenを活用することで、HTMLや Styleの記述を補助できる