最近、フロントエンド界隈では「T3 Stack」というワードを目にするようになりました。
T3 Stack の GitHub リポジトリのスター数は執筆時点で 2万を超えており、急激に人気が出ている開発手法です。
ただ、T3 Stack について調べても、T3 Stack の詳細やメリットがわかりにくいのではないでしょうか。
特に、T3 Stack に含まれる tRPC と Prisma は、初心者にとっては難しいものです。
そこで、フルスタックエンジニアでありながらプログラミングスクール講師でもある筆者が、初心者でも理解できるようにやさしく解説します！
本記事を読んでいただければ以下のことがわかるようになります。
- T3 Stack とは？
- T3 Stack を使って開発するメリット
- T3 Stack を身につけるための学習方法
T3 Stack とは？
Web開発の学習をしていると「型安全」という言葉をよく聞くかもしれません。
方安全とは、プログラムが予期せぬ間違いを減らすために、データの種類を厳密に管理することを意味しています。
特に最近は、フロントエンド、バックエンド、そしてBFF（フロントエンドに必要なサーバーの処理）の間でデータのやり取りをすることが多いです。
そのため、データのやり取りをするときにも「型安全」を実現することで、安全かつ効率よく開発することが大切になっています。
そんな中、「T3 Stack」とよばれる技術の組み合わせによる開発手法が注目を集めています。
T3 Stack とは Web開発をシンプルに、効率的に、そして型安全に進めるための方法です。
T3 Stackでは、以下の6つの技術を使います。
- Next.js
- TypeScript
- TailwindCSS
- NextAuth.js
- Prisma
- tRPC
また、create-t3-appというツールを使うことで上記 6つの技術を組み合わせたWebアプリを簡単に作ることもできるため、ハードルの低さからも人気が出てきています。
T3 Stackは、このようにいろいろな技術を組み合わせることで、エラーが少なく、高品質なWebアプリを作れるようにするのが目的です。
そして、プロジェクトに合わせて使う技術を変えたり、追加したりできる柔軟性も持っています。
T3 Stack で使われている技術
それでは、T3 Stack で使われている技術について説明していきます。
それぞれの技術について改めて知ることで、T3 Stack の特徴をより深く理解することができるでしょう。
T3 Stack の技術① Next.js
Next.js は React というツールを基にしたフレームワークです。
React はウェブサイトの部品（コンポーネント）を作るためのツールで、ウェブサイトを構築する際には様々な部品を組み合わせます。
例えば、ボタンや画像、テキストボックスがそれです。
Next.js は React の利点を活かし、さらに多くの機能を提供します。
Next.js の機能例：
- ページ間のルーティング（道案内）を行う Router
- サーバー上でページを事前に作ることで高速表示を実現する SSR（Server Side Rendering）
- 静的なWebサイトのパフォーマンスをアップする SSG（Static Site Generation）
これらの機能により、高機能かつ高パフォーマンスなWeb アプリケーション開発を簡単に作ることができます。
React の人気上昇に伴い Next.js もよく使われてるようになっており、T3 Stack においては中心となる技術です。
あわせて読みたい
T3 Stack の技術② TypeScript
TypeScript も、T3 Stack で利用される技術の一つです。
https://www.typescriptlang.org/ja/
JavaScript を使ったことがある方は多いと思いますが、TypeScript は JavaScript を拡張したプログラミング言語です。
TypeScript を使うことで、コードに「型」という特定のルールを設定でき、プログラムがより正確に動作するようになります。
型とは、変数や関数の引数、戻り値に対して、どんなデータ（数字、文字列、オブジェクトなど）が使えるかを定義するルールのことです。
いいかえると、予期しないデータのやり取りを事前に防ぐことができる上に、データを想像しながら開発することができるようになります。
T3 Stack を用いた開発手法の中では、TypeScript は以下のような役割を持ちます。
- エラーを早く発見できるのでバグを生みにくい
- 誰が見てもデータ型がわかるので複数人で開発しやすい
- 型の安全性が保証されているので大規模プロジェクトにも対応
T3 Stack の技術③ Tailwind CSS
T3 Stack ではTailwind CSSという、人気のCSSフレームワークを使って見た目を整えます。
普通、Webサイトを作る時には、HTMLでページの構造を作りつつ要素にクラス名を追加しつつ、別ファイルで定義するCSSで見た目を整えます。
しかし、たくさんのCSSを書く必要がありますし、いちいちクラス名を考えるのも面倒ですよね。
一方、Tailwind CSS はあらかじめ決まっているクラス名をHTMLに追加すると、自動的にCSSで見た目を整えることができます。
例えば、ボタンに青い背景をつけたい時、あらかじめ定義された bg-black というクラスをHTML要素に追加するだけで済みます。
とても手軽であるためCSSを書く時間が大幅に減り、コーディングの作業が速く、簡単になります。
- Tailwind CSS を使うと高速かつ柔軟にコーディングできる
- クラス名をいちいち考えなくてよいのでコーディングが楽になる
T3 Stack の技術④ NextAuth.js
Web アプリケーションではユーザー登録といった認証機能を使います。
ユーザー認証をゼロから作ると大変ですが、T3 Stack では Next.js と相性が良い NextAuth.js という認証ライブラリを使います。
Next.jsに限らずWebアプリケーションを作る時、ユーザーのログインやアカウント管理といった「認証」はセキュリティ上の理由からうまく作ることが難しいです。
そこで、NextAuth.js を使うことで認証プロセスを簡単かつ安全に作ることができます。
NextAuth.js の特徴は、GoogleやFacebookなどの有名なサービスを使ったログイン機能（OAuth認証）を簡単に追加できることです。
ユーザーは既存のGoogleやFacebookのアカウントでログインできるためユーザー登録の必要がなく、気軽に使うことができるのです。
他にも NextAuth.js を使うと、セッション管理やCSRF保護（ウェブサイトが攻撃を受けるのを防ぐ技術）など、認証に必要な多くの機能を手軽に導入できます。
このような手軽さや安全性から、NextAuth.js が T3 Stack に採用されています。
- NextAuth.js を使うと安全にユーザー認証機能を作れる
- Google や Facebook、GitHub アカウントでの認証にも対応
T3 Stack の技術⑤ Prisma
Prisma は、Node.jsやTypeScriptで使われるデータベース操作用のツールです。
Next.js はそもそもフロントエンド用のフレームワークであるため、本来はバックエンドが担当しているデータベース操作は得意ではありません。
そこで Prismaを使うと、データベースの操作がとても簡単になります。
データベースとやり取りするには通常はSQLという専用の言語で書く必要がありますが、Prisma を使うと TypeScript のままデータベースを操作することができます。
また、Prismaの利点は、コードが間違っていないか自動でチェックしてくれることです。
Prisma を用いるとデータベースにどのようなデータ型が入っているのかも自動的に整理してくれるため、コードを書く時に間違いが少なくなります。
最近ですと Supabase を用いたクラウド型のデータベースを使って Next.js での開発も流行っていますが、Prisma は Supabase とも相性が良いことから、人気を集めています。
- Prisma を使うと Next.js でもデータベース操作が簡単になる
- データ型が決まっているので TypeScript との相性も良い
- Supabase などのクラウド型データベースにも対応している
T3 Stack の技術⑥ tRPC
Web開発でのプログラミング言語はたくさん存在しており、フロントエンドとバックエンドで言語が違うのが普通です。
T3 Stack に使われている tRPC は、言語が違ってもスムーズに通信するためのツールの一つです。
tRPC を理解するには RPC と gRPC も理解する必要があるので、簡単に解説します。
※ここでは「なんとなく」程度の理解で大丈夫です！
RPCとは
RPC（Remote Procedure Call）は、遠く離れたサーバ上でプログラムを実行できるようにする技術です
ただし、依頼した処理がどのように実行されるのかを気にする必要はないのが特徴です。
例えるならば、電話で家族に段ボールを運ぶよう、お願い事をするような状況を想像してください。
あなたが「段ボールを運んでおいて」と頼んだとき、指定の場所まで運ばれるならば、手でも台車でも、どういう方法を取ろうが気にしないですよね。
同じように、RPC では依頼先のサーバへとプログラムの実行を依頼しますが、相手がどのような言語で処理を実行するのかを気にする必要はありません。
gRPCとは
さて、RPCが遠隔地のサーバ上でプログラムを実行するための技術であることが分かったところで gRPC についても説明します。
gRPC は RPCの一種ですが、RPC のアイデアをさらに進化させたものです。
gRPC では Protocol Buffers と呼ばれるフォーマットを使うことで、あらかじめバックエンドとフロントエンドの通信方法を決めておくことができます。
結果として、お互いが理解できる言葉で通信できるので、バックエンドとフロントエンドの通信がスムーズになるのです。
tRPCとは
では、T3 Stack に採用されている tRPC についても説明します。
tRPC は簡単にいうと、TypeScript を用いることで、バックエンドとフロントエンド間の通信ですら型安全にするためのツールです。
tRPC を使うことで、開発者はバックエンドからフロントエンドへのデータの流れを一貫して管理し、型の不一致によるバグを事前に防ぐことができます。
例えば、バックエンドでユーザーデータの型を定義した場合、tRPCを利用することで、その型情報をフロントエンドにそのまま引き継ぐことができます。
これにより、フロントエンドで扱うデータがバックエンドの仕様と常に一致し、開発プロセスがよりスムーズかつ安全になります。
さらに、tRPCはAPIエンドポイントの作成を簡素化します。
従来のREST APIやGraphQLのように、エンドポイントごとに複雑なスキーマ定義やクエリ言語を必要としないため、開発者はAPIの設計やドキュメント作成にかかる手間を大幅に削減できます。
このように、tRPCはTypeScriptをフルに活用して、バックエンドとフロントエンドの開発効率を向上させる画期的なツールです。
- tRPC は TypeScript を用いた RPC 技術
- tRPC を使えばバックエンドとフロントエンド間で型安全を実現
- バックエンドとフロントエンドを分ける大規模プロジェクトでも効率的に開発できる
T3 Stack を使ってWebアプリケーションを開発するメリット
T3 Stackを採用することで、Webアプリケーション開発における多くの利点があります。
T3 Stack で採用されている、Next.js, TypeScript, tRPC, Prisma, Tailwind CSS、そしてNextAuth.jsなどの最先端技術は単体で使用しても強力です。
しかし、これらを組み合わせることで、さらに大きなメリットが得られます。
一貫性のある開発が可能になる
T3 Stackは、フロントエンドからバックエンド、さらにはデータベースと認証システムまで、一貫した開発体験を提供します。
T3 Stack の特徴は、そのほとんどの技術で TypeScript による厳密な型チェックを行うことです。
型が常に安全になることで、コードの一貫性と信頼性が向上します。
また、型がわかることで複数人の開発でもコードを理解しやすくあんり、迅速かつ効率的に開発を可能にしつつ、バグを抑えることができるのです。
アプリをすぐ作ることができる
T3 Stack で使われている技術を使うと、高機能なアプリケーションをスピーディに作ることができるため、すぐ作り、すぐ試すことが可能です。
Tailwind CSSでスタイリングがあっという間にでき、Next.jsで複数ページの設定やパフォーマンスアップも楽々。
ユーザー認証機能は NextAuth.js に任せることで安全かつ高速に実装できます。
さらに Prismaがデータベース操作をシンプルにし、tRPCでフロントとバックの連携もスムーズです。
これらが合わさることで、アイデアをすぐに形にできます。
スケールアップ（拡張）が簡単なので大規模プロジェクトに対応
T3 Stackは、拡張性とメンテナンスの容易さを両立させています。
Prismaによる効率的なデータベース管理は、データベースのスケーリングを容易にし、大規模なデータセットでも問題なく対応できます。
また、Next.jsのパフォーマンス最適化機能は、大規模なアプリケーションでもユーザー体験を快適に保ちます。
さらに、TypeScriptの型システムは、コードの安全性を確保し、大きなプロジェクトにおけるバグのリスクを軽減します。
これらの要素が組み合わさることで、プロジェクトが成長し、複雑になっても管理が容易になります。
プロジェクト要件に合わせてカスタマイズできる
T3 Stack はおすすめな技術を使った開発手法ですが、カスタマイズ性があることも特徴です。
たとえばユーザー認証機能が不要であれば NextAuth.js が使わないこともできます。
また、特に複雑なバックエンド処理が不要であれば tRPC は使わないという選択もできます。
このように、プロジェクトや開発者の好みに合わせてカスタマイズできるという柔軟性があるために、さまざまな場面に T3 Stack の考え方を適用することができます。
なお、T3 Stack で使用している技術を他の技術と入れ替えてしまうと、一般的には T3 Stack と呼ばないようです。
たとえば Tailwind CSS の代わりに Bootstrap を使おうとすると、もともと T3 Stack の思想で Tailwind CSS を採用していた理由と反してしまうからです。
※個人的には、T3 Stack にこだわるのではなく、必要ならば好きにカスタマイズする方がベターだと思っています。
まとめ
T3 Stack は、Web アプリケーション開発において、簡潔さ、効率性、そして型安全を実現するための優れた開発手法です。
一貫性のある開発が可能になるため、複数人で開発するプロジェクトでも安心して使うことができます。
アプリをすぐ作ることができるため、アイデアをすぐに形にすることも可能です。
さらに、スケールアップ（拡張）が簡単なので、大規模プロジェクトにも対応できます。
まだ T3 Stack を試したことがない方は、ぜひ一度使ってみてはいかがでしょうか。
T3 Stack で開発するための学習方法
T3 Stack のメリットを知ったことで、T3 Stack で開発してみたくなった方もいるかもしれません。
しかし、tRPC や Prisma を自分で調べて試すのはハードルが高いですよね。
そんな方は、こちらの Udemy 講座で T3 Stack を短時間で体験してみてはいかがでしょうか？
本講座はT3 Stack の全 6 技術をフルに使った Todo アプリを作りながら T3 Stack を学べますが、たったの 1.5時間ですので気軽に学習できます。
逆に 1.5 時間ではボリュームが少ないと感じるかもしれませんが、T3 Stack の各技術を深掘りする準備として軽く全体を学ぶにはちょうど良いボリュームです。
ただし、Next.js はもちろん TypeScript や Tailwind CSS の知識があった方が理解はスムーズです。
フロントエンド学習を開始したばかりであれば、まずは以下のロードマップに沿って、フロントエンド開発に必要な技術は一通り身につけておくのがおすすめです！
