【T3Stack入門】原則と各技術の特徴を理解する
はじめに
Typescriptでのフルスタック開発の選択肢として、型安全で先進的な開発ポリシーを持つT3 Stackは魅力的な技術スタックです。今回は入門編としてT3 Stackの原則と各技術の特徴を解説します。
T3 Stackとは？
T3 Stackは、Theo氏が2021年に発案した、Webアプリケーション構築のための技術スタックです。
T3 Stackでは simplicity(簡潔さ)、modularity(モジュール性)、full-stack typesafety(フルスタックの型安全)が重視されています。構成要素は下記のとおりです。
T3 Stackの構成要素
- Reactベースのフルスタックフレームワーク 「Next.js」
- JavaScriptの静的型付けを提供する 「TypeScript」
- 型安全なAPI構築を可能にする 「tRPC」
- データベース操作を効率化するORM 「Prisma」
- ユーティリティファーストのCSSライブラリ 「Tailwind CSS」
- OAuth対応の認証ライブラリ 「NexAuth.js」
CLIテンプレート create-t3-app
T3 StackのCLIテンプレートとしてcreate-t3-appが提供されています。各構成要素の連携など必要な初期設定を行なってくれます。
技術選定の判断軸、「T3原則」とは
読者のみなさまの中には、T3 Stackの構成要素を見てこんな疑問を抱く方もいらっしゃるかと思います。
「すべてのモジュールを使わないといけないの？今回のプロジェクトにはNextAuthは不要なんだけど・・・」
「スタイリングは絶対にTailwind CSSを使うべきなの？他のUIライブラリを使うのはルール違反？」
実は、T3 Stackの技術スタックをすべて使う必要はありません。T3 Stackの技術の組み合わせは絶対的なものではなく、必要に応じて入れ替えることができるモジュール式であるとT3公式ドキュメントのイントロダクションで語られています。これから解説するT3原則に則っていれば、基本的にはどのライブラリでも問題ありません（筆者はスタイリングにはvanilla-extractを選択しています）。
T3の原則
1. 問題を解決する
Solve Problems
It’s easy to fall into the trap of “adding everything” - we explicitly don’t want to do that. Everything added tocreate-t3-appshould solve a specific problem that exists within the core technologies included. This means we won’t add things like state libraries (zustand,redux) but we will add things like NextAuth.js and integrate Prisma and tRPC for you.
T3 Stackに採用する技術は、特定の問題を解決できるものであることが前提です。zustandやreduxのような状態管理ライブラリは必須ではないのでT3 Stackに採用してませんが、NextAuth.jsは認証の問題を、 PrismaとtRPCの統合はAPI通信の問題を解決するために採用しています。
2. 責任を持ってリスクを取る
Bleed Responsibly
We love our bleeding edge tech. The amount of speed and, honestly, fun that comes out of new shit is really cool. We think it’s important to bleed responsibly, using riskier tech in the less risky parts. This means we wouldn’t ⛔️ bet on risky new database tech (SQL is great!). But we happily ✅ bet on tRPC since it’s just functions that are trivial to move off.
責任を持って最先端のスピード感のある高リスクな技術を、低リスクな領域に搭載していきます。新しいデータベース技術のような、プロジェクト全体の基盤を揺るがす可能性がある部分には安定した技術（SQL）を使用しますが、tRPCのように、取り換えやすい関数レベルの技術には喜んで賭けます。
3.型安全性は必須である
Typesafety Isn’t Optional
The stated goal of Create T3 App is to provide the quickest way to start a new full-stack, typesafe web application. We take typesafety seriously in these parts as it improves our productivity and helps us ship fewer bugs. Any decision that compromises the typesafe nature of Create T3 App is a decision that should be made in a different project.
T3 Stackの目標は、型安全なフルスタックwebアプリケーションを最速で作るための方法を提供することです。型安全は生産性の向上とバグの少ないプロダクトのために必須です。型安全を損なう決定は別のプロジェクトで行うべきです。
ちなみに筆者は普段のスタイリングにはTailwind CSSではなく、vanilla-extractを使用しています。vanilla-extractはTypescriptと完全に統合されていて、ミスタイプのエラー検出など型安全に開発ができます。T3原則の型安全性を守った技術選定になりますので、T3 Stackを使った開発にも導入しています。
では、次項からはT3 Stackを構成している各技術の特徴について紹介していきます。
TypeScriptによる型安全性の確保
型安全性によりバグを減らし、開発効率を向上
T3 Stackでは、TypeScriptによる型安全性を最も重要視しています。型安全性は、開発生産性とプロダクト品質の向上に貢献します。ソースコードに明示された型情報は、コードの読解を容易にし、入力補完機能が開発のスピードを向上させます。
さらに、存在しないプロパティにアクセスしたり、間違った型の値を渡した場合には、コンパイル時にエラーが発生します。このエラーチェックがバグを事前に防ぎ、プロダクトの品質を向上させます。
TypeScriptを用いたフルスタック開発には、フロントエンドとバックエンドで共通の型定義を共有することでデータの整合性を保ち、開発効率を向上させます。T3 StackではtRPCやPrismaを組み合わせることで、型安全なAPI通信を行います。
Next.jsによるフルスタック開発
SSR やルーティングを簡単に実装できるReactベースのフレームワーク
Next.jsはReactベースのフルスタックフレームワークであり、フロントエンドとバックエンドの統合をシームレスに行える点が特徴です。ルーティングからAPI定義、画像レンダリングまで最適化された高いパフォーマンスを提供しています。
データベースの読み書きやサーバーサイドでのデータ取得も可能なことから、Theo氏はNext.jsを「バックエンドフレームワーク」と呼んでいます（参考動画）。
Next.js 13.4から登場した新しいルーティングシステム「App Router」は、2023年10月からcreate-t3-appに標準搭載されています。（旧来のPages Routerも選択可能です）
App routerではディレクトリ構造がURL構造になる直感的なルーティングシステムです。コンポーネントはクライアント指定がなければデフォルトでサーバーサイドのみで実行され、高速なデータ取得が可能になりました。
tRPCによる型安全なAPI通信
型安全なAPI 通信を実現し、フロントエンドとバックエンドの統合を強化
tRPCは、型安全なAPI構築を可能にするフレームワークです。スキーマやコード生成が不要な点が特徴です。
クライアントとサーバー間で型情報を共有することで、IDEの型補完を利用しながら効率的にコーディングできます。これにより、サーバー側のコードを更新すれば、クライアント側でも自動的に型チェックが行われ、誤った入力やAPI呼び出しを防ぐことができます。
Next.jsのクライアントコンポーネントでAPIを呼び出す際にはtanstack queryを使います。tRPCのデフォルトでtanstack queryがセットアップされており、サーバーの状態管理やキャッシュ処理が効率化されています。
Prismaによる型安全なデータベース操作
型安全なORM で、データベース操作を簡素化
Prismaは、TypeScriptによる型推論が可能なORMです。データベースマイグレーションやデータ管理のためのGUI「Prisma Studio」も機能に含まれています。
Prisma Clientを通じてデータベースにアクセスし、クエリから最適なSQLを生成し、テーブルのカラムやリレーションを型推論に反映します。
複数のデータベースと互換性があり、ユーザー定義のスキーマから型を生成することで、データベースからアプリケーションまでのエンドツーエンドの型安全性を保証します。これにより、開発者は効率的かつ安全にデータベース操作を行えます。
Tailwind CSSで効率的なUI開発
ユーティリティファーストの CSS フレームワークでクラス命名やファイル整理の手間をカット
Tailwind CSSは、ユーティリティファーストのCSSフレームワークで、従来のCSSを使わず、提供されるクラスのみを利用してスタイリングを行います。
ユーティリティファーストとは、既成のスタイルやコンポーネントを提供せず、必要に応じてパーツ化するという思想に基づいています。
各ユーティリティクラスが1つのCSSプロパティに対応しているため、クラス名を考える手間が省けます（クラスの例：rounded-xl、p-8 、text-centerなど）。これにより、スタイルの再利用が容易になり、ファイルサイズを抑えることができます。
また、クラス名はセレクタ＋値を具体的に示していて、色やタイポグラフィ、スペーシングなどに指定できる値が制約されているため、デザインの統一性が保たれます。さらに、JSXとCSSファイルを行き来せずにスタイルを定義できる点も開発効率の向上に貢献します。
NextAuth.jsによるOAuth認証の導入
複雑なセキュリティを簡単に導入できる認証ライブラリ
NextAuth.jsは、Next.js向けの認証ライブラリです。OAuth、Email/Password、認証コード、SNSアカウントなどの多様な認証方法に対応しています。また、TypeScriptをサポートしており、型安全な開発が可能です。
tRPCと組み合わせる場合、ミドルウェアを使って再利用可能な保護されたプロシージャを作成できます。Prismaと併用する場合は、初期設定が必要です。create-t3-appを利用すれば、tRPCもPrismaも設定済みの認証システムを簡単に導入できます。
おわりに
本記事で、T3 StackはTypeScriptによる型安全性を柱に、Next.js、tRPC、Prisma、Tailwind CSS、NextAuth.jsで構成された技術スタックであることを解説しました。
T3 Stackの特徴は、必要に応じて技術の取捨選択が可能なモジュール性と、常に新しい技術を取り入れながらも、型安全性を損なわないという思想に基づいています。これにより、開発者は最新の技術を活用しながらも、リスクを最小限に抑えたプロジェクトを進めることができます。
T3 Stackの採用技術の組み合わせは絶対的なものではありませんが、T3の原則を守った上で取捨選択する必要があります。
次回の記事では、create-t3-appのテンプレートを参照して、tRPCがどのようにセットアップされているのか解説します。
Discussion