ReflexKR

Reflex公式ドキュメント

コンポーネント工房：Reflexライブラリ100

講座の概要

レイアウト

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

タイポグラフィ

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

フォーム

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

データ表示

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

開閉と切り替え

Tabs

Accordion

Segmented Control

オーバーレイ

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

動的レンダリング

Cond

Match

Foreach

Auto Scroll

メディア

Image

Audio

Video

表とデータグリッド

Table

Data Table

Data Editor

チャート

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

チャートの部品

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

ほかのチャートライブラリ

Plotly

Pyplot

HTML要素

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

そのほかの道具

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

コンポーネント工房：Reflexライブラリ100

動的レンダリング

Match

rx.match

公式ドキュメント

工房の注文書

デリバリーの注文画面に、注文状況のバッジを付けてください。受付・調理中・配達中・完了・キャンセルのそれぞれで、アイコンと色が違うようにしてください。

rx.matchは、ひとつの値を複数のケースと照らし合わせ、一致したケースのコンポーネントを表示します。Python のmatch・caseと同じ考え方です。rx.condは二択しか選べないので、分岐が3つ以上ならrx.condを重ねるよりrx.matchのほうがずっと読みやすくなります。形は次のとおりです。

rx.match(
    condition,
    (case_1, component_1),
    (case_2, component_2),
    ...
    default_component,
)

最初の引数（condition）：照らし合わせる値。ふつうは State 変数です。
(ケース, コンポーネント)のタプル：値がケースと等しければ、そのコンポーネントを表示します。上から順に照らし合わせます。
最後のタプルではない引数：どのケースにも一致しないときの既定値（default）です。

下で犬種を選ぶと一致する文が表示され、リストにはあるけれどケースにないpug・corgiを選ぶと既定値が表示されます。

Unknown cat breed selected.

class MatchBasicState(rx.State):
    cat_breed: str = ""
    animal_options: list[str] = ["persian", "siamese", "maine coon", "ragdoll", "pug", "corgi"]

    @rx.event
    def set_cat_breed(self, breed: str):
        self.cat_breed = breed


rx.flex(
    rx.match(
        MatchBasicState.cat_breed,
        ("persian", rx.text("Persian cat selected.")),
        ("siamese", rx.text("Siamese cat selected.")),
        ("maine coon", rx.text("Maine Coon cat selected.")),
        ("ragdoll", rx.text("Ragdoll cat selected.")),
        rx.text("Unknown cat breed selected."),
    ),
    rx.select.root(
        rx.select.trigger(placeholder="Pick a breed"),
        rx.select.content(
            rx.select.group(
                rx.foreach(MatchBasicState.animal_options, lambda x: rx.select.item(x, value=x)),
            ),
        ),
        value=MatchBasicState.cat_breed,
        on_change=MatchBasicState.set_cat_breed,
    ),
    direction="column",
    spacing="2",
)

値を変えてみる

rx.matchには見た目のプロパティがないので、照らし合わせる値を変えてみます。2つ目のタプルのようにケースを複数書くと、そのうちひとつに一致すれば十分です。実際のアプリでは"paid"の位置に State 変数が入ります。

プロパティを変えてみる

Paid

status

rx.match(
    "paid",
    ("paid", rx.badge(rx.icon("credit-card", size=14), "Paid", color_scheme="blue")),
    ("packing", "shipping", rx.badge(rx.icon("truck", size=14), "On the way", color_scheme="orange")),
    ("done", rx.badge(rx.icon("circle-check", size=14), "Delivered", color_scheme="green")),
    rx.badge(rx.icon("circle-help", size=14), "Unknown", color_scheme="gray"),
)

packing と shipping は同じバッジを使います。ケースにない値（refunded）は最後の既定値に進みます。

引数	値	用途
1つ目（`cond`）	Var または値	照らし合わせる値
`(ケース, …, 結果)`	タプル（2要素以上）	前の値のどれかと等しければ最後の要素を返す
最後の引数	コンポーネントまたは値	既定値。結果がコンポーネントなら省略可（空の`rx.fragment()`）

既定値のルール

既定値は一番最後の、タプルではない引数です。タプルでない引数はすべて既定値とみなされるので、途中に置くとエラーになります。
既定値はひとつだけ置きます。2つ置くとエラーです。
結果がコンポーネントなら既定値を省略でき、そのときはrx.fragment()（何もない）が既定値になります。
結果がコンポーネントでない値（文字列など）なら、既定値を必ず書かなければなりません。
ケースのタプルには、ケースと結果の少なくとも2要素が必要です。

下のコードは上のルールを順に示したもので、3番以外はすべて作るときにエラーになります。

# 1) default is not last -> error
rx.match(
    MatchState.cat_breed,
    ("persian", rx.text("persian cat selected")),
    rx.text("Unknown cat breed selected."),
    ("siamese", rx.text("siamese cat selected")),
)

# 2) two defaults -> error
rx.match(
    MatchState.cat_breed,
    ("persian", rx.text("persian cat selected")),
    ("siamese", rx.text("siamese cat selected")),
    rx.text("Unknown cat breed selected."),
    rx.text("Another unknown cat breed selected."),
)

# 3) OK: components without a default -> rx.fragment() is the default
rx.match(
    MatchState.cat_breed,
    ("persian", rx.text("persian cat selected")),
    ("siamese", rx.text("siamese cat selected")),
)

# 4) plain values without a default -> error
rx.match(
    MatchState.cat_breed,
    ("persian", "persian cat selected"),
    ("siamese", "siamese cat selected"),
)

# 5) a case tuple needs at least two items -> error
rx.match(
    MatchState.cat_breed,
    ("persian",),
    ("maine coon", rx.text("Maine Coon cat selected")),
)

