はじめに
新しいプロジェクトを始めるたびに、毎回同じような設定を繰り返すのは正直しんどいですよね。TypeScriptの設定、ESLintの設定、データベース接続、API層の構築...。個人的にはこの「環境構築フェーズ」が一番テンション下がる瞬間だったりします。
そんな悩みを解決してくれるのが「Create Better T Stack」というCLIツール。これ、意外と知られてないんですけど、フルスタックTypeScriptプロジェクトの雛形を一発で作れて、しかも技術スタックを自由に選べるという優れものなんですよ。
Create Better T Stackとは
Create Better T Stackは、エンドツーエンドで型安全なTypeScriptプロジェクトを構築するためのCLIツールです。GitHubで4,500以上のスターを獲得していて、かなり活発に開発が進んでいます。
このツールの設計思想が個人的にすごく好きで、「必要な部分だけを選んで、余計なものは含めない」というシンプルな考え方がベースになっています。
特徴・メリット
選択の自由度が高い
Create Better T Stackの最大の魅力は、技術スタックを細かく選べること。フロントエンド、バックエンド、データベース、ORMなど、各レイヤーで複数の選択肢から好みのものを選べます。
フロントエンド
- React（TanStack Router / React Router / TanStack Start）
- Next.js
- Nuxt
- Svelte
- Solid
- React Native
バックエンド
- Hono
- Express
- Fastify
- Elysia
- Next API Routes
- Convex
API層
- tRPC
- oRPC
データベース
- SQLite
- PostgreSQL
- MySQL
- MongoDB
ORM
- Drizzle
- Prisma
- Mongoose
正直なところ、ここまで選択肢が豊富なスキャフォールディングツールはなかなかないですね。
エンドツーエンドの型安全性
tRPCやoRPCを使ったAPI層の構築により、フロントエンドからバックエンドまで完全に型安全な開発が可能になります。APIのレスポンス型を手動で定義する必要がなくなるので、開発効率がかなり上がります。
モノレポ構造のサポート
Turborepoを選択すれば、フロントエンドとバックエンドをモノレポで管理できます。大規模なプロジェクトでも、コードの共有や依存関係の管理がスムーズにできるのは地味に嬉しいポイントです。
常に最新の依存関係
生成されるプロジェクトは、デフォルトで各パッケージの最新安定版を使用します。古いバージョンで困ることがないのは時短になりますね。
インストール方法
インストールは非常にシンプル。お好みのパッケージマネージャーで実行するだけです。
# Bunを使用（推奨）
bun create better-t-stack@latest
# pnpmを使用
pnpm create better-t-stack@latest
# npmを使用
npx create-better-t-stack@latest
個人的にはBunを使うのがおすすめです。インストール速度が圧倒的に速いので。
基本的な使い方
インタラクティブモード
コマンドを実行すると、対話形式で技術スタックを選択できます。
bun create better-t-stack@latest my-app
実行すると以下のような質問が表示されます。
- プロジェクト名は？
- フロントエンドは何を使う？
- バックエンドは？
- データベースは？
- 認証機能は必要？
- Turborepoを使う？
それぞれ選択していくだけで、完全に設定済みのプロジェクトが生成されます。
Web UIでカスタムコマンドを生成
公式サイトのStack Builderを使えば、ブラウザ上で技術スタックを選択して、対応するコマンドを生成できます。CLIの対話形式が面倒な場合はこちらが便利です。
生成されるプロジェクト構造
例えばNext.js + Hono + tRPC + Drizzle + PostgreSQLを選んだ場合、以下のような構造が生成されます。
my-app/
├── apps/
│ ├── web/ # Next.jsフロントエンド
│ └── server/ # Honoバックエンド
├── packages/
│ ├── api/ # tRPC API定義
│ └── db/ # Drizzleスキーマ
├── turbo.json
├── package.json
└── tsconfig.json
モノレポ構造になっているので、packages/apiで定義した型がフロントエンドとバックエンド両方で共有されます。
実践的なユースケース
スタートアップのMVP開発
新規サービスのMVPを素早く作りたい場合に最適です。認証機能（Better-Auth）やデータベース接続がすでに設定済みなので、ビジネスロジックの実装にすぐ取りかかれます。
bun create better-t-stack@latest my-startup \
--frontend next \
--backend hono \
--database postgres \
--orm drizzle \
--auth
個人プロジェクトのプロトタイプ
週末に思いついたアイデアをサクッと形にしたい時も便利。SQLiteを選べばデータベースのセットアップすら不要で、すぐに開発を始められます。
技術検証・学習用プロジェクト
「tRPCってどんな感じ？」「Drizzle使ってみたい」といった技術検証にも使えます。ベストプラクティスに沿った設定がされているので、学習教材としても優秀です。
注意点
いくつか気をつけるポイントもあります。
- 学習コスト: tRPCやDrizzleなど、使い慣れていない技術を選ぶと最初は戸惑うかもしれません
- カスタマイズの限界: 生成後に大幅なアーキテクチャ変更が必要になると、結局手作業が発生します
- 依存関係の多さ: フルスタック構成にすると依存パッケージが増えるので、メンテナンスコストは考慮が必要です
まとめ
Create Better T Stackは、フルスタックTypeScript開発の環境構築を劇的に効率化してくれるツールです。
- 豊富な技術スタックの選択肢
- エンドツーエンドの型安全性
- モダンなモノレポ構造
- 最新のベストプラクティス
30代になって思うのは、こういう「面倒な作業を自動化してくれるツール」の価値って本当に大きいということ。空いた時間で本質的な開発に集中できるので、QOLが確実に上がります。
新しいTypeScriptプロジェクトを始める予定がある方は、ぜひ一度試してみてください。正直なところ、一度使うと手放せなくなると思います。