プロジェクト作成コマンド ジェネレータ フレームワーク
Next.js / Nuxt / Astro / SvelteKit / Remix / Solid Start の 6大フレームワーク に対応した、プロジェクト初期化コマンドのジェネレータです。プロジェクト名・TypeScript・Tailwind・パッケージマネージャ等のオプションをUIで選択するだけで、create-XXX-app の完全なコマンドが生成されます。コピーしてターミナルに貼り付けるだけで即時開発開始できます。
Next.js 15 プロジェクト作成
create-next-appApp Router 標準・Turbopack 高速ビルド・サーバーコンポーネント対応。React 19 を搭載した最新の Next.js 15 プロジェクトを作成します。
生成されたコマンド
📋 実行後の流れ
1. 上記コマンドをターミナルにコピー＆ペーストして実行2. 完了したら
cd my-next-app で移動3.
npm run dev で開発サーバ起動 (デフォルト http://localhost:3000)
Nuxt 3 プロジェクト作成
nuxi initVue 3 をベースに SSR・SSG・ハイブリッドレンダリングに対応した Nuxt 3 プロジェクトを作成します。nuxi init コマンドを使用します。
生成されたコマンド
📋 実行後の流れ
1. 上記コマンドをターミナルにコピー＆ペーストして実行2. 完了したら
cd my-nuxt-app で移動3.
npm run dev で開発サーバ起動 (デフォルト http://localhost:3000)
Astro 5 プロジェクト作成
create astro静的サイトジェネレータの Astro 5 プロジェクトを作成します。ブログ・ドキュメント・ポートフォリオ等、コンテンツ中心のサイトに最適です。
生成されたコマンド
📋 実行後の流れ
1. 上記コマンドをターミナルにコピー＆ペーストして実行2. 完了したら
cd my-astro-site で移動3.
npm run dev で開発サーバ起動 (デフォルト http://localhost:4321)
SvelteKit プロジェクト作成
npx sv createSvelte 5 ベースのフルスタックフレームワーク SvelteKit を作成します。コンパイル時最適化により、軽量・高速な実行が特徴です。
生成されたコマンド
📋 実行後の流れ
1. 上記コマンドをターミナルにコピー＆ペーストして実行2. 対話形式で確認画面が表示されるので Enter で進める
3. 完了したら
cd my-svelte-app で移動4.
npm install → npm run dev で開発サーバ起動 (デフォルト http://localhost:5173)
Remix プロジェクト作成
create-remixReact ベース・Web 標準準拠のフルスタックフレームワーク Remix を作成します。loader/action による楽な状態管理が特徴です。
生成されたコマンド
📋 実行後の流れ
1. 上記コマンドをターミナルにコピー＆ペーストして実行2. 完了したら
cd my-remix-app で移動3.
npm run dev で開発サーバ起動 (デフォルト http://localhost:5173)
Solid Start プロジェクト作成
npm create solidSolid.js ベースのフルスタックメタフレームワーク Solid Start を作成します。Virtual DOM を使わず細粒度リアクティブで高速動作します。
生成されたコマンド
📋 実行後の流れ
1. 上記コマンドをターミナルにコピー＆ペーストして実行2. 対話形式でテンプレート確認画面が表示されるので Enter で進める
3. 完了したら
cd my-solid-app で移動4.
npm install → npm run dev で開発サーバ起動 (デフォルト http://localhost:3000)
使い方
- 6つのフレームワークから対象を選択 (タブ切替)
- プロジェクト名・パッケージマネージャ・各種オプションを選択
- 下部にリアルタイムで生成されるコマンドをコピー
- ターミナルに貼り付けて実行 (1コマンドで完結)
このツールが解決する課題
- 毎回ドキュメントを開く手間を省く: 6FW分のオプションを1ページに集約
- オプション漏れの防止: TypeScript・Tailwind・ESLint等の必須項目を見落とさない
- パッケージマネージャ統一: 案件ごとに pnpm / yarn / bun に切り替える際の指定ミス防止
- 新人エンジニアの教育: 各FWのオプションがUI上で理解できる
各フレームワークの create コマンドの違い
- Next.js:
npx create-next-app@latest(オプション豊富) - Nuxt:
npx nuxi@latest init(テンプレート選択型) - Astro:
npm create astro@latest(公式テンプレート豊富) - SvelteKit:
npx sv create(アドオン形式) - Remix:
npx create-remix@latest(Stackテンプレート選択) - Solid Start:
npm create solid@latest(テンプレート選択型)