複数の値をひとつのケースに

タプルの中にケースを複数書き、最後に結果を置きます。タプルの最後の要素が常に結果です。猫の品種3つ、犬2つ、馬2つをそれぞれひとつの文にまとめました。footballとgolfはどこにもないので既定値が表示されます。

Unknown animal breed

class MatchMultiState(rx.State):
    animal_breed: str = ""
    animal_options: list[str] = ["persian", "siamese", "maine coon", "pug", "corgi", "mustang", "rahvan", "football", "golf"]

    @rx.event
    def set_animal_breed(self, breed: str):
        self.animal_breed = breed


rx.flex(
    rx.match(
        MatchMultiState.animal_breed,
        ("persian", "siamese", "maine coon", rx.text("Breeds of cats.")),
        ("pug", "corgi", rx.text("Breeds of dogs.")),
        ("mustang", "rahvan", rx.text("Breeds of horses.")),
        rx.text("Unknown animal breed"),
    ),
    rx.select.root(
        rx.select.trigger(placeholder="Pick one"),
        rx.select.content(
            rx.select.group(
                rx.foreach(MatchMultiState.animal_options, lambda x: rx.select.item(x, value=x)),
            ),
        ),
        value=MatchMultiState.animal_breed,
        on_change=MatchMultiState.set_animal_breed,
    ),
    direction="column",
    spacing="2",
)

プロパティの値として使う

rx.condと同じく、rx.matchも結果に値を渡せばプロパティの位置に入れられます。下のバッジのcolor_schemeは、値が 1 なら red、2 なら blue、6 なら purple、10 なら orange、それ以外は green です。ケースには数値も使えます。

class MatchPropState(rx.State):
    value: int = 0

    @rx.event
    def incr(self):
        self.value += 1

    @rx.event
    def decr(self):
        self.value -= 1


rx.flex(
    rx.button("decrement", on_click=MatchPropState.decr, color_scheme="red"),
    rx.badge(
        MatchPropState.value,
        color_scheme=rx.match(
            MatchPropState.value,
            (1, "red"),
            (2, "blue"),
            (6, "purple"),
            (10, "orange"),
            "green",
        ),
        size="2",
    ),
    rx.button("increment", on_click=MatchPropState.incr),
    align_items="center",
    spacing="3",
)

複数の値をひとつのケースにまとめるのも、プロパティで同じようにできます。1・3・9 は red、2・4・5 は blue、6・8・12 は purple、10・15・20・25 は orange です。

class MatchMultiPropState(rx.State):
    value: int = 0

    @rx.event
    def incr(self):
        self.value += 1

    @rx.event
    def decr(self):
        self.value -= 1


rx.flex(
    rx.button("decrement", on_click=MatchMultiPropState.decr, color_scheme="red"),
    rx.badge(
        MatchMultiPropState.value,
        color_scheme=rx.match(
            MatchMultiPropState.value,
            (1, 3, 9, "red"),
            (2, 4, 5, "blue"),
            (6, 8, 12, "purple"),
            (10, 15, 20, 25, "orange"),
            "green",
        ),
        size="2",
    ),
    rx.button("increment", on_click=MatchMultiPropState.incr),
    align_items="center",
    spacing="3",
)

真か偽なら cond

rx.matchは複数の値を照らし合わせるのに使います。照らし合わせる値がTrue/Falseの2つだけなら、rx.cond(State.value == 10, "true value", "false value")のようにrx.condが適しています。

注文書を仕上げる

ひとつの状況の文字列を5つに分岐させます。最後のcancelledはケースとして書かず、既定値で受けました。ボタンを押すと次の状況に進みます。

Receivedreceived

MATCH_ORDER_STEPS = ["received", "cooking", "delivering", "delivered", "cancelled"]


class MatchOrderState(rx.State):
    status: str = "received"

    @rx.event
    def next_step(self):
        i = MATCH_ORDER_STEPS.index(self.status)
        self.status = MATCH_ORDER_STEPS[(i + 1) % len(MATCH_ORDER_STEPS)]


rx.hstack(
    rx.match(
        MatchOrderState.status,
        ("received", rx.badge(rx.icon("clipboard-check", size=14), "Received", color_scheme="gray")),
        ("cooking", rx.badge(rx.icon("chef-hat", size=14), "Cooking", color_scheme="amber")),
        ("delivering", rx.badge(rx.icon("bike", size=14), "On the way", color_scheme="blue")),
        ("delivered", rx.badge(rx.icon("house", size=14), "Delivered", color_scheme="green")),
        rx.badge(rx.icon("ban", size=14), "Cancelled", color_scheme="red"),
    ),
    rx.button("Next status", on_click=MatchOrderState.next_step, size="1", variant="soft"),
    rx.code(MatchOrderState.status),
    align="center",
    spacing="3",
)

工房ノート

rx.match(値, (ケース, 結果), ..., 既定値)。分岐が3つ以上なら cond を重ねる代わりに。
ひとつのタプルにケースを複数: ("a", "b", 結果)。タプルの最後が結果。
既定値は一番最後にひとつ。結果がコンポーネントなら省略可、値なら必須。
結果に値を渡すと color_scheme のようなプロパティに入れられる。
真・偽の二択は rx.cond。

← 前へ

動的レンダリング · Cond

動的レンダリング · Foreach

新しい授業・講座のお知らせを受け取る

この講座に授業が追加されたり、続きの講座が公開されたりしたらメールでお知らせします。

質問と回答

この回について気になることを書き込んでください。すべての言語のページの質問がここに集まります。

ReflexKR

触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。

ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する

アフィリエイトと支援について

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex