Nasu Stack

追記(2026-10-07)：v2.1.1 まで更新しました。変更点は末尾の「更新履歴」と Nasu Stack v2 を公開しましたを参照してください。

「初心者は困らせない、ベテランは縛らない」を目標にした、React / Astro 向けのコンポーネント集とスターターテンプレートです。ノーコードのビジュアルビルダーと素のフレームワークの間、コードは触れるけれど全部は組み立てられない層を対象にしています。

見た目だけのコンポーネントは含みません。shadcn のブロック市場にすでに2500個以上あるためです。入っているのは状態を持つコンポーネントとレイアウトコンポーネントの2種類だけで、v1.0.0 時点で40個を個別配布しています。

カタログ（実物が触れます）: nasu726.github.io/Nasu-Stack/catalog/
デモサイト（参考実装）: nasu726.github.io/Nasu-Stack/demo/

主なコンポーネント

状態を持つもの: ActionButton（ローディング・エラー・二重送信防止）、AsyncForm + Field、DataList / DataTable、AsyncSelect、FileDrop、Toast、ConfirmDialog
レイアウト: PageBlock / Section / Stack / Inline / Columns / Tiles / Spread / Box
フック: useAction / useResource / useInteractionGuard / useOptimisticList
生成系: buildMeta（SEO / JSON-LD）、buildSitemap、buildRss

設計思想

Theme     : tokens.css / themes.css
   ↓
Layout    : Stack / Columns / Tiles ...
   ↓
Component : ActionButton / AsyncForm ...
   ↓
Contract  : Action<TInput, TOutput>

すべては一つの契約に落ちます。

type Action<TInput, TOutput> = (
  input: TInput,
  ctx: { signal: AbortSignal }
) => Promise<TOutput>;

Promise を返す関数でありさえすればよいので、バックエンドを選びません。失敗はすべて ActionError に正規化されます。

そのほかの原則：

コンポーネントは外側の余白を持たない — 余白はレイアウトコンポーネントだけが持つ
制約はデフォルトであって壁ではない — 余白は9段階だが space="13px" も通る
乗り換えではなく「降りる」 — ActionButton → Button + useAction() → useInteractionGuard() → 素のReact
静かに縮退する — ActionProvider が無ければ通知が消えるだけ、ConfirmProvider が無ければ window.confirm にフォールバック
JSを使わずに済むなら使わない — モバイルメニューは useState ではなく <details>

責任境界

UIライブラリは「安全そうに見えるもの」を提供してしまうので、境界を docs/boundaries.ja.md に明文化しています。

担当する: レイアウト、非同期の状態管理、ローディング / エラー表示、部品内部のアクセシビリティ（フォーカス・キーボード・ARIA）、二重送信の防止と中断シグナル

担当しない: 認証・認可、サーバ側の正典バリデーション、CSRF対策、レート制限、ボット対策、アップロードの実体検査、中断時のサーバ側ロールバック保証

FileDrop の accept / maxSize も HoneypotField もセキュリティ機構ではありません。最終的な判断は必ずサーバ側で行う必要があります。

品質チェック

数値を人間に読ませるのではなく、満たせなければビルドを落とす方式です。pnpm verify が29項目、pnpm verify:create が112項目を検査します（タップ領域24px以上、ARIA role、フォーカス復帰、画像のレイアウト領域確保、モーダル時のスクロールロックなど）。モバイル対応チェッカーは横はみ出し・小さすぎるタップ領域・16px未満の入力欄などを検出し、npm run check で CI に組み込めます。

導入

npx https://github.com/Nasu726/Nasu-Stack/releases/download/v2.1.1/create-nasu-stack-2.1.1.tgz my-site

既存プロジェクトへの追加は shadcn 経由です。

npx [email protected] add Nasu726/Nasu-Stack/action-button

npm 名は未取得のため、npx create-nasu-stack は実行しないでください（無関係な第三者のコードが実行されます）。配布は GitHub Release のみです。ライセンスは MIT。

更新履歴

v2.1.1 (2026-09-28) — セキュリティパッチ。Astro の下限を 7.2.10、Sharp を 0.35.4 に上げ、Astro / Blog 雛型の high 以上の既知の脆弱性をゼロにした
v2.1.0 (2026-09-01) — 実アプリで責任境界を確かめる dogfooding を開始。1本目の Repository Pulse（公開リポジトリの概要・Issue / PR 検索・リリース表）を repository-pulse 雛型として配布。AsyncForm / AsyncSelect / createSubmit の境界の不整合も修正
v2.0.1 (2026-08-30) — 外部レビューで見つかった不具合を修正。GitHub Immutable Releases を有効にし、main 上で Pages の検証に通ったコミットだけをリリースできるようにした
v2.0.0 (2026-08-27) — 2つ目の安定版。validation・use-autosave・copy-button・error-boundary・field-array・paginator・popover・load-more-list・search-list など11個を追加し、合計51個に。唯一の意図的な挙動変更として、useAction は VALIDATION / HTTP 422 を自動リトライしなくなった。v1 の配布物・export・トークンは削除していない。リリース前の検査は33段階
v1.0.0 (2026-08-20) — 最初の安定版。詳しくは Nasu Stack v1.0.0 を公開しました

v2 でも責任境界は変わりません。認証・認可・サーバ側の正規のバリデーション・レート制限・冪等性・トランザクション・下書きの永続保存は、引き続きアプリ・サーバの責任です。既存のアプリを v2 へ上げる手順は移行ガイドにあります。