MonsterUI：FastHTMLに美しいUIをもたらす

モダンな Web 開発では、優れた UI を作成するために、複雑な依存関係や複数の言語にまたがる膨大なボイラープレートが必要とされています。MonsterUI はその課題を解決するために登場しました。

Web UI 開発における問題点

魅力的な Web アプリケーションを構築することは、常に複雑でした。FastHTML は HTMX、Starlette、HTML、そして HTTP の基本原理を統合することで、Web アプリの開発を簡素化します。

しかし、見た目を整えることは依然として非常に困難です。これには、膨大な量の CSS か、長いインラインクラス文字列を持つフレームワークのどちらか（あるいはその両方）が必要です。Bootstrap や Tailwind CSS を試すこともあるでしょう。すると今度は、クラス名の管理やユーティリティパターンの記憶、ボイラープレートとなるクラス文字列を確認するためのドキュメント参照に追われることになります。その結果、専門家デザイナーでない人にとっては、構築も維持も変更も困難なコードが生まれてしまいます。

一般的なアプリケーションには、ナビゲーションバー、フォーム、モーダル、カードなど、多くのコンポーネントが含まれています。それぞれが、スタイリング、レスポンシブ動作、インタラクティブな状態に対する慎重な検討を必要とします。アプリケーションが大きくなるにつれ、これらのスタイルを一貫して管理することはますます困難になっていきます。

この問題は私が Web アプリを開発している際に痛感しました。私はクラス文字列のコピー＆ペーストや、複数のコンポーネントにわたる複雑なスタイリングロジックの維持に終始していました。FastHTML はアプリケーションロジックの開発を楽しいものに変えてくれましたが、スタイリングの側面は常に摩擦の原因となり続けていました。

基本となる Web UI を構築するために HTML、CSS、Python の間でコンテキストスイッチングすることに疲れたなら、MonsterUI があなたのためのソリューションかもしれません。

実例：ブログの構築

MonsterUI の紹介

MonsterUI を使えば、デザイン品質を犠牲にすることなく、純粋な Python で高品質でモダンな Web アプリを誰でも構築できます。

MonsterUI で構築し、FrankenUI でスタイリングされ、Shadcn のデザインに基づいています。

MonsterUI は、FastHTML（ファスト HTML）の上に位置するレイヤーであり、Tailwind CSS や FrankenUI、DaisyUI などのモダンなライブラリに基づく事前スタイル化されたコンポーネントとスマートなデフォルト値を提供します。必要に応じて Tailwind CSS にフルアクセスできる状態も維持されます。MonsterUI の特徴は以下の通りです。

• FastHTML のシンプルさを Web スタイリングに持ち込みます。
• 1 つの CSS クラスも記述することなく、美しくレスポンシブなコンポーネントを提供します。
• ユーティリティクラスの記憶に頼らず、機能構築に集中できます。

チームメンバー向けのカードを用いた例で学んでいきましょう：

def TeamCard(name, role, location="Remote"):

icons = ("mail", "linkedin", "github")

return Card(

DivLAligned(

DiceBearAvatar(name, h=24, w=24),

Div(H3(name), P(role))),

footer=DivFullySpaced(

DivHStacked(UkIcon("map-pin", height=16), P(location)),

DivHStacked(*(UkIconLink(icon, height=16) for icon in icons))))

レイアウト、フォントサイズ、アイコン、アバターをすべて Python だけで指定しました。特別な flexbox や CSS クラスの知識なしに、すべての制御が可能でした。

例はカードドキュメントページからのものです。

NoteExpand を展開すると、MonsterUI を使用しなかった場合に必要となるボイラープレートコードを確認できます

dicebear_url = 'https://api.dicebear.com/8.x/lorelei/svg?seed=James Wilson'

Div(Div(Div(

Span(Img(alt='Avatar', loading='lazy', src=dicebear_url,

cls='aspect-square h-24 w-24'),cls='relative flex h-24 w-24 shrink-0 overflow-hidden rounded-full bg-accent'),

Div(H3('James Wilson', cls='uk-h3'),

P('Senior Developer')),

cls='uk-flex uk-flex-left uk-flex-middle space-x-4'),

cls='uk-card-body space-y-6'),

Div(Div(Div(

Uk_icon(icon='map-pin', height='16'),

P('New York'),

cls='uk-flex uk-flex-row uk-flex-middle space-x-4'),

Div(A(Uk_icon(icon='mail', height='16'),href='#',cls='uk-icon-link'),

A(Uk_icon(icon='linkedin', height='16'),href='#',cls='uk-icon-link'),

A(Uk_icon(icon='github', height='16'),href='#',cls='uk-icon-link'),

cls='uk-flex uk-flex-row uk-flex-middle space-x-4'),

cls='uk-flex uk-flex-between uk-flex-middle uk-width-1-1'),

cls='uk-card-footer'),

cls='uk-card')

