Zenn
®️

ReflexのUIデザインってどうしたらいい？

2024/05/14に公開
Python 3
reflex
tech

はじめに

reflexはフロントエンドとバックエンドをpythonのみで実装できるライブラリです。JSを覚える必要がなくすぐにWEBアプリケーションを作成できます。

reflexはフロントエンドをNext.jsで動作させており、
pythonで生成したJSファイルをNext.jsの環境に置く事で、pythonのみの実装を実現しています。
そんなreflexですが、フロントエンドのデザインはどうなっているのでしょうか？
見てみましょう。

自己紹介

僕は山梨でエンジニアをしています。
主にpythonを使用していて、ライブラリも公開しています。
reflexには2023年からコントリビュートしていて、ある程度の動作を理解しています。

reflexのUI

ライブラリ

フロントエンドのデザインで採用されているライブラリは以下です。

Chakura-UI

チュートリアルでフロントエンドの説明を見た時にいきなり出てくるクラスがあります。

  • rx.box
  • rx.container
  • rx.hstack
  • rx.vstack
    など…

reflex特有のデザインと思う方がいると思いますが、これはChakura-UIのクラスそのままです。
Radix UIとは、コンポーネントライブラリで、一貫性を持ったデザインを簡単に作成できます。

スタイルなどは、Radix UIのドキュメントを参照すると良いでしょう。
https://www.radix-ui.com

Chakura-UI

もう一つ、コンポーネントライブラリが入っています。
Chakura-UIです。

例えば、Boxについて下記のreflexコードは

rx.components.chakura.box("This is the Box")

このJSと同じです。

<Box>
  This is the Box
</Box>

Stackを使えば、コンポーネントの積み重ね方向を縦や横に設定できるため、画面のイメージがしやすいです。
https://v2.chakra-ui.com/docs/components/stack

Chakura-UIのコンポーネントはほぼ全てをreflexで実装できますので、UIがわからなくなったら、reflexのコンポーネントドキュメントを見たり、Chakura-UIのドキュメントを見るのもありです。

Tailwind CSS

reflexはTailwind CSSもサポートしています。
Tailwind CSSはCSSフレームワークで、簡単にスタイリングを行う事ができます。
Chakura-UIとも親和性が高く、デザインに使いやすいと思います。

まずは設定が必要です。ドキュメントを参考にアプリにTailwind CSSの設定をします。

config = AppConfig(
    app_name="app",
    db_url="sqlite:///reflex.db",
    env=rx.Env.DEV,

    # ↓この設定が必要
    tailwind={
        "theme": {
            "extend": {},
        },
        "plugins": ["@tailwindcss/typography"],
    },
)

そうしたら、クラス名にCSSのクラスを設定する事で、Tailwind CSSを反映できます。

rx.box(
    "Hello World",
    # class_nameに設定する
    class_name="text-4xl text-center text-blue-500",
)

ここだけ変えたいと思う方は、Tailwind CSSを設定して、ドキュメントを参考にしながらUIを作成するのもいいかもですね！

さいごに

今回はreflexのUIデザインについて説明しました。
pythonで実装できると言っても、UIデザインはJSライブラリのドキュメントを参照する必要があります。
実際にどのように実装しているかはreflexのギャラリーで見れます。
見方がわかればすぐに実装できるとおもいますので、思い切ってアプリを作ってみましょう！

読んで頂きありがとうございました！

更新ログ
2024/6/27 デフォルトのスタイルコンポーネントをChakura-UIからRadix UIに修正。

2024/8/30
※1:Chakraは別のリポジトリに移行されました。(https://github.com/reflex-dev/reflex-chakra)
pip install reflex-chakraでライブラリを入れてから使って下さい。

Discussion