@infodb/create-myproj

v1.4.0

Published

8 months ago

> 🚀 Rspackを用いたモダンなReactプロジェクトを瞬時に作成するスキャフォールディングツール

0High
0Medium
0Low

infodb

cli

create-myproj

🚀 Rspackを用いたモダンなReactプロジェクトを瞬時に作成するスキャフォールディングツール

create-myprojは、TailwindCSS、shadcn/ui、TypeScriptが事前設定された高性能なReactプロジェクトテンプレートを提供します。最新のビルドツールRspackにより、高速な開発体験を実現します。

✨ 主な機能

⚡️ Rspack - webpackの代替となる超高速ビルドツール
🎨 TailwindCSS - ユーティリティファーストなCSSフレームワーク
🧱 shadcn/ui - 美しく再利用可能なUIコンポーネント群
⚛️ React 19 - 最新のReactライブラリ
📘 TypeScript - 型安全性とIntelliSenseサポート
📦 pnpm - 高速で効率的なパッケージマネージャー
🛣️ TanStack Router - モダンなクライアントサイドルーティング（オプション）
🎯 事前設定済み - 面倒な初期設定が不要

🚀 クイックスタート

基本的な使用方法

# プロジェクトの作成
pnpm create @infodb/myproj@latest -d my-app

# ディレクトリに移動
cd my-app

# 依存関係のインストール
pnpm install

# 開発サーバーの起動（ポート8080）
pnpm dev

インタラクティブモード

テンプレートを選択しながら作成する場合：

# テンプレート選択画面が表示されます
pnpm create @infodb/myproj@latest

# プロジェクト名を指定
? Enter project name: › my-awesome-app
? Select a template › 
❯ React with TypeScript
  TanStack Router

📋 利用可能なテンプレート

🎯 React with TypeScript (`react-ts`)

標準的なReact + TypeScriptプロジェクトテンプレート

含まれる技術スタック:

React 19 + TypeScript
TailwindCSS 4.1.10
shadcn/ui (New York style)
Rspack (Rsbuild)
PostCSS

適用ケース:

シンプルなSPAアプリケーション
プロトタイプ開発
小〜中規模のWebアプリ

🛣️ TanStack Router (`tanstack-router`)

クライアントサイドルーティング機能付きテンプレート

含まれる技術スタック:

上記のreact-tsに加えて
TanStack Router 1.121.12
Router DevTools
ファイルベースルーティング

適用ケース:

複数ページのWebアプリケーション
SPA with ルーティング
大規模なフロントエンドアプリ

📁 プロジェクト構造

生成されるプロジェクトの構造：

my-app/
├── public/                  # 静的アセット
├── src/
│   ├── app/                 # メインアプリケーション
│   │   └── App.tsx         # ルートコンポーネント
│   ├── components/         # 再利用可能なコンポーネント
│   │   └── ui/            # shadcn/uiコンポーネント（追加時）
│   ├── lib/
│   │   └── utils.ts       # ユーティリティ関数（cn等）
│   ├── routes/            # TanStackRouterのルート（該当テンプレートのみ）
│   ├── globals.css        # グローバルスタイル + TailwindCSS
│   └── main.tsx           # アプリケーションエントリーポイント
├── .gitignore              # Git除外設定
├── components.json         # shadcn/ui設定ファイル
├── index.html              # HTMLテンプレート
├── package.json            # プロジェクト設定・依存関係
├── postcss.config.js       # PostCSS設定
├── README.md               # プロジェクト説明
├── rsbuild.config.ts       # Rspack/Rsbuild設定
├── tailwind.config.js      # TailwindCSS設定
└── tsconfig.json           # TypeScript設定

🎨 shadcn/uiコンポーネントの使用

コンポーネントの追加

# 人気のコンポーネントを追加
pnpx shadcn@latest add button
pnpx shadcn@latest add card
pnpx shadcn@latest add input
pnpx shadcn@latest add form

# 一度に複数追加
pnpx shadcn@latest add button card input form

使用例

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export default function MyComponent() {
  return (
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle>Hello World</CardTitle>
      </CardHeader>
      <CardContent>
        <Button variant="outline">Click me</Button>
      </CardContent>
    </Card>
  )
}

🛠️ 開発コマンド

# 開発サーバーの起動（ホットリロード付き）
pnpm dev

# プロダクションビルド
pnpm build

# shadcn/uiコンポーネント追加
pnpx shadcn@latest add [component-name]

# 依存関係の更新
pnpm update

📖 詳細情報

参考リンク

バージョン要件

Node.js: 18.0.0以上
pnpm: 8.0.0以上推奨

🤝 コントリビューション

プロジェクトの改善にご協力いただけるすべての方を歓迎しています！

報告・提案

Issues - バグ報告や機能提案
Pull Requests - コード貢献

開発環境のセットアップ

# リポジトリをクローン
git clone https://github.com/tamuto/infodb-cli.git
cd infodb-cli/create-myproj

# 依存関係をインストール
pnpm install

# 開発モードでビルド
pnpm dev

# ローカルでテスト
pnpm create file:. -d test-app

📄 ライセンス

MIT License - 詳細はLICENSEファイルをご確認ください。

👥 クレジット

create-myprojはcreate-rstackをベースに構築されています。

Author: tamuto [email protected]
Repository: infodb-cli