--- title: "T3 Stackとは？構成技術・型安全の仕組み・メリット/デメリットと始め方" url: "https://www.issoh.co.jp/tech/details/5998/" published: 2025-03-25 updated: 2026-09-27 categories: ["フレームワーク"] publisher: "株式会社一創" --- # T3 Stackとは？構成技術・型安全の仕組み・メリット/デメリットと始め方 T3 Stackは、TypeScriptでフロントエンドからバックエンドまで型を一気通貫でつなぐフルスタック構成の通称です。特定の製品ではなく、**create-t3-app**というCLIが生成する「Next.js＋TypeScriptを核に、tRPC・Prisma（またはDrizzle）・Tailwind CSS・認証を必要な分だけ足した雛形」を指します。この記事では、T3 Stackの定義と設計思想（T3原則）、各技術の役割と型安全の仕組み、create-t3-appでの始め方、メリットとデメリット、そして「どんなプロジェクトに向くか」までを整理します。 ## まとめ 先に要点だけ押さえると次のとおりです。 - T3 Stackは**create-t3-app**が生成するTypeScriptフルスタック雛形の通称で、核はNext.jsとTypeScript。 - 最大の特徴は**エンドツーエンドの型安全**。DBスキーマからAPI、UIコンポーネントまで型が自動で流れる。 - tRPC・ORM（Prisma／Drizzle）・Tailwind CSS・NextAuth.js（Auth.js）は**任意で選ぶモジュール式**。使う部品だけ生成される。 - TypeScriptで前後端をそろえる個人〜中規模開発や社内ツールに向き、多言語バックエンドや公開REST／GraphQL中心の構成には向かない。 ここから、定義と各技術の役割を順に見ていきます。 ## T3 Stackとは何か：create-t3-appとT3原則 T3 Stackは、t3-oss（Theo氏とコミュニティ）が保守するCLI「create-t3-app」を実行して作るプロジェクト構成を指す通称です。フレームワークやライブラリの名前ではなく、**Next.jsとTypeScriptを土台に、型安全を最優先して選んだ技術の組み合わせ**という考え方そのものが「T3」の中身です。そのため「インストールして使うもの」ではなく、create-t3-appで足場を作り、以降は通常のNext.jsアプリとして開発を進めます。 ### 技術選定を貫くT3原則（T3 Axioms） create-t3-appに何を含め、何を含めないかは、公式が掲げる3つの原則で決まっています。この原則を理解すると、T3 Stackの構成が「流行の寄せ集め」ではないことが分かります。 - **Solve Problems（問題を解く）**：核となる技術に実際の課題があるものだけを追加する。ZustandやReduxのような状態管理を同梱しないのは、Next.js標準で足りる範囲だから。 - **Bleed Responsibly（責任を持って先端を使う）**：新しめの技術は「剥がしやすい部分」にだけ採用する。tRPCは実体がただの関数で移行が容易なため採用する一方、リスクの高い新興DBには賭けない。 - **Typesafety Isn’t Optional（型安全は必須）**：型安全は生産性を上げバグを減らす前提条件であり、妥協点にしない。 ## T3 Stackを構成する技術と役割 create-t3-appが束ねる技術と、それぞれが担う役割は次のとおりです。TypeScript以外は基本的にプロンプトで取捨選択できます。 | 技術 | 役割 | 補足 | | -------------------- | ----------------------- | ------------ | | Next.js | フレームワーク（App Router/SSR） | UIとサーバー処理の土台 | | TypeScript | 全体の型基盤 | 核・常に含まれる | | tRPC | 型安全なAPI通信 | 前後端で型を共有 | | Prisma／Drizzle | ORM（どちらか選択） | DB操作と型生成 | | Tailwind CSS | スタイリング | ユーティリティCSS | | NextAuth.js（Auth.js） | 認証 | OAuth等の統合 | 個々の技術の詳細は、[Next.js 16とは？ReactベースのWeb開発フレームワーク最新版の概要](/tech/details/9596/)や[tRPCとは？REST・GraphQL・gRPCとの違いと型安全なAPI実装](/tech/details/7937/)、[Tailwind CSS v4の主な変更点と新機能の概要](/tech/details/5060/)で個別に解説しています。ここではT3 Stackとして組み合わさったときに効く2点を掘り下げます。 ### エンドツーエンドの型安全という中核 T3 Stackの本質は、**DBスキーマ→API→フロントエンドまで型が途切れずに流れる**点にあります。PrismaのモデルからDBの型が生成され、その型がtRPCのルーターを通り、Reactコンポーネントの呼び出し側までそのまま届きます。たとえばPrismaのモデルにカラムを1つ足すと、tRPC経由で取得しているコンポーネントの型が更新され、形が変わった箇所はビルド時にコンパイルエラーで教えてくれます。OpenAPIのような仕様書やコード生成を挟まずに、前後端の型ズレを実装時点でつぶせるのが、他の構成にはない開発体験です。 ### ORMはPrismaとDrizzleから選ぶ 以前のT3 StackはPrisma一択でしたが、現在のcreate-t3-appは**PrismaとDrizzleを選択**できます。Prismaはスキーマ定義から型とクライアントを生成する方式で、学習しやすく実績も豊富なため既定寄りの選択です。Drizzleはより軽量でSQLに近いクエリビルダを持ち、細かい制御を好む新しめのプロジェクトで採用が増えています。判断に迷う場合は、[Prismaのバージョン完全ガイド](/tech/details/9996/)と[Drizzle ORMとは？使い方・Prismaとの比較](/tech/details/7939/)を突き合わせ、既存の運用実績を重視するならPrisma、バンドルサイズやSQLの手触りを重視するならDrizzle、と考えると選びやすくなります。 ## create-t3-appでT3 Stackを始める手順 T3 Stackはコマンド1つで開始できます。使用するパッケージマネージャに応じて、次のいずれかを実行します。 ``` npm create t3-app@latest pnpm create t3-app@latest yarn create t3-app bun create t3-app@latest ``` 実行すると対話式のプロンプトが起動し、TypeScript、tRPC、ORM（Prisma／Drizzle）、Tailwind CSS、NextAuth.js、App Routerを使うかどうかを1つずつ選びます。**選んだ部品だけがコードに含まれる**のがモジュール性で、「認証は今回不要」「ORMだけ欲しい」といった構成も無駄なファイルなしで作れます。生成後はテンプレートに含まれるサンプルのtRPCルーターとコンポーネントを起点に、通常のNext.js開発として進められます。 ## T3 Stackのメリット 最大のメリットは、前述の**エンドツーエンド型安全がもたらすバグの早期発見とエディタ補完**です。APIの引数や戻り値、DBの列名までコード補完が効き、変更の影響範囲がビルド時に分かるため、リファクタリングの心理的な負担が下がります。 次に効くのが**立ち上げの速さ**です。認証・DB・API・スタイリングの初期配線をcreate-t3-appが済ませてくれるので、環境構築ではなく機能実装からプロジェクトを始められます。さらに実体がNext.jsアプリなので、Vercelを含むホスティングやNext.jsの豊富なエコシステム、日本語情報もそのまま活かせます。tRPCが「ただの関数」である点も、将来別のAPI方式へ移す余地を残します。 ## 導入前に知るデメリットと採用判断 T3 Stackは万能ではありません。構成の前提を外れると、むしろ扱いにくくなります。採用前に次の制約と適性を確認してください。 ### 別言語・公開API構成での不向きと学習コスト 最も本質的な制約は、**tRPCがTypeScriptの前後端を前提にする**ことです。バックエンドをGoやPythonなど別言語で書く場合や、外部に公開する汎用REST／GraphQL APIを主役にしたい場合、tRPCの型共有は成立せず旨みが消えます。加えて、Next.js・tRPC・ORM・型システムを同時に学ぶ必要があり、**初学者には学習コストが高め**です。App Routerへ移行した記事とPages Router時代の記事が混在しており、古い手順を踏むと詰まりやすい点にも注意が必要です。一方でロックインの懸念は比較的小さく、これはtRPCを剥がしやすい形で採用する「Bleed Responsibly」の設計思想が効いています。 ### 向くケース・向かないケース 結論として、T3 Stackは**TypeScriptで前後端をそろえられる個人〜中規模のフルスタック開発や社内ツール**に向きます。少人数で素早く型安全なアプリを立ち上げたい場面が最も適しています。逆に、**多言語のマイクロサービス構成、公開APIやGraphQLが主役の設計、非TypeScriptチーム**には向きません。大規模プロジェクトでは単一のtRPCルーターが肥大化しやすく、ルーターの分割設計を前提にしないと保守が重くなります。より新しい選択肢としてはDrizzleやHonoなどを組み合わせられる[Better-T-Stack](/tech/details/10225/)もあり、T3 Stackの思想を踏襲しつつ構成の自由度を広げたい場合の比較対象になります。 ## よくある質問 ### T3 Stackとは何ですか？ create-t3-appというCLIが生成する、TypeScriptベースのフルスタック雛形の通称です。Next.jsとTypeScriptを核に、tRPC・Prisma／Drizzle・Tailwind CSS・NextAuth.jsを任意で組み合わせ、型安全を最優先した構成を指します。 ### T3 Stackのデメリットは？ tRPCがTypeScriptの前後端を前提とするため、別言語バックエンドや公開API中心の構成には向きません。また複数技術を同時に学ぶ学習コストがあり、App Router移行期の情報の新旧混在にも注意が必要です。 ### T3 StackとBetter-T-Stackの違いは何ですか？ T3 Stackはcreate-t3-appによるNext.js中心の構成です。Better-T-StackはT3の型安全思想を引き継ぎつつ、DrizzleやHonoなど選べる技術の幅を広げた新しいスタック構築ツールで、より柔軟な構成を組みたい場合の選択肢になります。 ### PrismaとDrizzleはどちらを選べばよいですか？ 既存の運用実績や学習のしやすさを重視するならPrisma、軽量さやSQLに近い記述を重視するならDrizzleが向きます。create-t3-appではどちらもプロンプトで選択できます。 ### T3 Stackの学習に必要な前提知識は？ TypeScriptとReact／Next.jsの基礎があると理解が早まります。加えてtRPCの考え方とORM（PrismaまたはDrizzle）の基本を押さえると、型が前後端をつなぐ仕組みを一貫して追えます。 ## 関連記事 - [Next.js 16とは？ReactベースのWeb開発フレームワーク最新版の概要や主要機能を詳しく紹介](/tech/details/9596/) - [tRPCとは？REST・GraphQL・gRPCとの違いと型安全なAPI実装をv11の実コードで解説](/tech/details/7937/) - [Prismaのバージョン完全ガイド｜最新v7の変更点・確認方法とv6からの移行](/tech/details/9996/) - [Drizzle ORM（ドリズル）とは？使い方・Prismaとの比較・型安全な設計を解説【2026年版】](/tech/details/7939/) - [Better-T-Stackとは何か？T3スタックを進化させたタイプセーフな次世代スタック構築ツールの全貌](/tech/details/10225/) --- 出典: [T3 Stackとは？構成技術・型安全の仕組み・メリット/デメリットと始め方]()（株式会社一創）