MonsterUI があなたに提供するもの

MonsterUI は、シンプルな原則に基づいています。それは、スマートなデフォルト値を提供しつつも、完全な柔軟性を許容するというものです。

私たちは、現代の Web 開発における最も革新的なプロジェクトから証明されたアプローチを基盤とし、生身の HTML/CSS が抱える課題に対応するコンポーネントを慎重に選択することで、これを実現しました。同時に、成熟した実戦で検証済みの戦略も維持しています。

MonsterUI の核となるのは FrankenUI です。これは sveltecult によって開発された、美しい HTML ファーストコンポーネントを採用した革新的なフレームワーク非依存の UI ライブラリです。FrankenUI そのものは、React 向けにコピー＆ペースト可能な UI コンポーネントという概念を先駆けた shadcn の「shadcn/ui」に触発されています。

生粋の HTML と CSS は、2 つの主要な課題に直面しています。すなわち、時代遅れの視覚的デザインと複雑なレイアウト管理です。FrankenUI のフレームワーク非依存のアプローチを FastHTML と組み合わせることで、MonsterUI は HTMX の段階的強化（progressive enhancement）パラダイムとシームレスに統合される現代的で美しいコンポーネントを提供します。これにより、クリーンで読みやすいコードを維持しつつ実現されています。

これは単なる理論上の話ではありません。私たちは現在、プレビュー顧客とのテスト用として新規アプリケーションを開発中で、MonsterUI を実際にプロダクション環境で使用しています。そこでは、複雑なダイアログインターフェースから動的コンテンツレンダリングに至るまで、あらゆる機能を支えています。このライブラリは、実世界のエンタープライズ環境において堅牢性と保守性が証明されています。

いくつかの主要機能を見ていきましょう：

テーマ（Theme）

アプリに色テーマを選択できます。12 色のカラーパレットから選べ、それぞれにダークモードとライトモードが用意されています。デフォルトではユーザーのシステム設定を自動的に反映します。

すべてのテーマは同期されており、FrankenUI、DaisyUI、あるいは他のフレームワークでスタイリングされたコンポーネントかどうかに関わらず、同じページ上のコンポーネントが一貫して美しく表示されます。

テーマは、アプリ全体でカラーリングの一貫性を保つために必要なボイラープレート（定型コード）を追加します。

app, rt = fast_app(hdrs=Theme.blue.headers())

ベースコンポーネント（Base Components）

MonsterUI のすべての HTML 要素には、適切なデフォルトのスタイルが付与されています。Button は単なる HTML ボタンではなく、ホバー状態やフォーカスリング、一貫したパディングを備えたスタイル済みコンポーネントです。

Button("Save Changes")

MonsterUI では、スタイルの選択を容易にするため、ListT、TextT、ButtonT などのデータ構造（ListT, TextT, ButtonT など）を提供し、タブ補完機能もサポートしています。

例えば、テーマのプライマリカラーでスタイルを設定したい場合は、ButtonT.primary を使用します。プライマリカラーは、「カートに追加」や「送信」などのアクションボタンに使用されます。

Button("Add to Cart", cls=ButtonT.primary)

セマンティックテキストスタイル

Web の基盤の上に構築された MonsterUI は、HTML 仕様に基づいてセマンティックタグをスタイリングします。つまり、emphasis (), citation (), Marked (), small () など標準的な HTML タグを使用するテーマに一致するスタイル済み関数が用意されています。

Card(

H1("MonsterUI's Semantic Text"),

P(

Strong("MonsterUI"), " brings the power of semantic HTML to life with ",

Em("beautiful styling"), " and ", Mark("zero configuration"), "."),

Blockquote(

P("Write semantic HTML in pure Python, get modern styling for free."),

Cite("MonsterUI Team")),

footer=Small("Released February 2025"),

)

スマートレイアウトヘルパー

全体的なページレイアウトは、スマートなレイアウトヘルパー（DivVStacked, DivCentered, DivFullySpaced, Grid など）によってシンプルに作成されます。例えば、DivVStacked は要素を縦方向に積み重ねます。Grid はコンポーネントを配置するためのグリッドを作成します。

DivFullySpaced(

H1("Dashboard"),

DivRAligned(

Button("Export", cls=ButtonT.secondary),

Button("New Entry", cls=ButtonT.primary)))

