はじめに
世間的には今さらな感じだと思うが、t3-stackという技術スタックがあって、結構いいらしいぞという話を見かけた。
まずは入門して、徐々に使いこなせるようになれればと思い、どんな技術でどんな特徴があるのかを整理してみる。
t3 スタックとは
Theoさんという方が提唱したfullstackでtypesafeな Web 開発のための技術スタック。
構成する要素は以下の 6 つ。
-
Next.js
- React をベースとしており、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）などにも対応した協力なフルスタック Web フレームワークである。
-
TypeScript
- JavaScript のスーパーセットであり、静的型付けを提供するプログラミング言語。JavaScript の機能を拡張し、型の検査や高度なコード補完を可能にすることで、開発者の生産性とコード品質を向上させることを目的とする。
-
tRPC
- TypeScript を活用した、型安全なリモートプロシージャコール（RPC）を実現するライブラリ。フロントエンドとバックエンド間で API 呼び出しを行う際に、型情報を自動で共有してくれる。
-
Prisma
- TypeScript と Node.js を使った OR マッパー。型安全なクエリビルダやマイグレーションツールが便利で、クエリ最適化を行なってくれるためパフォーマンスがよい。
-
Tailwind CSS
- ユーティリティファーストな CSS フレームワーク。HTML にクラスを付与するだけでスタイリング可能で、フロント開発を効率化してくれる。
-
NextAuth.js
- Next.js アプリケーションに簡単に認証機能を追加できるライブラリ。Google などの OAuth プロバイダやよくあるメールアドレス／パスワード認証、ワンタイムパスワードなどを簡単に導入できる。
TypeScript 縛りという言語の制限（統一）によって、強烈な恩恵を受けることができる！という感じ。
t3 スタック の強み
t3 スタックおよび tRPC の強みと特徴はこんな感じ。
- フロントとバックエンドで型定義を共有することで、型の整合性を保ちながら開発が進められる
- Next.js をベースとした開発により、SSR や SSG など、現代的な Web アプリケーションに必要な多くの機能を簡単に利用できる
- Tailwind CSS を使うことで、迅速に美しい UI を構築することができる（これに関しては必要に応じて要否を検討すべきだと思う）
- 1 つの言語（TypeScript）で一貫して開発することができるため、リソースに限りがある現場やチームが迅速にプロダクトを開発できる
まずは動かしてみる
試した環境
$ node -v
v22.3.0
$ npm -v
10.5.2
アプリケーション作成
npm create t3-app@latest
途中いろいろ質問に答えながら（選択しながら）プロジェクト作成完了！
$ npm create t3-app@latest
Need to install the following packages:
create-t3-app@7.38.1
Ok to proceed? (y)
___ ___ ___ __ _____ ___ _____ ____ __ ___ ___
/ __| _ \ __| / \_ _| __| |_ _|__ / / \ | _ \ _ \
| (__| / _| / /\ \| | | _| | | |_ \ / /\ \| _/ _/
\___|_|_\___|_/‾‾\_\_| |___| |_| |___/ /_/‾‾\_\_| |_|
|
o What will your project be called?
| t3-tutorial
|
o Will you be using TypeScript or JavaScript?
| TypeScript
|
o Will you be using Tailwind CSS for styling?
| Yes
|
o Would you like to use tRPC?
| Yes
|
o What authentication provider would you like to use?
| NextAuth.js
|
o What database ORM would you like to use?
| Prisma
|
o Would you like to use Next.js App Router?
| Yes
|
o What database provider would you like to use?
| MySQL
|
o Should we initialize a Git repository and stage the changes?
| Yes
|
o Should we run 'npm install' for you?
| Yes
|
o What import alias would you like to use?
| ~/
Using: npm
√ t3-tutorial scaffolded successfully!
Adding boilerplate...
√ Successfully setup boilerplate for nextAuth
√ Successfully setup boilerplate for prisma
√ Successfully setup boilerplate for tailwind
√ Successfully setup boilerplate for trpc
√ Successfully setup boilerplate for dbContainer
√ Successfully setup boilerplate for envVariables
√ Successfully setup boilerplate for eslint
Installing dependencies...
npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm WARN deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
npm WARN deprecated @humanwhocodes/config-array@0.13.0: Use @eslint/config-array instead
npm WARN deprecated eslint@8.57.1: This version is no longer supported. Please see https://eslint.org/version-support for other options.
√ Successfully installed dependencies!
Initializing Git...
√ Successfully initialized and staged git
Next steps:
cd t3-tutorial
Start up a database, if needed using './start-database.sh'
npm run db:push
Fill in your .env with necessary values. See https://create.t3.gg/en/usage/first-steps for more info.
npm run dev
git commit -m "initial commit"
別の認証ライブラリ使いたい場合は NextAuth を入れないとか、ORM を Prisma じゃなくDrizzleというやつにするとか、それぞれの要件にあわせてカスタムできる。
無邪気に起動してみる！
npm run dev
ダメだった。。。
$ npm run dev
> t3-tutorial@0.1.0 dev
> next dev --turbo
❌ Invalid environment variables: {
AUTH_DISCORD_ID: [ 'Required' ],
AUTH_DISCORD_SECRET: [ 'Required' ]
}
環境変数とか、もろもろ初期設定に必要な値がセットできてないっぽい。
開発サーバー起動できなかったけどとりあえずプロジェクト作成できたのでいったん終わり！深追いしない！（モヤモヤ）
おわりに
TypeScript でフロントとバックエンドを一貫して開発できるのは、リソースが限られた個人開発や小規模チーム開発で強いと思う。
何より、型情報をフロントとバックエンドで共有できるので、かなり効率的。
Next.js と TypeScript を中心に、「何か Web アプリ作りたい」という時の自分のスタンダードになるくらいには触れるようにしたい。
あと、Web とあわせてモバイルアプリを提供したい！となった場合に、React Native で tRPC クライアントを同じように使えるっぽいので、その辺りも一緒にキャッチしていけたらと思う。
あとは、ホスティング環境も「これだったらだいたいわかる！」というものを 1 つ持ちたいので、Firebase ホスティングを勉強してみることにする。