ReactPyを使ってreact likeにUIをPythonで実装する

Transcript

1. ReactPyを使ってreact likeに UIをPythonで実装する 2025/09/26 @kumappp27 1
2. お前誰よ • kumappp(くまぴ)といいます • X: @kumappp27 • 普段はMonotaROという会社で フロント/バックエンドエンジニアをして います 2
3. 会社紹介 3
6. 採用活動行っています！ • Pythonを中心に幅広い技術を採用しています • Reactによる画面開発も行っています（ReactPyは使われていませんが…） • AI駆動開発への取り組みも積極的に行っています • Techブログ: https://tech-blog.monotaro.com/ 6
7. アジェンダ • 1. ReactPyとは何か？ ◦ 「フロントエンド苦手だけど、こんなのあったら便利だよね」な話 ◦ ReactPyの特徴を簡単に紹介 • 2. ReactPyの強みとフロントエンド構築ツールとしての位置づけ ◦ ReactPyの独自の強み ◦ ReactPyの技術的特徴 • 3. ReactPyの導入方法と実践活用 ◦ ReactPy単体での使用方法 ◦ 既存プロジェクトへの導入パターン ◦ 実装デモとコード例 7
8. ReactPyとは何か？ 8
9. Web UI構築ツールとしての Python • Pythonで作成したデータ分析や機械学習ツールをWebで公開する際に便利な 「Python Web UI構築ツール」というものがあり、注目されています • 代表的なものは下記です • Streamlit • Gradio • Dash • Panel 9
10. ReactPyというツール • ReactPyは、そのUI構築ツールの1種です • その名の通り、React（Javascriptの、UI構築ライブラリ）のような、コンポーネント ベースUI構築パラダイムを、Pythonで実現するライブラリです • Pythonの関数とデコレータを使って、宣言的にUIを記述できます。 10
11. コード例 return rp.html.div( rp.html.h1("Hello ReactPy!"), rp.html.p(f"クリック回数: {count}"), rp.html.button( {"on_click": handle_click}, "クリック" ) ) # ReactPyでのコンポーネント定義 import reactpy as rp @rp.component def HelloWorld(): count, set_count = rp.use_state(0) def handle_click(event): set_count(count + 1) 11
12. 実行すると $ python hello_world.py 12
13. 始め方 $ pip install "reactpy[fastapi,flask,sanic,starlette,tornado]" • pipからインストールできます • インストールの際に、サポートされているバックエンド実装を指定してインストール ができます • バックエンドについては後続の「バックエンドとの統合」にて説明します 13
14. ReactPyのメリット 1. 学習コストの削減 : JavaScript/TypeScript、JSX、Node.jsエコシステムの習得不要 2. 開発効率の向上 : フロントエンドとバックエンドを同じ言語で開発 3. 全ての関数をサーバーサイドで実行 : onClick、useEffectなどの処理が全て Pythonランタイムで動作 4. Pythonエコシステムとの親和性 : NumPy、Pandas、scikit-learnなどのライブラ リを直接活用 14
15. 柔軟なUIの構築 例）フィルター機能の実装 search_term, set_search_term = rp.use_state("") ## 中略 ## rp.html.input({ "type": "text", "value": search_term, "placeholder": "商品を検索", "on_change": lambda e: set_search_term(e["target"]["value"]) # リアルタイム更新 }), 15
16. 実際の画面 16
17. ReactPyの特徴①: Reactのコンポーネント思想を Pythonで実現 コンポーネント思想とは: • 再利用可能な部品 : UIを独立した部品（コンポーネント）として設計 • 関心の分離 : 各コンポーネントが独自の状態とロジックを持つ • 組み合わせによる構築 : 小さなコンポーネントを組み合わせて大きなUIを作る 17
18. コンポーネント① @rp.component def Counter(): count, set_count = rp.use_state(0) return rp.html.div( rp.html.p(f"カウント: {count}"), Button("増加", lambda e: set_count(count + 1)), Button("リセット", lambda e: set_count(0)) ) # 小さなコンポーネント @rp.component def Button(text, on_click): return rp.html.button({"on_click": on_click}, text) ボタンコンポーネント カウンターコンポーネント 18
19. コンポーネント② # 大きなアプリケーション @rp.component def App(): return rp.html.div( rp.html.h1("マイアプリ"), Counter(), # コンポーネントを組み合わせ Counter(), # 再利用も簡単 ) 全体コンポーネント 19
20. 実際の画面表示 全体コンポーネント カウンター コンポーネント カウンター コンポーネント 20
21. ReactPyの特徴②: Python慣れしている人には 親しみやすい書き方① コンポーネント宣言は基本的にデコレータを利用して行います # 大きなアプリケーション @rp.component def App(): return rp.html.div( rp.html.h1("マイアプリ"), ### 中略 ### 21
22. Pythonならではの書き方② 繰り返し処理はリスト内包表記を用います @rp.component def TodoList(): todos = ["買い物", "掃除", "勉強"] return rp.html.ul([ rp.html.li(todo) for todo in todos # リスト内包表記 ]) 22
23. Pythonならではの書き方③ スタイルの指定にPythonの辞書を利用できます @rp.component def StyledDiv(): # Pythonの辞書でスタイルや属性を指定 style = {"color": "blue", "font-size": "18px"} props = {"class": "my-class", "style": style} return rp.html.div(props, "スタイルされたテキスト") スタイルについては、Tailwind CSSによるデザイン適用もできます 23
24. ReactPyの強みと フロントエンド構築ツールとしての位置づけ 24
25. ReactPy独自の強み • ReactPyの強みの一つとして、既存のWebアプリケーションの統合サポートが充実 している点です。 25
26. バックエンドとの統合 ReactPyは、いくつかのバックエンドをサポートしています。 • FastAPI • Flask • Sanic • Starette • Tornado 26
27. FastAPIを選択した場合 … FastAPIということで、Uvicorn ASGIサーバを利用してアプリケーションを実行できます。 from reactpy import component, html from reactpy.backend.fastapi import configure @component def HelloWorld(): return html.h1("Hello, world!") app = FastAPI() configure(app, HelloWorld) 27
28. 既存のWebページへの埋め込み ReactPyは@reactpy/clientというJavascriptクライアントを提供し、既存のWebページ 内にReactPyビューを埋め込むことができます。 <div id="reactpy-app" /> <script type="module"> import { mountLayoutWithWebSocket } from "https://esm.sh/@reactpy/client"; mountLayoutWithWebSocket( document.getElementById("reactpy-app"), serverInfo ); </script> 28
29. Python側コード from fastapi import FastAPI ## 中略 ## app = FastAPI() @app.get("/") async def index(): return FileResponse("index.html") # 既存のHTMLページ @component def ReactPyView(): return html.code("This text came from an ReactPy App") # 既存アプリにReactPyを追加 configure(app, ReactPyView, Options(url_prefix="/_reactpy")) 29
30. 実際の画面 30
31. Pythonの豊富なライブラリエコシステムとの親和性 一例 1. JupyterやPlotly-Dashとの公式統合 : データサイエンス分野での活用が明確に 意図されている 2. サーバーサイド Python実行: すべてのPythonライブラリが理論的に使用可能 3. データ処理と UI表示の同一環境 : NumPy、Pandas処理結果を直接UI表示 31
32. 実用例 numpyとpandasを利用したコード例 # Pandasでデータ処理 df = pd.read_csv('./data.csv') processed_data = df.groupby('category')['sales'].mean() # NumPyで計算処理 statistics = { 'mean': np.mean(processed_data.values), 'std': np.std(processed_data.values) } return html.div([ html.h2("データ統計"), html.p(f"平均: {statistics['mean']:.2f}"), html.p(f"標準偏差: {statistics['std']:.2f}"), ]) 32
33. ReactPyの技術的特徴 33
34. サーバーサイドアーキテクチャ ReactPyの特徴の一つとして、全ての処理がサーバで実行されることが挙げられます。 @component def InteractiveButton(): count, set_count = use_state(0) def handle_click(event): # この処理はサーバーサイドで実行される print(f"クリックされました: {count}") # サーバーのターミナルに出力 set_count(count + 1) return html.button({"on_click": handle_click}, f"クリック回数: {count}") 34
35. WebSocket通信による同期 クライアント-サーバー間はWebSocketを使用してリアルタイムで同期されます： 1. ユーザーがボタンをクリック（ブラウザ） 2. クリックイベントがWebSocket経由でサーバーに送信 3. handle_click関数がサーバーのPythonランタイムで実行 4. 状態更新とVDOMの再計算 5. 差分がWebSocket経由でクライアントに送信 6. ブラウザでDOM更新 35
36. asyncio基盤の非同期処理 ReactPyは内部でasyncioイベントループを使用し、複数のユーザーからの同時アクセ スに対応できます： @component def AsyncComponent(): data, set_data = use_state("読み込み中...") async def fetch_data(): await asyncio.sleep(2) # 非同期処理もサーバーサイドで実行 set_data("データ取得完了！") use_effect(fetch_data, []) # コンポーネント初期化時に実行 return html.div(data) 36
37. サーバーサイド実行の利点 1. Pythonエコシステムの直接活用 : サーバーサイドでNumPy、Pandas等を直接使用 2. 統一されたデバッグ環境 : Pythonデバッガーでフロントエンドロジックもデバッグ可能 3. セキュリティの向上 : ビジネスロジックがクライアントに露出しない 4. データベース直接アクセス : イベントハンドラ内で直接DB操作が可能 欠点としては、状態管理と処理がサーバーに集中するため、サーバへの負荷が大きいことで す。 37
38. ReactPyにおけるVDOM実装 ReactPyは公式にVirtual Document Object Models (VDOM)を実装しており、以下の 特徴があります： • Nteract仕様準拠: NteractによるVDOM仕様に基づき、JupyterLabでも使用され ている実績のある仕様を採用 • JSON形式での厳密な定義 : tagName、children、attributes、eventHandlersの 構造化された辞書形式で表現 • JSON Patchによる差分更新 : JSON Patch仕様を使用した効率的な更新通信 38
39. 状態管理の仕組み Reactには状態管理のためのフックであるuse_state関数というものがありますが、これ と同じものをReactPyにも備えてます。 # 状態の定義 value, set_value = use_state("初期値") count, set_count = use_state(0) def handle_change(event): set_value(event["target"]["value"]) def increment(): set_count(count + 1) 39
40. 状態更新フロー 1. ユーザーのインタラクション（ブラウザ） 2. イベントがWebSocket経由でサーバーに送信 3. Pythonのイベントハンドラが実行 4. set_state関数により状態更新 5. コンポーネントの再レンダリング 6. VDOM差分の計算 7. 変更部分のみをクライアントに送信 8. ブラウザでDOM更新 40
41. 技術的特徴のまとめ • 統一された状態管理 : フロントエンドとバックエンドで状態の分離がない • 自動同期: WebSocketによる自動的なクライアント-サーバー同期 • Python エコシステム活用 : 状態処理でPythonの全機能が利用可能 41
42. ReactPyの導入方法と実践活用 42
43. 新規プロジェクトで導入するならば … こんなプロジェクトで活用できそうです • データ可視化ダッシュボード : Pandas/NumPyでの処理結果を直接表示 • 社内管理ツール : 複雑なJavaScript不要でインタラクティブなUI • プロトタイプ・ MVP開発: 迅速な開発とイテレーション • 小〜中規模の Webアプリケーション : フルスタックPython開発 43
44. 実用例: データ分析ダッシュボード 44
45. @component def DataDashboard(): data = load_analysis_data() # Pandasでデータ処理 selected_period, set_period = use_state("monthly") filtered_data = filter_by_period(data, selected_period) コード例 45
46. return html.div([ html.h1("売上分析ダッシュボード"), html.select({ "value": selected_period, "on_change": lambda e: set_period(e["target"]["value"]) }, [ html.option({"value": "daily"}, "日別"), html.option({"value": "monthly"}, "月別"), ]), Chart(data=filtered_data), # データ可視化 SummaryTable(data=filtered_data) # サマリー表示 ]) 46
47. 既存プロジェクトに導入する場合 例えば、既存のDjangoアプリにReactPyを導入するためのツールとして、 reactpy-djangoというツールがあります。 https://reactive-python.github.io/reactpy-django/latest/ コンポーネントをテンプレートの中に埋め込んだり、 DjangoのORMと連携をするフックを利用したり、 DjangoのアプリケーションにReactPyを組み込むことができます 47
48. reactpy-djangoを使った 既存Djangoプロジェクトでの活用例 from reactpy import component, html @component def hello_world(recipient: str): return html.h1(f"Hello {recipient}!") components.py 48
49. reactpy-djangoを使った 既存Djangoプロジェクトでの活用例 {% load reactpy %} <!DOCTYPE html> <html> <body> {% component "demo_app.components.hello_world" recipient="World" %} <a href='/books/'>書籍一覧を見る</a> </body> </html> template.html 49
50. reactpy-djangoを使った 既存Djangoプロジェクトでの活用例 50
51. データベースフックの use_query()を使う ## 中略 ## from reactpy_django.hooks import use_query async def get_items(): return await database_sync_to_async(SampleModel.objects.all)() @component def todo_list(): item_query = use_query(get_items) if item_query.loading: rendered_items = html.h2("Loading...") else: rendered_items = html.ul([html.li(item.text, key=item.pk) for item in item_query.data]) return html.div("Rendered items: ", rendered_items) 51
52. 参考文献 • 公式サイト : https://reactpy.dev/ • GitHub: https://github.com/reactive-python/reactpy • Django統合: https://github.com/reactive-python/reactpy-django • サンプルプロジェクト : 公式リポジトリのexamplesディレクトリ 52
53. ご清聴ありがとうございました！ 53
54. 開発ブログ We Are Hiring！（株式会社MonotaRO） 採用サイト https://tech-blog.monotaro.com/ https://careers.monotaro.com/EngineeringIT 54