スマートなレスポンシブカラムを持つグリッドレイアウト（モバイルとデスクトップ対応）

必要に応じてレスポンス性をカスタマイズするための引数が用意されています

Grid(map(TeamCard, products), cols_max=3)

注：詳細や高度な使用方法については、当社のレイアウトチュートリアルをご覧ください。

一般的な UI パターン

MonsterUI には、一般的な UI パターンのためのショートカットが含まれています。例えば、入力テキストボックスには通常、その用途を伝えるラベルが必要となるため、Label と Input のペアを作成するショートカットとして LabelInput を用意しています。

LabelInput("Name", id='myid')

Div, FormLabel, Input を使用してこれを自作することも可能ですが、このパターンは非常に一般的であるため、ショートカットを提供しました。以下がそのショートカットが置き換えるコードです：

Div(FormLabel('Name', fr='myid'),

Input(id='myid', name='myid'),

cls='space-y-2')

より高レベルなコンポーネント

また、ナビゲーションバー、モーダル、カード、テーブルといったより複雑なコンポーネントを生成するためのヘルパー関数も提供しています。これらはいずれも複数の基本コンポーネント（ModalContainer, ModalDialog など）の上に構築されているため、自分で組み上げることも可能です。ただし、ヘルパー関数を使用すれば、独自のボイラープレートコードを書く必要なく、必要な柔軟性をすべて得ることができます。これらのヘルパー関数は、モバイル端末でナビゲーションバーが自動的にハンバーガーメニューに折りたたまれるといった、優れたユーザーエクスペリエンス（UX）の動作を自動で作成してくれます。

例えば、モーダルを開くボタンを作成するには以下のように記述します：

Div(Button("Open Modal", uk_toggle="target: #my-modal" ),

Modal(ModalTitle("Simple Test Modal"),

P("With some somewhat brief content to show that it works!",

cls=TextPresets.muted_sm),

footer=ModalCloseButton("Close", cls=ButtonT.primary), id='my-modal'))

NoteExpand to see boilerplate you'd need if you weren't using MonsterUI

Div(Button('Open Modal', type='button', uk_toggle='target: #my-modal',

cls='uk-button uk-button-default'),

Div(Div(Div(H2('Simple Test Modal', cls='uk-modal-title'),

P('With some somewhat brief content to show that it works!',

cls='uk-text-muted uk-text-small'),

cls='uk-modal-body space-y-6'),

Div(Button('Close', type='button',

cls='uk-button uk-modal-close uk-button-primary'),

cls='uk-modal-footer'),

cls='uk-modal-dialog'),

uk_modal=True,

id='my-modal',

cls='uk-modal uk-modal-container'))

Rendering Markdown

MonsterUI は、Markdown をスタイリングされた HTML に変換する render_md 関数を提供しています。コードブロックには HighlightJS による構文強調表示が適用され、スタイリングには FrankenUI クラスと Tailwind が使用されます。

render_md("""

My Document

Important note here

+ List item with bold

+ Another with code

def hello():
    print("world")

""")

Getting Started

まず、pip を使用してインストールしてください:

pip install MonsterUI

MonsterUI のスタイリングを備えた新しい FastHTML アプリケーションを作成します:

from fasthtml.common import *

from monsterui.all import *

Choose a theme color (blue, green, red, etc)

hdrs = Theme.blue.headers()

Create your app with the theme

app, rt = fast_app(hdrs=hdrs)

@rt

def index():

socials = (('github','https://github.com/AnswerDotAI/MonsterUI'),

('twitter','https://twitter.com/isaac_flath/'),

('linkedin','https://www.linkedin.com/in/isaacflath/'))

return Titled("Your First App",

Card(

H1("Welcome!"),

P("Your first MonsterUI app", cls=TextPresets.muted_sm),

P("I'm excited to see what you build with MonsterUI!"),

footer=DivLAligned(*[UkIconLink(icon,href=url) for icon,url in socials])))

serve()

これで完了です！設定ゼロでスタイリングされたアプリケーションが完成しました。このアプリにはすでに以下の機能が含まれています:

ユーザーの環境設定に基づいた自動的なダークモード/ライトモード切り替え

適切にスタイリングされたタイポグラフィと間隔

あらゆるデバイスに対応するレスポンシブレイアウト

すぐに使用可能な美しい UI コンポーネント

DaisyUI、FrankenUI、Tailwind と同期したカラースキーム

詳細な例やコンポーネントのリファレンスについては、ドキュメントをご覧ください。