はじめに
StoryHub株式会社の@hanamaです。
今回は、最近私が注目しているBetter-T StackというCLIツールをご紹介したいと思います。
まだ日本語での紹介記事が少ないツールですが、TypeScript開発者にとって非常に有用なツールだと感じているため、この機会に皆さんにお伝えできればと思います。
この記事で伝えたいこと
モダンで柔軟なTypeScriptプロジェクトはnpx create-better-t-stack@latestから始めよう
Better-T Stackとは
公式ドキュメントより
Better-T-Stack is a modern CLI tool for scaffolding end-to-end type-safe TypeScript projects with best practices and customizable configurations.
Better-T Stackは、TypeScriptを使ったフルスタックプロジェクトを作成するためのCLIツールです。
Better-T StackはT3 StackというTypeScript + Next.js + Tailwind CSS + Prismaなどの技術スタックと各ベストプラクティスを組み合わせたプロジェクトを作成するためのCLIツールをさらに拡張したようなイメージのツールです。
T3 Stackとの大きな違いは、フロントエンド・バックエンド・ORMなどの各技術レイヤーについて、より多くの選択肢が提供されていることです。
例えば、フロントエンドではnext.jsに加えてtanstack-router、nuxt、svelte、solidなど、現在9種のフレームワークが選択肢として提供されています。
これだけ多くの選択肢をサポートするとなると、メンテナンスの負荷が心配になるところですが、Better-T Stackは活発に開発が進められており、ほぼ毎日のようにアップデートがリリースされています。各フレームワークの最新バージョンへの対応や、コミュニティで議論されている最新のベストプラクティスが迅速に取り入れられているのが印象的です。
6/22時点でのBetter-T StackのVersion History
Better-T Stackを利用するメリット
Better-T Stackを利用するメリットとして、以下の3点が挙げられます。
- 多彩な組み合わせのプロジェクトを一瞬で作成できる
- 最新バージョンのフレームワークとベストプラクティスがいつでも適用される
- 確固たる基礎構造があることによる、AIコード生成の安定性向上
多彩な組み合わせのプロジェクトを一瞬で作成できる
類似のScaffold作成手段としては、各種フレームワークのテンプレートから作成する方法やCookiecuterなどのツールを利用する方法があります。
ほとんどのテンプレートは静的に提供されるか、選択肢の幅が狭いため、例えばバックエンドとしてExpressではなくHonoを使いたい場合などには、別のテンプレートを探すか、既存のテンプレートを自分でカスタマイズする必要があります。
一方、Better-T Stackは、フロントエンド・バックエンド・ORMなどの各技術レイヤーについて、非常に多くの選択肢が提供されています。
雑に計算すると1,119,744パターンのプロジェクトが作成できることになります。
気になるフレームワークの技術検証や、フロントエンドとバックエンドの組み合わせをたくさん試したい場合などに、Better-T Stackを利用すると、一瞬でプロジェクトを作成して中身を比較検討することができます。
最新バージョンのフレームワークとベストプラクティスがいつでも適用される
Node.js、TypeScript周りの技術スタックをめぐる最近のトレンドは非常に移り変わりが早くなってきています。
また、それぞれのフレームワークもメジャーバージョンアップにより使い勝手が変わることが多く、それに伴いベストプラクティスも変わってきています。
Better-T Stackは、選択肢として提供しているツールのバージョンアップに頻繁に対応しており、いつ起動しても最新のバージョンの技術スタックが適用される安心感があります。
フレームワークやツールチェーンをできる限り最新バージョンで揃えておくことでモダンな技術スタックの恩恵を最大限に受けることができます。
確固たる基礎構造があることによる、AIコード生成の安定性向上
昨今、Claude CodeやCursorなどのツールを用いたVibe CodingなどのAI開発フローが着目されています。
どこまでをLLMに任せるかは開発者に委ねられますが、初手からVibe Codingを行う際に気になるポイントが、採用する技術スタックや基本とするアーキテクチャをどう決めていくかという点です。
多くのLLMの知識カットオフは数ヶ月~1年程度となっているため、全ての技術選定をプレーンなLLMに任せると、カットオフ当時の知識でプロジェクトが構築されてしまう懸念があります。
WebブラウジングツールやドキュメントのMCP化を使って最新情報を参照しながら進めることも可能ですが、ブラウジングコストやツール類のメンテナンスも考えるとあまり現実的ではありません。
初期構造はLLMの柔軟性に任せずにBetter-T StackなどのScaffoldツールを利用することで、安定した基礎を構築することができます。
また、優れたAIコーディングツールはそのプロジェクト内のコードベースを参照しながら実装や提案を行うため、ベストプラクティスが適用された基本のコードベースから始めることはベストプラクティスに沿ったAIからの提案につながります。
Better-T Stackを使ってみる
Better-T StackはCLIツールとして提供されているため、下記のコマンドを実行してインタラクティブに技術スタックを選択していくことで、簡単にプロジェクトを作成することができます。
なお、最初から決めている技術があればオプションとして指定することもできます。
Bunを利用している場合
bun create better-t-stack@latest
pnpmを利用している場合
pnpm create better-t-stack@latest
npmを利用している場合
npx create-better-t-stack@latest
また、Web上でスタックビルダーが提供されており、GUIで各要素を指定してコマンドを生成することもできます。
スタックビルダーの画面
まとめ
今回は、TypeScriptのフルスタックプロジェクトを作成するためのCLIツールであるBetter-T Stackをご紹介しました。
多彩な技術スタックの組み合わせを柔軟かつ高速にセットアップできるツールで、新規プロジェクトの立ち上げや技術検証に非常に便利です。
みなさんもBetter-T Stackを使って、俺だけの最強技術スタックを作ってみてはいかがでしょうか。
最後にStoryHubで利用しているスタックによく似た構成を再現できるワンライナーをご紹介して締めくくります。
pnpm create better-t-stack@latest storyhub-tech-stack-example --yes --frontend next --backend next --runtime node --api none --database postgres --package-manager pnpm
Discussion