学んだきっかけ
これまでの個人開発では、フロントエンドにNext.js、バックエンドにSpringBootを使用して開発を行ってきました。
しかし、Next.jsはバックエンド開発も可能であるため、その便利さを実感したく、フルスタックで開発してみようと思い、API RouteやPrismaについて調べていました。
その際に、T3 Stackというものを知り、Next.jsやTypeScript、Tailwind CSSなど、既に使ったことのある技術が含まれていたため、これを機にT3 Stackについて学んでみました！
T3 Stackとは？
T3 Stackとはsimplicity（簡潔さ）、modularity（モジュール性）、full-stack type safety（フルスタックの型安全）に焦点を当てた開発手法です。
そして上記を実現するために以下6つの技術スタックを使用します。（個々の説明は割愛）
- Next.js
- TRPC
- NextAuth
- Prisma
- Tailwind CSS
- TypeScript
また、以下コマンドにてプロジェクトを作成すれば、上記６つの技術スタックの基本的な設定をあらかじめ用意してくれます。
とても便利です。
npm create t3-app@latest
コードの中身については、今回は記述しませんが、自分が学んだUdemy講座とYoutubeのリンクを貼っておきますので、ぜひ興味のある方は視聴してみてください。
使ってみての感想
T3 Stack全体として
- 以前、Next.jsとSpring Bootで開発していた時は、バックエンドではControllerでフロントエンドからの処理を捌いていたが、T3 Stackでは、TRPC で定義した関数（プロシージャ）にバックエンドの処理を記述し、それを直接フロントエンドから呼べる（しかも型安全に）ためすごい便利。（Server Actoinsなども今後学びたい）
- TRPC により、フロント←→バック間の型の整合性が担保されるため、TypeScriptの利点をより活かした開発手法だと感じた。
Next.js
- フロントエンドとバックエンドを同プロジェクトで開発できるのは便利
- デプロイが一回で良いのは楽。
- シンプルにIDEを切り替えないで良いのが楽。
TRPC
- zodによる型定義がめちゃくちゃ便利。
Prisma
- Prisma Studio（ブラウザのGUI操作でDBを照会•更新できる）が便利。
NextAuth
- ポートフォリオで使用したFirebase Authenticationと似ていた。
最後に
T3 Stackを使用することで、高機能のアプリケーションをスピーディーに作成できると感じました。
今回、TRPCやPrisma、NextAuthについては、初めて学んだため、さらにもっと詳しい使い方について今後学んでいきたいと感じました。