1760372904
2025-10-13 16:09:00
著者による画像
Python について話すとき、私たちはそれを使用してデータ分析を実行したり、機械学習モデルを構築したりすることをよく考えます。次のようなライブラリを使用した単純なプロトタイプ以外に、Python を使用して完全な Web アプリケーションを作成することについて議論することはあまり一般的ではありません。 ストリームライト または タイピー。
ただし、と呼ばれるライブラリ 反射神経 は、他のプログラミング言語と競合する Web アプリケーション開発機能を提供します。完全に Python で作られたこのオープンソース ライブラリは、ユーザーが小規模なデータ サイエンス アプリから大規模な複数ページの Web サイトまであらゆるものを構築するのに役立ちます。 Reflex を使用すると、強力な柔軟性と直感的な Python コードにより、ニーズに合わせて Web 開発を簡単に拡張できます。
Reflex を使用した Web アプリの構築
このチュートリアルでは、Reflex を使用して Web アプリケーションを構築するための標準を確認します。ベスト プラクティスとして、環境全体の中断を避けるために仮想環境を使用することをお勧めします。
これを念頭に置いて、以下のコードを使用して Reflex ライブラリをインストールすることで、Reflex Web アプリケーションの開発を開始します。
次に、新しいプロジェクトを作成し、新しいアプリケーションを開始して Reflex をテストします。次のコードを使用しますが、test_app フォルダー名を独自の名前に変更します。
mkdir test_app cd test_app 反射初期化
上記のコードでは、既製のテンプレートを使用してプロジェクトを作成するかどうかについての質問が表示されます。
このチュートリアルでは、空の Reflex アプリを選択すると、以下のような新しいプロジェクト構造が作成されたことがわかります。
次のコマンドを実行して、Reflex アプリケーションが適切に実行されるかどうかを確認します。
アプリケーションを提供するローカル URL にアクセスします。うまく機能すると、次の画像のようなものが表示されます。
これは、Reflex によって生成される基本的な Web アプリケーション スキャフォールドです。後でさらに洗練されたものを構築しますが、まずは基本から始めます。
まずは、Reflex ライブラリで Web アプリケーションを構築するために使用されるコンポーネントを理解しましょう。まず、開きます
test_app.py を開き、その内容を次のコードに置き換えます。
import reflex as rx class State(rx.State): count: int = 0 def increment(self): self.count += 1 def decrement(self): self.count -= 1 def Index(): return rx.hstack( rx.button( “Decrement”, color_scheme=”ruby”, on_click=State.decrement, ), rx.Heading(State.count, font_size=”2em”), rx.button( “増分”, color_scheme=”草”, on_click=State.increment, ), spacing=”4″, ) app = rx.App() app.add_page(index)
すると、以下のようなWebサイトが表示されます。
上記のコードで何が起こっているのかを詳しく見てみましょう。
まず、アプリケーションの状態を変更できる変数 (var と呼ばれる) と関数 (イベント ハンドラーと呼ばれる) を含む状態を定義します。
たとえば、初期値 0 の整数を保持する count という単一の変数を定義します。
クラス状態(rx.State): カウント: int = 0
次に、イベント ハンドラー、つまりユーザーのアクションに応じて変数を変更する状態内の関数があります。上記のコードでは、次のようにイベント ハンドラーを定義します。
デフォルトインクリメント(セルフ): self.count += 1 デフォルトデクリメント(セルフ): self.count -= 1
次に、Web アプリケーション UI を次のように定義します。
def Index(): return rx.hstack( rx.button( “Decrement”, color_scheme=”ruby”, on_click=State.decrement, ), rx.Heading(State.count, font_size=”2em”), rx.button( “Increment”, color_scheme=”grass”, on_click=State.increment, ), spacing=”4″, )
上記の関数は Web アプリケーション インターフェイスを定義し、次のコンポーネントを使用して UI を構築します。
- rx.hstack: 要素を水平方向にスタックするために使用されます
- rx.button: クリックされたときにイベントをトリガーするボタンを表示するために使用されます。
- rx.Heading: さまざまなサイズでテキストを表示するために使用されます
上記のコードでわかるように、見出しコンポーネントはステート内の count 変数を参照し、各ボタンはクリックされるとステート内の関数をトリガーします。
Web アプリケーションの構築に使用できるコンポーネントは他にもたくさんあります。反射神経を参照 コンポーネントのドキュメント。
最後に、次のコードを使用してアプリケーションを定義し、コンポーネントをベース ルートに追加します。
app = rx.App() app.add_page(index)
これは、Reflex が Web アプリケーションを構築するために使用する重要なコンポーネントの簡単な説明です。
上記の説明が完了したら、Reflex を使用してもう少し高度な Web アプリケーションを構築してみましょう。以下の例では、項目を入力したり削除したりできる To-Do リスト アプリケーションを開発します。
import uuid import reflex as rx from タイピング import Any、Dict、List class TodoState(rx.State): todos: List[Dict[str, Any]]= []
new_text: str = “” current_filter: str = “all” # “all”、”active”、”done” から選択 # 派生値 (状態から計算) @rx.var def items_left(self) -> int: return sum(1 for t in self.todos if not t[“done”]) @rx.var def items_left_label(self) -> str: return “1 item left” if self.items_left == 1 else f”{self.items_left} items left” @rx.var def filtered_todos(self) -> リスト[Dict[str, Any]]: self.current_filter == “active” の場合: return [t for t in self.todos if not t[“done”]]if self.current_filter == “done”: return [t for t in self.todos if t[“done”]]return self.todos # イベント (状態の変化) @rx.event def set_new_text(self, value: str): self.new_text = (value または “”).strip() @rx.event def add_todo(self): text = (self.new_text または “”).strip() text でない場合: return self.todos.append({“id”: str(uuid.uuid4()), “text”: text, “done”: False}) self.new_text = “” @rx.event def toggle(self, todo_id: str): for t in self.todos: if t[“id”] == all_id:t[“done”] = ではない[“done”]
Break @rx.event def delete(self, todo_id: str): self.todos = [t for t in self.todos if t[“id”] != todo_id]@rx.event def clear_completed(self): self.todos = [t for t in self.todos if not t[“done”]]@rx.event def set_filter(self, name: str): {“all”, “active”, “done”} の名前の場合: self.current_filter = name def filter_button(name: str, label: str) -> rx.Component: return rx.button( label, size=”2″,ariant=rx.cond(TodoState.current_filter == name, “solid”, “soft”), background_color=rx.cond( TodoState.current_filter == name, “blue.600”, “gray.700″ ), color=”white”, _hover={“background_color”: “blue.500”}, on_click=lambda: TodoState.set_filter(name), ) def render_todo_item(todo: rx.Var[dict]) -> rx.Component: return rx.hstack( rx.checkbox( is_checked=todo[“done”]on_change=lambda _: TodoState.toggle(todo[“id”]), size=”2″, color_scheme=”blue”, ), rx.text( todo[“text”]、flex=”1″、color=rx.cond(todo[“done”]”グレー.500″, “白”), text_decoration=rx.cond(todo[“done”]”ラインスルー”, “なし”), ), rx.icon_button( “ゴミ箱”, color_scheme=”赤”,variant=”ソフト”, on_click=lambda: TodoState.remove(todo[“id”]), ), align=”center”, spacing=”3″, width=”100%”, ) def todo_input_bar() -> rx.Component: return rx.hstack( rx.input( placeholder=”何をする必要がありますか?”, value=TodoState.new_text, on_change=TodoState.set_new_text, flex=”1″, size=”3″, background_color=”gray.800″, color=”white”, border_color=”gray.600″, _placeholder={“color”: “gray.400”}, ), rx.button( “追加”, size=”3″, background_color=”blue.600″, color=”white”, _hover={“background_color”: “blue.500″}, on_click=TodoState.add_todo, ), spacing=”3″, width=”100%”, ) def todo_list_panel() -> rx.Component: return rx.vstack( rx.foreach(TodoState.filtered_todos, render_todo_item), spacing=”2″, width=”100%”, ) def footer_bar() -> rx.Component: return rx.hstack( rx.text(TodoState.items_left_label, size=”2″, color=”gray.300″), rx.hstack( filter_button(“all”, “All”), filter_button(“active”, “Active”), filter_button(“done”, “Done”), spacing=”2″, ), rx.button( “クリア完了”,variant=”soft”,background_color=”gray.700″, color=”white”, _hover={“background_color”: “gray.600″}, on_click=TodoState.clear_completed, ), justify=”between”, align=”center”, width=”100%”, ) defindex() -> rx.Component: return rx.center( rx.card( rx.vstack( rx.Heading(“Reflex To-Do”, size=”6″, color=”white”), todo_input_bar(), rx.separator(border_color=”gray.700″), todo_list_panel(), rx.separator(margin_y=”2″, border_color=”gray.700″)、footer_bar()、width=”min(720px, 92vw)”、spacing=”4″, )、size=”4″、width=”min(760px, 96vw)”、shadow=”lg”、background_color=”gray.900″, )、min_h=”100vh”、padding_y=”8″, background_color=”black”, ) app = rx.App() app.add_page(index,route=”title=”Reflex To-Do”)
アプリケーションの結果は以下の画像のようになります。
上記のコードでは、フローは基本的に次のように機能します。
- アプリは、タスク、入力内容、選択されているフィルターなどの小さなメモリを保持します。
- ボックスに入力すると、入力したテキストが保存されます。
- 「追加」を押すと、タスクが (ID 付きで) 保存され、ボックスがクリアされます。
- リストは即座に更新され、メモリ内の内容が表示されます。
- 各タスク行にはチェックボックスとゴミ箱アイコンがあります。チェックを入れると完了が切り替わります。ゴミ箱はタスクを削除します。
- 3 つのフィルター ボタン (すべて / アクティブ / 完了) により、表示されるタスクが変わります。
- フッターには完了していないタスクの数が表示され、「完了をクリア」できます。
前に説明した基本コンポーネント以外のいくつかの重要な違いは次のとおりです。
- @rx.event で装飾して、状態内のイベントを宣言します。
- @rx.var で装飾して、状態に派生変数を作成します。
- Reflex アプリケーション用の再利用可能な UI ヘルパーを構築する場合は、rx.Component シグネチャを使用します。
これが、Reflex がどのように機能するかの基本的な説明と例です。自分で試して、必要な Web アプリケーションを純粋な Python で構築してください。
結論
Reflex は、シンプルかつ直感的なコード パターンを使用して、純粋な Python で Web アプリケーションを構築できるオープンソース ライブラリです。その簡単なセットアップと理解しやすいコードにより、ユーザーはロジックと UI を 1 か所に保持できます。これは、Python でアプリケーションを構築したい初心者にもプロの開発者にも同様に役立つライブラリです。
これがお役に立てば幸いです!
コーネリアス・ユダ・ウィジャヤ データ サイエンスのアシスタント マネージャー兼データ ライターです。アリアンツ インドネシアでフルタイムで働いている彼は、ソーシャル メディアや執筆メディアを通じて Python とデータのヒントを共有するのが大好きです。 Cornellius は、AI と機械学習のさまざまなトピックについて執筆しています。
#Reflex #を使用した #Pure #Python #Web #アプリの構築