mcpField
R
react-ui

react-ui

github.com/val-town開発1042 回インストール5 週間前に更新
リポジトリ

react-ui について

Val Town で React UI を作成するためのガイドです。ファイル構成、スタイル、アセット配信、ソースリンク、UI val の検証方法を扱います。

主な機能

  1. 01React UI コンポーネントの規約
  2. 02Twind と Tailwind によるスタイル設定
  3. 03不変アセットの配信
  4. 04UI val のソースリンク
  5. 05UI の検証手順

活用シーン

  1. 01インタラクティブな val UI の作成
  2. 02TSX ファイルでの UI 構成
  3. 03ページ表示とブラウザーエラーの確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/val-town/plugins --skill react-ui

インストール後、Claude Code で/react-uiを入力して読み込まれたか確認します。

詳細

React UI

UI を描画するあらゆる val では、ユーザーから別途指示がない限り、.tsx ファイルの React コンポーネントで構築してください。templates/react-hono-starter テンプレートはこの用途向けに設定されています。ゼロから構築するのではなく、remix_val を使ってそこから始めてください。

ファイルの規約

マークアップ、スタイル、スクリプトは実際のファイルに記述してください。テンプレートリテラル文字列（例：new Response(\...`)`）は避けてください。テンプレート文字列内のコードには、構文のハイライトも、リントも、型チェックも適用されず、レビューもできません。

  • .tsx — React/JSX コンポーネント、ロジックやインタラクティブな要素を含む UI
  • .html — 純粋な静的マークアップ
  • .ts — サーバーコードとスクリプト

UI は .tsx ファイルでコンポーネントごとに構築してください。巨大なページを一度に描画するのではなく、小さなコンポーネントを組み合わせてください。

スタイリング：Twind + Tailwind

ビルドステップが不要な Twind を使い、実行時に Tailwind ユーティリティクラスを適用してください。HTML シェルにスクリプトを追加します。

<script src="https://cdn.twind.style" crossorigin></script>

その後、JSX で Tailwind クラスを直接使用します。

<div className="flex items-center gap-4 p-6 rounded-lg bg-white shadow">
  <h1 className="text-2xl font-bold">Hello</h1>
</div>

ユーザーから別途指示がない限り、インラインの <style> タグ、CSS-in-JS オブジェクト、個別の .css ファイルは避けてください。

アセットの配信：バージョン管理と不変性

std/utils の serveImmutableFile を使ってクライアントモジュールを配信してください。ブラウザーはこれらを不変のものとしてキャッシュし、公開時に val のバージョンが上がると、自動的にキャッシュが無効になります（全体的なパターンについては、client-side-js スキルを参照してください）。キャッシュされない frontend/root.tsx シェル（hono/jsx）では、immutableFileUrl を使ってエントリーファイルとファビコンにバージョン情報を付与します。

// frontend/root.tsx — in the Root() HTML shell:
<script src={immutableFileUrl("/frontend/index.tsx")} type="module" />

// index.ts:
app.get("/", (c) => c.html(Root()));
app.get("/__immutable/*", (c) => serveImmutableFile(c.req.path));

ソースコードへのリンク

すべての UI val には、ユーザーがソースコードを確認し、リミックスできる方法を用意してください。次の両方が必要です。

  1. バックエンドのルート： 
    import { parseVal } from "https://esm.town/v/std/utils/index.ts";
app.get("/source", (c) => c.redirect(parseVal().links.self.val));
  2. フロントエンドに表示するリンク： 
    <a href="/source">view source</a>

React のバージョン固定

よくあるエラー — "Cannot read properties of null (reading 'useState')" — は、React の依存パッケージが異なるバージョンの React を読み込んでいることを意味します。React 関連のすべてのインポートで、バージョンを 18.2.0 に固定してください。

import SomeLib from "https://esm.sh/[email protected],[email protected]";

アセット

問題が発生する可能性のある外部画像やホスト型アセットは使用しないでください。次を推奨します。

  • 絵文字または Unicode 記号
  • インライン SVG
  • CDN 経由のアイコンフォント（Lucide、Font Awesome）

クライアント側エラーの表示

ブラウザーのエラーを val のログ（get_logs で確認可能）に送信するには、HTML シェルに次のスクリプトを含めてください。

<script src="https://esm.town/v/std/catch"></script>

変更の検証

UI val を編集した後は、fetch_val_endpoint を呼び出してページがエラーなく表示されることを確認し、続いて get_logs でクライアント側のエラーがないか確認してください。両方を確認するまでは、変更が完了したと報告しないでください。

コメント

Markdown 対応