ブラウザ向けの画面を作る
「操作できる Web 画面を作りたい」
この目的で選ぶときに見る軸
- レンダリング方式
- 学習コスト
- エコシステム
下の表の「主要制約」は各ツールで最も先に当たる制約。軸ごとの値はツール詳細の制約表で確認する。
この目的に使える手段（5件）
| ツール | 分類 | 種別 | 学習 | 料金 | 成熟 | 主要制約 | 検証 |
|---|---|---|---|---|---|---|---|
| Astro 既定でJavaScriptを出さない静的サイト生成器。必要な部分だけ島として動かす | 画面・フロントエンド | フレームワーク | 低 | 無料 | 安定 | 島（Island）の間の状態共有：部分ハイドレーションされた島の間では React Context 等のコンテキストラッパーが使えない。共有には Nano Stores（1 KB 未満、依存なし）のような外部ストアが推奨される | |
| React コンポーネントと状態でUIを組む、ブラウザ画面向けのJavaScriptライブラリ | 画面・フロントエンド | フレームワーク | 中 | 無料 | 安定 | フック呼び出しの制約（Rules of Hooks）：フックは関数コンポーネントかカスタムフックの最上位でのみ呼べる。条件分岐・ループ・早期 return の後・イベントハンドラ・try/catch・useMemo や useEffect に渡す関数の中・クラスコンポーネントでは呼べない | |
| SvelteKit Svelteでルーティング・サーバー処理・静的出力までを完結させるフレームワーク | 画面・フロントエンド | フレームワーク | 中 | 無料 | 安定 | デプロイ先ごとのアダプタ選定：ビルド出力をデプロイ環境向けに変換する「アダプタ」の指定がsvelte.config.jsで必須。公式にNode・Cloudflare・Netlify・Vercel・静的サイト(adapter-static)向けがある | |
| TypeScript JavaScriptに静的型を足した言語。Node.jsでブラウザとサーバーを同じ言語で書く | 言語・実行環境 | 言語 | 中 | 無料 | 安定 | 型の実行時消失：型注釈は JavaScript の一部ではなく、コンパイル時に完全に削除される。型が実行時の動作を変えることはない | |
| Next.js Reactにルーティング・サーバー描画・APIを足した、Web アプリのフレームワーク | 画面・フロントエンド | フレームワーク | 高 | 無料 | 安定 | 静的エクスポートで使えない機能：output を export にすると Cookie、Rewrites・Redirects・Headers、Proxy、ISR、既定ローダーの画像最適化、Draft Mode、Server Actions、Intercepting Routes、generateStaticParams のない動的ルートが使えない。Route Handler は GET のみ、force-static の明示が必要 |