見た目を整える：コンポーネント、props、スタイル

ここまで、rx.button、rx.heading、rx.boxといったコンポーネントを何気なく使ってきました。この回では、コンポーネントを作り、組み立て、見た目を整えるためのルールを整理します。ルールはたった2つです。

5-1. コンポーネントは関数が返す値 (1分)

コンポーネントとは、ボタン、テキスト、画像のように画面を構成する部品です。Reflexには標準のコンポーネントがたくさん用意されていて、コンポーネントを返す関数を作れば、それが自分だけのコンポーネントになります。

def my_button():
    return rx.button("Click Me")

5-2. ルール1：位置引数は子要素 (2分)

コンポーネントの中に別のコンポーネントを入れるには、位置引数として渡します。下の例では、rx.textとmy_button()がrx.boxの子要素です。別の関数で作ったコンポーネントも、呼び出してそのまま入れれば大丈夫です。

def my_container():
    return rx.box(
        rx.text("This is a page"),
        # Reference components defined in other functions.
        my_button(),
    )

使いたいコンポーネントがない場合は、rx.elでHTMLタグをそのまま使えます。rx.el.divは<div>、rx.el.pは<p>です。

def my_div():
    return rx.el.div(
        rx.el.p("Use base html!"),
    )

それでも足りなければ、npmにあるReactコンポーネントをラップして使うこともできます。

5-3. ルール2：キーワード引数はpropsとスタイル (2分)

コンポーネントの動作や見た目は、キーワード引数で指定します。これをpropsと呼びます。propsはコンポーネントごとに異なるので、初めて使うコンポーネントはドキュメントでどんなpropsがあるか確認しましょう。

def half_filled_progress():
    return rx.progress(value=50)

コンポーネント固有のprops以外に、CSSのプロパティをそのままpropsとして渡して見た目を整えることもできます。

def round_button():
    return rx.button("Click Me", border_radius="15px", font_size="18px")

まとめると、コンポーネントは子要素とpropsでできています。

1限目でrx.heading(MyState.count, color=MyState.color)のようにVarを子要素とpropsの両方に入れたのも、この2つのルールそのものです。

練習問題

1. round_buttonにcolor_scheme="green"とsize="3"を追加してみましょう。
2. my_containerのrx.boxにpadding="16px"、border="1px solid #ccc"、border_radius="12px"を指定して、カードのような見た目にしてみましょう。
3. rx.progressのvalueを1限目のCounterState.countに変えるとどうなるでしょうか？ボタンを押すたびにバーが伸びていくようにしてみましょう。

この回のチェックリスト

• 位置引数とキーワード引数がそれぞれ何になるかを説明できる。
• CSSのプロパティをsnake_caseのpropsに直して書ける。
• 必要なコンポーネントがないときにrx.elを使える。