最新フレームワーク プレイグラウンド フレームワーク
Next.js 15 / Nuxt 3 / Astro 5 / SvelteKit / Remix / Solid Start の6大モダンフレームワークをブラウザ内でその場で試せるプレイグラウンド。概要・特徴・サンプルコード・StackBlitz起動を1ページに集約。学習・技術選定の初手にお使いください。
Next.js 15
React ベース 最新: 15.x / 開発元: VercelNext.js はReact上で動作するフルスタックフレームワークです。SSR (サーバサイドレンダリング)、SSG (静的サイト生成)、ISR (差分再生成)、サーバコンポーネント、API Routes、画像最適化、フォント最適化、middlewareなどを標準搭載。Vercelが開発・運営し、世界中の大規模Webサービスで採用されています。
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-center p-24">
<h1 className="text-4xl font-bold">
ようこそ Next.js 15 へ
</h1>
<p className="mt-4 text-lg">
App Router + React Server Components
</p>
</main>
);
}
npx create-next-app@latest my-app cd my-app npm run dev
Nuxt 3
Vue.js ベース 最新: 3.x / 開発元: NuxtLabsNuxt はVue.js 上で動作するフルスタックフレームワークです。Vue 3 + Vite + Nitro エンジンで構築されており、SSR / SSG / SPA / ハイブリッドの全モードに対応。ファイルベースルーティング、自動インポート、サーバAPI、TypeScript標準対応など、開発体験を重視した構成が特徴です。
<script setup>
const message = ref('ようこそ Nuxt 3 へ')
</script>
<template>
<main class="flex min-h-screen flex-col items-center justify-center p-24">
<h1 class="text-4xl font-bold">{{ message }}</h1>
<p class="mt-4 text-lg">
Vue 3 + Vite + Nitro エンジン
</p>
</main>
</template>
npx nuxi@latest init my-app cd my-app npm install npm run dev
Astro 5
マルチフレームワーク 最新: 5.x / 開発元: The Astro Technology CompanyAstro はコンテンツ重視のWebサイトに特化した高速フレームワークです。デフォルトではJavaScriptを一切送らない「Zero-JS by default」設計で、必要な箇所だけインタラクティブにするIslands Architectureを採用。React / Vue / Svelte / Solid / Preact など、複数のUIフレームワークを1つのプロジェクト内で混在させて使えます。
---
const message = 'ようこそ Astro 5 へ';
---
<html lang="ja">
<head>
<title>Astro Site</title>
</head>
<body class="flex min-h-screen flex-col items-center justify-center p-24">
<h1 class="text-4xl font-bold">{message}</h1>
<p class="mt-4 text-lg">
Zero-JS by default + Islands Architecture
</p>
</body>
</html>
npm create astro@latest my-app cd my-app npm run dev
SvelteKit
Svelte ベース 最新: 2.x (Svelte 5) / 開発元: Svelte SocietySvelteKit はSvelte をベースにしたフルスタックフレームワークです。コンパイラ駆動型で、ビルド時に純粋なJSに変換されるため、ランタイムが極めて軽量なのが最大の特徴。SSR / SSG / SPA / Edge デプロイのいずれにも対応し、ファイルベースルーティング、フォームアクション、ロードファンクション等の機能を標準搭載。Svelte 5 ではルーンと呼ばれる新しいリアクティビティ機構を採用しました。
<script>
let count = $state(0);
</script>
<main class="flex min-h-screen flex-col items-center justify-center p-24">
<h1 class="text-4xl font-bold">
ようこそ SvelteKit へ
</h1>
<p class="mt-4 text-lg">
Svelte 5 ルーン + コンパイラ駆動
</p>
<button onclick={() => count++}>
クリック数: {count}
</button>
</main>
npx sv create my-app cd my-app npm install npm run dev
Remix
React ベース 最新: 2.x / 開発元: ShopifyRemix はWebの基礎 (HTML / フォーム / HTTP) に立脚したReact製フレームワークです。React Router の開発元が手がけており、現在は Remix の機能が React Router v7 に統合される流れになっています。Web標準への忠実さ、JS無効でも動く堅牢性、ローダー (loader) とアクション (action) によるデータフローのシンプルさが特徴。
import type { MetaFunction } from "@remix-run/node";
export const meta: MetaFunction = () => {
return [{ title: "Welcome to Remix" }];
};
export default function Index() {
return (
<main className="flex min-h-screen flex-col items-center justify-center p-24">
<h1 className="text-4xl font-bold">
ようこそ Remix へ
</h1>
<p className="mt-4 text-lg">
Web標準準拠 + ローダー&アクション
</p>
</main>
);
}
npx create-remix@latest my-app cd my-app npm run dev
Solid Start
SolidJS ベース 最新: 1.x / 開発元: SolidJS Core TeamSolid Start はSolidJS をベースにしたフルスタックフレームワークです。Solid は仮想DOMを使わず細粒度リアクティビティで更新する設計で、ベンチマーク上もっとも速いUIフレームワークの一つ。Reactに似たJSX構文を使いながら、桁違いのパフォーマンスを実現。SSR / SSG / API Routes / アイランド構成にすべて対応。
import { createSignal } from "solid-js";
export default function Home() {
const [count, setCount] = createSignal(0);
return (
<main class="flex min-h-screen flex-col items-center justify-center p-24">
<h1 class="text-4xl font-bold">
ようこそ Solid Start へ
</h1>
<p class="mt-4 text-lg">
細粒度リアクティビティ + Signals
</p>
<button onClick={() => setCount(count() + 1)}>
クリック数: {count()}
</button>
</main>
);
}
npm init solid@latest my-app cd my-app npm install npm run dev
🔍 6フレームワーク 機能比較
| 機能 | Next.js | Nuxt 3 | Astro | SvelteKit | Remix | Solid Start |
|---|---|---|---|---|---|---|
| UIライブラリ | React | Vue 3 | マルチ | Svelte 5 | React | SolidJS |
| SSR | ◯ | ◯ | ◯ | ◯ | ◎ | ◯ |
| SSG | ◯ | ◯ | ◎ | ◯ | △ | ◯ |
| Zero-JS デフォルト | × | × | ◯ | × | × | × |
| ファイルベース ルーティング | ◯ | ◯ | ◯ | ◯ | ◯ | ◯ |
| 初期ロード速度 | 中 | 中 | 速 | 速 | 中 | 速 |
| バンドルサイズ | 中 | 中 | 小 | 最小 | 中 | 小 |
| 大規模Webアプリ | ◎ | ◯ | △ | ◯ | ◯ | ◯ |
| コンテンツ サイト | △ | △ | ◎ | ◯ | △ | △ |
| 学習コスト | 中〜高 | 中 | 低〜中 | 低〜中 | 中 | 中 |
| コミュニティ規模 | 最大 | 大 | 中〜大 | 中 | 中 | 中 |
使い方
- タブで Next.js / Nuxt 3 / Astro を切り替え
- 各FWの概要・特徴・サンプルコードを確認
- 「StackBlitz で起動」ボタンで、ページ内に開発環境を埋め込んで即試せる (初回ロード10〜20秒)
- もしくは「別タブで開く」で、StackBlitz 単独ページで本格的に編集可能
- 気に入ったら表示されたコマンドをコピーして、自分のPCに新規プロジェクト作成
どう選ぶか (技術選定の参考)
- React 経験者・大規模Webアプリ・Vercel デプロイ → Next.js
- Vue 経験者・直感的なコンポーネント開発・モジュール豊富さ重視 → Nuxt 3
- ブログ・LP・コンテンツサイト・初期表示速度最優先・複数FW混在 → Astro 5
- 迷ったら → 一番触りやすい言語感 (JSX が好きなら Next、Template が好きなら Nuxt、HTMLに近いのが好きなら Astro)
StackBlitz について
- StackBlitz はブラウザ内で Node.js が動く WebContainers 技術を使った開発環境です
- npm install もブラウザ内で実行されるため、ローカルに開発環境がなくても本物のフレームワークが動きます
- 初回ロードは依存パッケージのインストールがあるため10〜20秒かかります
- 編集すれば即プレビューに反映されます
- 無料で利用可能 (より高機能な利用には StackBlitz の有料プランあり)