PythonでReact風UI構築：Rectpy　2025/09/17 技術勉強会資料

PythonでReact風UI構築： ReactPy ReactPyの基本と活用方法をご紹介します preencoded.png

• https://gamma.app/?utm_source=made-with-gamma

目次 1. ReactPyとは？ 2. ReactPyのアーキテクチャ概要 3. 基本構文と仕組み 4. 簡単なデモコード 5. 他のライブラリとの比較 6. ReactPyの強みと弱み 7. 活用シーン 8. 実例紹介 9. まとめ 10. 参考資料・おすすめサイト preencoded.png

• https://gamma.app/?utm_source=made-with-gamma

1.ReactPyとは？ React思想をPythonで体験 験 JavaScript不要 Reactの宣言的UI構築をPythonで 開発が可能です Pythonのみで完結するWeb UI開 実現したライブラリです 親しみやすい設計 学習しやすい構文です preencoded.png

• https://gamma.app/?utm_source=made-with-gamma

2.ReactPyのアーキテクチャ概要 コンポーネントベース設計 再利用可能なUI部品として構築します 仮想DOM風の仕組み 効率的なUI更新メカニズムを提供します PythonでHTML記述 HTML要素をPythonコードで直接記述できます preencoded.png

• https://gamma.app/?utm_source=made-with-gamma

3.基本構文と仕組み 01 02 @componentデコレーター HTML要素の記述 UI部品を定義するための基本構文で html.div、html.buttonなどを使用しま す ます 03 状態管理 use_stateを使って状態を管理します preencoded.png

• https://gamma.app/?utm_source=made-with-gamma

4.簡単なデモコード from rectpy import component, html, use_state @component def Counter(): count, set_count = use_state(0) return html.div( html.p(f"Count: {count}"), html.button( {"on_click": lambda event: set_count(count + 1)}, "＋" ) ) # use_stateで状態管理 # イベントハンドラを辞書で指定 ボタンをクリックするとカウントが増える簡単なUIの実装例です preencoded.png

• https://gamma.app/?utm_source=made-with-gamma

5.他のライブラリとの比較 ライブラリ 言語 UI構築 状態管理 学習コスト ReactPy Python 宣言的 use_state 低 React JS/TS 宣言的 useState, Redux 中〜高 Tkinter Python 命令的 なし 低 PyScript Python Webベース JS連携 中 preencoded.png

• https://gamma.app/?utm_source=made-with-gamma

6.ReactPyの強みと弱み 強み 弱み Pythonで完結 エコシステムが未成熟 追加言語の学習が不要です 利用可能なライブラリが限定的です Reactライクな構文 ドキュメントが少ない モダンな開発体験を提供します 学習リソースが不足しています 小規模開発に最適 複雑なUIには不向き 素早いプロトタイプ作成が可能です 大規模アプリケーションには制限があります preencoded.png

• https://gamma.app/?utm_source=made-with-gamma

7.活用シーン Web UI開発 PythonエンジニアがWeb UIを素早く構築したい場面で活用できます す プロトタイプ開発 アイデアの検証や概念実証に最適な選択肢です 教育用途 ReactのUI構築概念をPythonで学習できます データ可視化 分析ツールのUI部分として効果的に使用できます preencoded.png

• https://gamma.app/?utm_source=made-with-gamma

8.実例紹介 TODOアプリ フォーム入力 グラフ表示（Plotly連携など） タスクの追加、編集、削除といった ユーザーからのデータ入力を受け付 基本的なリスト管理機能を、Rectpy け、リアルタイムでUIを更新するイ PlotlyなどのPythonデータ可視化ライ のコンポーネントと状態管理で簡単 ンタラクティブなフォームを効率的 イブラリとシームレスに連携し、複 に実装できます。 に構築できます。 雑なデータもWeb上でインタラクテ ィブに表示可能です。 Rectpyは、このような小規模でインタラクティブなWebアプリケーションの開発に最適な選択肢です。 preencoded.png

• https://gamma.app/?utm_source=made-with-gamma

9.まとめ 新しい選択肢 React思想の体験 Pythonで宣言的UIを構築できる 慣れ親しんだPython環境でモダ 革新的なライブラリです ンUI開発を学べます 最適な用途 小規模開発・教育・プロトタイプ作成に特に効果的です preencoded.png

• https://gamma.app/?utm_source=made-with-gamma

10.参考資料・おすすめサイト Rectpy GitHub：Rectpyの公式リポジトリ。コードとREADMEで基本が学べる。 https://github.com/rect-dev/rectpy React公式サイト：Rectpyの思想の元となるReactの公式ドキュメント。 https://react.dev/ PyScript公式サイト：PythonでWeb UIを構築する別アプローチ。Rectpyとの 比較に有用。 https://pyscript.net/ Awesome Python GUI：Pythonで使えるGUIライブラリのまとめ。Rectpy以外 の選択肢も確認可能。 https://github.com/federico-terzi/awesome-python-gui Rectpy紹介記事（DEV）：Rectpyの使い方や特徴を紹介する技術ブログ記事。 https://dev.to/rectpy 仮想DOMって何？って疑問を5分で解決する https://qiita.com/YoshiharuTakenaka/items/47dd4668f8c43d138890 preencoded.png

• https://gamma.app/?utm_source=made-with-gamma
• https://github.com/rect-dev/rectpy
• https://react.dev/
• https://pyscript.net/
• https://github.com/federico-terzi/awesome-python-gui
• https://dev.to/rectpy
• https://qiita.com/YoshiharuTakenaka/items/47dd4668f8c43d138890