🚀
T3 Stackに入門する１
T3 Stackとは
- シンプルで早く作れる
- 型安全で堅牢に作れる
- 以下の技術スタックで構成される
1.Next.js
2.tRPC
3.Tailwind CSS
4.TypeScript
5.tRPC
6.Prisma
7.NextAuth.js
tRPCとは
皆さん聞いたことありますでしょうか？
わたしはあまり馴染みがなかったので、調べたメモを記します。
tRPCとは、TypeScript Remote Procedure Callの略。
REST APIやGraphQLの代替として注目されている。
ただし、フロントエンドとバックエンドともにTypeScriptを採用する必要がある。
すなはち、実装言語、フレームワークの自由度が無い。
サーバサイドで定義した関数の引数と戻り値がクライアントサイドに自動で共有される。
すなはちクライアントの実装で型エラーを吐いてくれるので、型安全な実装ができる。
バックエンドで関数を定義して、クライアントで呼ぶだけで良い
tRPCを採用しないシーン
TypeScriptでクライアントサイドもサーバサイドも統一するならtRPCというのはわかった。
逆にどういった場合に採用しないのか考える。
- 圧倒的な性能が要求される場合 （Rustが候補）
- アプリケーションのデータモデルが複雑で表現が難しい場合 （GraphQLが候補）
- HTTP/HTTPSエンドポイントを公開して色んなところで利用したい場合 （RESTかGraphQLが候補）
T3 Stackをセットアップする
私のマシンは、voltaと呼ばれる超便利なツールを入れているので、まずはvoltaでNode.jsの環境をセットアップする
volta install node@18
早速、公式GitHubに従ってセットアップする。
npmでなく、 pnpmを使ってみる。
pnpm create t3-app@latest
対話モードで聞かれるので応答していく。
超定番のTodoアプリをつくるため、プロジェクト名はt3-todo-appとした。
? What will your project be called? t3-todo-app
? Will you be using TypeScript or JavaScript? TypeScript
Good choice! Using TypeScript!
? Which packages would you like to enable? nextAuth, prisma, tailwind, trpc
? Initialize a new git repository? No
Sounds good! You can come back and run git init later.
? Would you like us to run 'pnpm install'? No
No worries. You can run 'pnpm install' later to install the dependencies.
? What import alias would you like configured? ~/
応答後、以下が出力される
✔ t3-todo-app 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 envVariables
Next steps:
cd t3-todo-app
pnpm install
pnpm prisma db push
pnpm dev
git commit -m "initial commit"
動作確認
cd t3-todo-app
pnpm install
pnpm prisma db push
pnpm dev
ブラウザにて localhost:3000 にアクセスすると画面がでてきた。
おわりに
T3 Stackとは何か。tRPCとは何かから始まり、実際にT3 Stackをセットアップして動作確認してみた。
次回は、データベースを用意して、Todoアプリを作ってみたいと思う。
以上。
Discussion