ベストプラクティスの宝庫!! Better-T Stackで始めるフルスタックTypeScript開発
近年のTypeScriptは、その汎用性の高さからフロントエンド、バックエンド、さらにはインフラ管理（IaC）までをカバーする強力な言語となりました。コードベースをTypeScriptに統一することで、型定義やロジックの共有が容易になり、広大なエコシステムをどの環境でも活用できるというメリットがあります。
しかしその一方で、広大すぎるエコシステムの中から、自身のプロジェクトに最適なライブラリやツールを選び出し、適切に組み合わせて開発環境を構築することは、多くの開発者にとって大きな課題となっています。
Better-T Stackとは
Better-T Stackは、最新のベストプラクティスに基づいたフルスタック環境を、単一のCLIコマンドで構築できるツールです。
GitHubのスター数は既に1,600を超え、急速に注目を集めていることが伺えます。（v1が2024年後半にリリースされたことを考えると、その勢いが分かります）
対話形式のCLIを通じて、フロントエンド、バックエンド、データベース、認証などの技術スタックを自由に選択でき、Webアプリケーションからネイティブアプリまで、一貫した開発環境を瞬時に構築します。
Better-T Stackの特徴
Better-T Stackは、45種類以上の技術スタックに対応しており、11のカテゴリから好みの構成を選択するだけで、最適なプロジェクト構成をセットアップしてくれます。
公式サイトの対応スタック
機能
- 対話型CLI: 質問に答えるだけで、設定ファイル不要（ゼロコンフィグ）なセットアップを実現。
- エンドツーエンドの型安全性: tRPCを採用し、データベースからフロントエンドまで一貫した型安全性を確保。
- モダンな技術スタック: React、Hono/Elysia、TanStackライブラリなど、現代的な開発で人気のツール群を採用。
- マルチプラットフォーム対応: Web、モバイル（Expo）、デスクトップ（Tauri）をサポート。
- 柔軟なデータベース選択: SQLite (Turso) または PostgreSQL から選択可能。
- 選べるORM: Drizzle または Prisma から選択可能。
- 組み込み認証: Better-Authによるモダンな認証機能を統合。
- その他: PWA対応、Turborepoによるモノレポアーキテクチャなど、豊富なオプション。
Better-T Stackの使い方
Better-T Stackは、プロジェクトの初期構築を支援するCLIツールです。一度セットアップが完了すれば、あとは使い慣れたTypeScript環境で開発を進めるだけです。
基本的な使い方
Node.jsが利用可能なコマンドライン環境があれば、すぐに始められます。
以下のコマンドを実行すると、対話形式でプロジェクトの構成を選択していきます。
# Using npm
npx create-better-t-stack@latest
# Using bun
bun create better-t-stack@latest
# Using pnpm
pnpm create better-t-stack@latest
◇ Enter your project name or path (relative to current directory)
│ → プロジェクトのディレクトリの名前（default:my-better-t-app）
│
◆ Select platforms to develop for
│ → webかモバイルか
│ ◼ Web (React, Vue or Svelte Web Application)
│ ◻ Native
│
◆ Choose web
│ → フロントエンド構成
│ ● TanStack Router (Modern and scalable routing for React Applications)
│ ○ React Router
│ ○ Next.js
│ ○ Nuxt
│ ○ Svelte
│ ○ Solid
│ ○ TanStack Start (devinxi)
│
◆ Select backend
│ → バックエンド構成
│ ● Hono (Lightweight, ultrafast web framework)
│ ○ Next.js
│ ○ Express
│ ○ Fastify
│ ○ Elysia
│ ○ Convex
│ ○ None
│
◆ Select runtime
│ → ランタイムの選択
│ ● Bun (Fast all-in-one JavaScript runtime)
│ ○ Node.js
│ ○ Cloudflare Workers (beta)
│
◆ Select database
│ → データベースの選択
│ ○ None
│ ● SQLite (lightweight, server-less, embedded relational database)
│ ○ PostgreSQL
│ ○ MySQL
│ ○ MongoDB
│
◆ Select ORM
│ → ORMライブラリの選択
│ ● Drizzle (Lightweight and performant TypeScript ORM)
│ ○ Prisma
│
◆ Select API type
│ → apiの通信方式
│ ● tRPC (End-to-end typesafe APIs made easy)
│ ○ oRPC
│ ○ None
│
◆ Add authentication with Better-Auth?
│ → 認証ライブラリとして、Better-Authを利用するか
│ ● Yes / ○ No
│
◆ Select addons
│ → アドオンのライブラリ
│ ◼ Turborepo (Recommended) (Optimize builds for monorepos)
│ ◻ Starlight
│ ◻ Biome
│ ◻ Husky
│ ◻ PWA (Progressive Web App)
│ ◻ Tauri Desktop App
│
◆ Include examples
│ → 初期セットアップするアプリ
│ ◻ Todo App (A simple CRUD example app)
│ ◻ AI Chat (A simple AI chat interface using AI SDK)
│
◆ Select sqlite setup option
│ → SQLiteベースのクラウドDBサービス「Truso」の利用可否
│ ○ Turso
│ ● None (Manual setup)
│
◆ Initialize git repository?
│ → gitの初期化をするか
│ ● Yes / ○ No
│
◆ Choose package manager
│ → パッケージマネージャーの選択
│ ○ npm (Node Package Manager)
│ ○ pnpm
│ ● bun
│
◆ Install dependencies?
│ → パッケージのインストールを行うか
│ ● Yes / ○ No
│
◆ Project template successfully scaffolded!
│
└ Project created successfully in 771.74 seconds!
Builderでポチポチするだけで必要な構成をセットアップ
CLIでの対話操作が不要な場合は、公式サイトのBuilderが便利です。
GUIで好みのスタックを選択すると、実行に必要なコマンドが自動で生成されます。このコマンドを保存しておけば、いつでも同じ構成をワンライナーで再現できます。
Better-T-Stackで作るフルスタック環境
Better-T-Stackでは、45個のライブラリに対応しており、11個のディレクトリでそれぞれ必要なライブラリーを選択します。
フロントエンド（+Mobile）
| 構成 | 概要 |
|---|---|
| TanStack Router | 宣言的で型安全なルーティングを実現する軽量ライブラリ。URL解決～データ取得・プリフェッチを統合し、Reactなど任意FWでSPA/MPAを構築可能。 |
| React Router | Reactアプリケーションで最も広く利用されているルーティングライブラリ。入れ子ルートや遅延ロードを簡潔に記述し、豊富なコミュニティ資産で堅牢なナビゲーションを実装できる。 |
| TanStack Starter | Router・Queryなど主要パッケージをプリセット。型安全なデータ取得とキャッシュ戦略が整っており、実務級アプリを即座に立ち上げられるスターター。 |
| Next.js | Reactベースのフルスタックフレームワーク。App Router・Edge FunctionsでSSR/SSGを高速化し、画像最適化や国際化も組み込み、パフォーマンスと開発者体験を両立。 |
| Nuxt | Vue用メタフレームワーク。ファイルベースルーティングとNitroサーバーによりSSR/SSG/PWAを簡単構築。多彩なモジュールと自動コード分割で高速サイトを実現。 |
| Svelte | 仮想DOMを使用せず、コンパイル時にコードを最適化することで高速な動作を実現するコンパイラベースのUIフレームワーク。より少ないコードでアプリケーションを構築。 |
| Solid | JSXを使用し、リアクティブなプリミティブを基盤としたUIライブラリ。仮想DOMを使用しないため、高速なパフォーマンスを実現します。Reactに似た開発体験を提供 |
| react-native/nativewind | TailwindのクラスをReact Nativeのコンポーネントに直接適用でき、効率的なスタイリングが可能 |
| react-native/unistyles | React Native向けの新しいスタイリングソリューション。型安全補完とキャッシュで高速描画、複雑なデザインシステムを統一可能。 |
バックエンド
| 構成 | 概要 |
|---|---|
| hono | TypeScriptで書かれた、高速で軽量なWebフレームワーク。Cloudflare WorkersやBunなど、様々なJavaScriptランタイムで動作します。ミドルウェアで機能を拡張 |
| Next.js | Route Handlers と Server Actions で API と UI を統合。Edge ランタイムやストリーミング対応でフロント主導の高速バックエンドを構築。 |
| Elysia | Bunランタイムに最適化された、高速なWebフレームワーク。型推論やスキーマバリデーションを備え、gRPC ライクな宣言で REST/WebSocket を超高速提供。 |
| Express | Node.js 定番のミニマルなフレームワーク。豊富なミドルウェアとドキュメントがあり、柔軟性が高く、多くの利用実績がある。 |
| fastify | プラグイン駆動の高速 HTTP サーバー。JSON スキーマ検証と型補完で安全性を高め、オーバーヘッドが非常に低く、高速なアプリケーション開発を可能に |
| convex | フルスタックのTypeScript開発プラットフォーム。サーバーレス関数とリアルタイムデータベースを提供し、複雑なバックエンドの構築を簡素化。 |
データベース
| 構成 | 概要 |
|---|---|
| SQLite | 単一ファイルで動作する軽量な RDB。サーバーレス、Edge やモバイル・テスト環境に最適。小規模なシステムやモバイルアプリで広く利用。 |
| PostgreSQL | 高機能で信頼性の高いオープンソースのリレーショナルデータベース。SQLへの準拠度が高く、複雑なクエリや大規模なデータ処理に対応。 |
| MySQL | 世界で最も広く利用されているオープンソースのRDBの一つ。複数ストレージエンジンと柔軟なレプリケーションで水平スケールしやすく、長期運用実績多数。 |
| MongoDB | ドキュメント指向 NoSQL。柔軟なデータモデルが特徴で、スケーラビリティが高く、ビッグデータやリアルタイムアプリケーションに適し、Atlasで運用も簡単。 |
ランタイム
| 構成 | 概要 |
|---|---|
| Bun | パフォーマンスを重視して設計されたモダンなJavaScriptランタイム。高速な起動と実行速度が特徴で、TypeScriptやJSXをネイティブでサポート。 |
| Node | V8 上で動くデファクト JS ランタイム。npm エコシステムと LTS で安定運用、クロスプラットフォームで拡張性が高い。 |
| Cloudflare Worker | Cloudflareのグローバルネットワーク上でサーバーレスコードを実行するプラットフォーム。1 ms 未満のコールドスタートで低レイテンシ API を提供し、KV・D1 などと連携容易。 |
API
| 構成 | 概要 |
|---|---|
| tRPC | スキーマやコード生成を必要とせずに、エンドツーエンドで型安全なAPIを構築できるライブラリ。クライアントとサーバーで型を共有し、シームレスな開発体験を提供。 |
| oRPC | OpenAPI 互換の軽量 RPC。HTTP/2 ストリームや双方向通信をサポートし、tRPCライクでいて、よりエッジコンピューティングに最適化。 |
ORM
| 構成 | 概要 |
|---|---|
| Drizzle | 型安全 SQL DSL を提供する軽量 ORM。SQLに近い構文でクエリを記述でき、完全な型安全性を保ちながら、パフォーマンスの良いデータベース操作を実現。 |
| Prisma | 宣言的スキーマから型安全クライアントを生成。直感的なデータモデル定義と、型安全なデータベースクライアントにより、開発者の生産性を向上。 |
| mongoose | MongoDB向けODM（オブジェクトデータモデリング）ライブラリ。スキーマベースのソリューションで、モデルの定義、検証、ビジネスロジックのフックなどを提供。 |
データベースセットアップ
| 構成 | 概要 |
|---|---|
| Turso | SQLiteをベースにした、エッジ向けの分散データベースプラットフォーム。グローバルに分散したデータベースレプリカにより、ユーザーの近くでデータを読み書きでき、低遅延を実現。 |
| Neon | サーバーレスPostgreSQLプラットフォーム。コンピューティングとストレージを分離することで、効率的なスケーリングとコスト削減を実現。2025年5月にDatabricksに買収された。 |
| Prisma Postgres | Prisma Cloud 提供のマネージド PostgreSQL。Prismaの型安全なORMとPostgreSQLの堅牢性を活かした開発をサポート。 |
| MongoDB Atlas | 公式マネージド MongoDB。開発者によるインフラ管理を不要にし、運用負荷を大幅削減。 |
| Supabase | Firebaseの代替となるオープンソースプラットフォーム。PostgreSQLデータベース、認証、ストレージ、サーバーレス関数などを提供。 |
認証（Authentication）
| 構成 | 概要 |
|---|---|
| Better Auth | 最新のWeb標準に基づいた認証ソリューション。パスワードレス・OAuth・Magic Link を数行で導入し、型安全なセッションと SSO 連携を提供。 |
パッケージマネージャー
| 構成 | 概要 |
|---|---|
| npm | Node.jsの公式パッケージマネージャー。世界最大のソフトウェアレジストリであり、JavaScriptエコシステムの中心的な存在。 |
| pnpm | 高速でディスクスペース効率の良い次世代パッケージマネージャー。node_modulesの重複を避け、シンボリックリンクを利用して依存関係を管理。 |
| bun | 高速なJavaScriptランタイムであるBunに組み込まれたパッケージマネージャー。npm互換でありながら、非常に高速なインストールを実現。 |
アドオン
| 構成 | 概要 |
|---|---|
| pwa | Webサイトをネイティブアプリのように動作させるための技術群。オフライン対応、プッシュ通知、ホーム画面への追加などの機能を提供。 |
| Tauri | Web技術を使用して、クロスプラットフォームのデスクトップアプリケーションを構築するためのフレームワーク。Rustをバックエンドに利用し、低メモリ・安全 API で Electron 代替として注目。 |
| Starlight | Astro 公式ドキュメントサイト テンプレ。MDX・全文検索を備え、レスポンシブかつテーマカスタム容易なリファレンスサイトを即構築。 |
| Biome | ESLint・Prettier・Babel を統合した Rust 製ツールチェーン。高速 Lint/Format と単一設定で多言語を横断チェック。 |
| husky | Git フックを宣言的に管理。コミット前やプッシュ前に、リンターやテストを自動的に実行、CI前に品質を確保する。 |
| Truborepo | JS/TSのモノレポ向けに最適化された、高性能なビルドシステム。タスク依存キャッシュと並列実行でCI/CDを高速化し、大規模リポジトリ開発を効率化。 |
Better-T Stackで学ぶベストプラクティス
Better-T Stackは、様々なスタックを組み合わせられるだけでなく、そのデフォルト設定にこそ価値があります。ここでは、推奨されている構成を深掘りし、なぜそれが現代のフルスタックTypeScript開発におけるベストプラクティスと言えるのかを探求します。
フロントエンド: React/TanStack Router
Next.jsのようなメタフレームワークが主流の今、あえてReact (Vite) とTanStack Routerを組み合わせる選択は、関心の分離という重要な設計思想を反映しています。UI構築はReact、ルーティングやデータ取得はTanStackライブラリ群、と役割を明確に分けることで、フロントエンドとバックエンドを疎結合に保ち、それぞれを独立して進化させやすくします。
TanStack Routerは、ファイルベースルーティングの利便性と、強力なキャッシュ機構を持つTanStack Queryとのシームレスな統合を提供します。tRPCと組み合わせることで、APIエンドポイントを意識することなく、型安全なデータフェッチをコンポーネントに組み込め、開発体験が飛躍的に向上します。
バックエンド:Hono
バックエンドでは、高速かつ軽量なHonoが選択されています。
Honoは特定のランタイムに依存せず、Node.js、Bun、Deno、そしてCloudflare Workersのようなエッジ環境まで、Write once, run anywhereを体現します。これにより、将来的なインフラの変更にも柔軟に対応可能です。
ライブラリ自体は非常にスリムでありながら、ミドルウェアによる高い拡張性を持ちます。その圧倒的なパフォーマンスとシンプルさから、多くのユースケースでHonoが選ばれるようになっています。
データベース:SQLite / Turso
大規模開発ではPostgreSQLやMySQLが主流ですが、Better-T StackがSQLiteを推奨するのは、その手軽さとエッジへの親和性からです。SQLiteはサーバー不要で、単一のファイルとしてデータベースを扱えるため、ローカルでの開発セットアップが非常に簡単です。
その真価は、Tursoのような分散型プラットフォームとの組み合わせで発揮されます。TursoはSQLiteを世界中のエッジロケーションに分散配置し、ユーザーに最も近い場所でデータを読み書きさせることで、グローバル規模での超低遅延を実現します。この「ローカルのシンプルさ」と「グローバルのパフォーマンス」の両立が、SQLiteを現代的な選択肢にしています。
ランタイム:Bun
Bunは単なる高速なJavaScriptランタイムだけにとどまらず、パッケージマネージャー、バンドラー、テストランナーといった開発に必要なツール群を内包したオールインワン・ツールキットです。
これまでWebpack, Babel, Jest, npm/yarn…と多数のツールを組み合わせて行っていた環境構築が、Bun一つで完結します。
TypeScriptをネイティブサポートしているため、トランスパイルのための複雑な設定も不要です。この圧倒的な開発体験の向上と、Node.jsを凌駕する実行速度が、Bunを次世代の標準ランタイムとして推奨する大きな理由です。
API:tRPC
tRPCは、フルスタックTypeScript開発の生産性を劇的に向上させるキーテクノロジーです。
REST APIやGraphQLのように、APIスキーマを別途定義・管理する必要がなく、バックエンドで定義した関数の型定義が、そのままフロントエンドの型情報として共有されます。
また、tRPCではAPIエンドポイントを覚える必要がなく、tRPC内で定義されるプロシージャー（関数群）を呼び出すことで、クライアントサイドからサーバー上の処理を呼び出すことが可能です。
APIの仕様変更が即座にフロントエンドのコンパイルエラーとして検知されるため、「仕様書の更新忘れ」や「フロントとバックの認識齟齬」といった問題から解放され、開発者はビジネスロジックの実装に集中できます。
ORM:Drizzle
ORMはDrizzleです。
Prismaも非常に優れたORMですが、Drizzleが選ばれる理由は、そのSQLへの近さとパフォーマンスにあります。DrizzleはSQLの構文をなぞるようにTypeScriptのメソッドチェーンをつなげていく書き方をするため、SQLとTypeScriptを同時に書いているような開発体験を提供します。
SQLライクな構文でTypeScriptの型安全性を享受できるため、Prismaのような独自のスキーマを用いることなく、データベースとTypeScriptの能力を最大限に引き出してくれます。
認証:Better-Auth
Better-Authは、特定のフレームワークに依存しない、ヘッドレスな認証ソリューションです。
数行のコードで、パスワードレス認証、OAuth、マジックリンクといったモダンな認証機能をセキュアに実装できます。
また、ネイティブのプラグインも非常に充実しており、多要素認証や独自OIDC、マルチテナントや決済システムとの連携など、実利用ケースで頻繁に利用する機能が数行で実装できる点もポイントが高いです。
フロントエンドとバックエンドが分離したアーキテクチャでも、一貫した認証基盤を容易に構築できる点が魅力です。
パッケージマネージャー:Bun
Better-T Stackがパッケージマネージャーとしてbunを推奨するのは、ランタイムとしてBunを選択した場合の一貫性とパフォーマンスを最大限に引き出すためです。
bun installコマンドは、npmやyarnと比較して圧倒的なインストール速度を誇ります。これにより、ローカル開発やCI/CD環境での待ち時間が大幅に短縮され、開発サイクル全体の高速化に繋がります。ランタイムとパッケージマネージャーをBunに統一することで、ツールセットがシンプルになり、開発体験が向上します。
モノレポ:Turborepo
プロジェクトがスケールするにつれ、複数リポジトリの管理は煩雑になります。
Turborepoは、フロントエンド、バックエンド、共有ライブラリなどを一つのリポジトリ（モノレポ）で効率的に管理するビルドシステムです。
変更があったパッケージだけをビルド・テストするキャッシュ機能により、CI/CDの時間を劇的に短縮します。あらゆる規模のプロジェクトで開発効率を高めるための必須ツールと言えるでしょう。
まとめ
Better-T Stackは、単なるプロジェクトのひな形を生成するツールではありません。それは、変化の速いTypeScriptエコシステムにおける、現時点でのベストプラクティスを集約した生きたドキュメントでもあります。
このツールが提示する選択肢と、その推奨構成を学ぶことで、私たちは以下のようなメリットを得ることができます。
- 爆速なセットアップ: 面倒な環境構築や技術選定の悩みから解放され、即座にプロダクト開発に着手できます。
- モダンな技術スタックの学習: なぜその技術が選ばれているのかを理解することで、実践的な知識が身につきます。
- スケーラブルな設計: 最初からモノレポや関心の分離が考慮されており、プロジェクトの成長に耐えうる堅牢な基盤が手に入ります。
まずは公式サイトのBuilderで好みの構成をクリックし、生成されたコマンドを手元で実行してみてください。きっと、あなたの開発体験を一段階上へと引き上げてくれるはずです。
Discussion