バックエンドエンジニアがフロントエンドで注目されているT3 Stackについて調べてみた

はじめに

前回『TypeScript+NestJS+PrismaでGraphQLサーバーを作成してみた』という記事を書きました。今回は最近フロントエンドWeb開発技術で注目されているT3 Stackとは何なのかを調べてみました。合わせてCLIを使って環境構築をすることでフロントエンドの知見を増やそうと思います。

T3 Stackとは

The "T3 Stack" is a web development stack made by Theo focused on simplicity, modularity, and full-stack typesafety. It consists of:
Next.js
tRPC
Tailwind CSS
TypeScript
Prisma
NextAuth.js

T3 StackとはTheo氏が開発した「シンプル」で「モジュラリティ」で「フルスタック型安全」にフォーカスしたWeb開発スタックです。これらはNext.js、tRPC、Tailwind CSS、TypeScript、Prisma、NextAuth.jsで構成されています。

GitHubリポジトリより

TypeScriptやtRPCを使用し現代に求められる型安全を担保し、NextAuth.jsやPrismaを使用してアプリケーション開発に必要な技術も網羅、Next.jsを通してフロントエンドドリブンでフルスタックに開発するための技術スタックと読み取れますね。
使用される6つの技術について見ていきます。

Next.js とは

Vercel社が開発しているReactのフルスタックフロントエンドフレームワークです。
フロントエンドで人気のフレームワークですね。GoQSystemでも使用しています。

tRPC とは

tRPCはスキーマやコード生成を必要とせず、APIエンドポイントを静的に型付けし、クライアントとサーバー間で型を共有できるRPCフレームワークです。フロントエンドとバックエンドで型を共有し、型安全を可能にするものです。すごいですね。ちなみにtRPCのtはTypeScriptのtだそうです。

T3 Stackの中でtRPCはこのように紹介されています。

If your frontend and backend are TypeScript, it's really hard to beat the DX of tRPC. Kinda like GraphQL but without the work - seriously this lib is magic.
フロントエンドとバックエンドがTypeScriptの場合、tRPCのDXに勝るものはないだろう。GraphQLのようなものだが、手間がかからない。マジでこのライブラリは魔法だ。

Tailwind CSS とは

ユーティリティファーストCSSフレームワークです。フロントエンド全く触らない私にはなんのことやらです。。。
こちらもGoQSystemで採用している技術です。（詳しくはフロントエンドチームがいつか記事を書いてくれるかな！？）

TypeScript とは

マイクロソフトが開発、メンテナンスを行なっている静的型付言語です。
説明不要ですね。GoQSystemのフロントエンドチームもTypeScriptを使用して開発しています。

Prisma とは

Node.jsとTypeScript環境で動作するORM(Object Relational Mapping)です。

公式は以下のように紹介しています。

Prisma unlocks a new level of developer experience when working with databases thanks to its intuitive data model, automated migrations, type-safety & auto-completion.
Prismaは、直感的なデータモデル、自動マイグレーション、型安全性、自動補完機能により、データベースを使用する際の新しいレベルの開発者体験を提供します。

NextAuth.js とは

Next.jsで認証機能を実装するためのライブラリです。
アプリケーションに必須の認証機能を簡単に組み込むことができます。
OAuth+OIDCを使用したJWT認証、GoogleやFacebook、AppleやGitHub、Auth0など多くのプロバイダーをサポートしています。

T3 Axioms

T3 Stackが掲げる3つの公理です。

1. Solve Problems

「何でもかんでも追加する」という罠に陥りがちですが、私たちは明確にそれを望んでいるわけではありません。create-t3-appに追加されるものはすべて、含まれるコアテクノロジーの中に存在する特定の問題を解決するものであるべきです。つまり、ステートライブラリ（zustandやredux）のようなものは追加しませんが、NextAuth.jsのようなものは追加し、PrismaやtRPCを統合してあげようと思っています。

1つ目はSolve Problemsです。コアテクノロジーの特定の問題を解決するものしか持たさないとのこと。ですので、Webアプリケーション開発に必須の認証認可(NextAuth.js)、それとクライアント間の型定義(=tRPC)、ORM(=Prisma)、など最低限の機能は持たすという思想のようです。逆にステートライブラリ（zustandやredux）など、開発するアプリケーションなどにより最適解が変わる技術（境界線も曖昧なのかな？）は追加しないということのようです。これはT3 Stackの「シンプル」を説明していますね。

2. Bleed Responsibly

私たちは、最先端の技術を愛しています。新しい技術から生まれるスピードと、正直なところ、その楽しさは本当に素晴らしい。私たちは、リスクの高い技術をリスクの低い部分に使用し、責任を持ってブリードすることが重要だと考えています。つまり、私たちはリスクの高い新しいデータベース技術に⛔️賭けません（SQLは素晴らしい！）。しかし、tRPCは単なる機能なので、喜んで✅賭けます。

２つ目はBleed Responsiblyです。Bleedをどう訳すか難しいです。ここでは新しい技術を使うことによる出血、つまり「新しいバグや問題」に直面する。ロングマン英英辞典にこんな意味（"to spread from one area of cloth or paper to another"）も書いてあるので、「問題点などの拡散」や「境界線が曖昧になる」と解釈できるのではないかと考えました。"We think it's important to bleed responsibly, using riskier tech in the less risky parts."「リスクの低いところでリスクの高い（新しい）技術を使用して責任を持って出血することが大切」とし、リスキーなデータベース技術などには賭けないよと。でもtRPCはただの機能で簡単に外すことができるから採用すると。つまり、境界線を明確にできて、かつ簡単に取り除けるものしか採用しないと解釈できそうです。これはT3 Stackの「モジュラリティ」のことを説明しているようです。

3. Typesafety Isn't Optional

create-t3-appの目標は、新しいフルスタック、タイプセーフのWebアプリケーションを開始する最も迅速な方法を提供することです。それは私たちの生産性を向上させ、よりバグを少なくするのに役立ちますので、我々はこれらの部分で真剣に型安全性を取ります。create-t3-appのタイプセーフな性質を損なういかなる決定も、別のプロジェクトでなされるべきものです。

型安全は選択肢ではなく、目標であると。この目標を阻害するものは、いかなる理由があっても取り入れない。型安全であることはバグを少なくし、生産性が向上される、だからとにかく追及していくという強い意思を汲み取れます。これはT3 Stackの「フルスタックの型安全」を表していますね。

T3 Stackのコンセプト、T3 Axiomsについての感想

現代のWebアプリケーション開発に求められる要件である「型安全」、「スピード」、「品質」をとにかく追求していますね。
Bleed Responsiblyは強く共感できます。新しい技術を使うことはワクワクしますが、使い所はよく考えないといけないし、プロダクションレベルになると何年・何十年にもなる保守運用フェーズを考慮しなければいけないので、責任を強く意識しなければいけない。だから境界線は明確に、使うときはリスクの低い場所で。重要ですね。
シンプルであることもとても大切です。Solve Problemsにある、「 「何でもかんでも追加する」という罠に陥りがち」これはアプリケーションの機能開発でも同じことが言えると思います。アーキテクチャもそうです。何事もシンプルに保つことができれば高い生産性や品質は実現できると個人的にも考えています。

CLIを使用して開発環境を構築してみる

実際にCLIを利用して環境を構築してみます。

環境

※ nodeやnpmはインストールされているものとします。

マシン：MacBook Pro （13インチ, 2020）（Apple M1, メモリ16GBモデル）
OS：macOS Ventura 13.0.1

npm -v
8.19.2

node -v
v18.12.1

以下のコマンドを使用するだけでT3 Stackの環境構築が可能です。とても便利ですね。

npm create t3-app@latest

私はnpmを使用しましたが、他にもyarnとpnpmバージョンもあります。

1. プロジェクト名（ディレクトリ名）を決めます。

今回はmy-t3-stackとします。

npm create t3-app@latest
   ___ ___ ___   __ _____ ___   _____ ____    __   ___ ___
  / __| _ \ __| /  \_   _| __| |_   _|__ /   /  \ | _ \ _ \
 | (__|   / _| / /\ \| | | _|    | |  |_ \  / /\ \|  _/  _/
  \___|_|_\___|_/‾‾\_\_| |___|   |_| |___/ /_/‾‾\_\_| |_|


? What will your project be called? my-t3-stack

2. 使用する言語を選択します。

もちろんTypeScriptを選択します。

? Will you be using TypeScript or JavaScript? (Use arrow keys)
❯ TypeScript
  JavaScript

3. 使用するパッケージを選択します。

もちろん全て使用したいのでaで全選択します。

? Which packages would you like to enable? (Press <space> to select, <a> to toggle
all, <i> to invert selection, and <enter> to proceed)
❯◉ nextAuth
 ◉ prisma
 ◉ tailwind
 ◉ trpc

4. git repogitoryを開始するか聞かれるのでY

? Initialize a new git repository? Yes

4. npm installを実行していいか聞かれるのでY

? Would you like us to run 'npm install'? Yes

最終的なアウトプット

   ___ ___ ___   __ _____ ___   _____ ____    __   ___ ___
  / __| _ \ __| /  \_   _| __| |_   _|__ /   /  \ | _ \ _ \
 | (__|   / _| / /\ \| | | _|    | |  |_ \  / /\ \|  _/  _/
  \___|_|_\___|_/‾‾\_\_| |___|   |_| |___/ /_/‾‾\_\_| |_|


? What will your project be called? my-t3-stack
? 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? Yes
Nice one! Initializing repository!
? Would you like us to run 'npm install'? Yes
Alright. We'll install the dependencies for you!

Using: npm

✔ my-t3-stack 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

Initializing Git...
✔ Successfully initialized and staged git

Installing dependencies...
✔ Successfully installed dependencies!

Next steps:
  cd my-t3-stack
  npx prisma db push
  npm run dev

起動してみる

先ほどの出力にあったようにPrismaのSchemaを実行します。

cd my-t3-stack
npx prisma db push

では起動します。

npm run dev

http://localhost:3000へアクセスするとこのような画面が表示されました。

めちゃくちゃ簡単ですね。内容などについてはいずれまた。

最後に

GoQSystemでは一緒に働いてくれる仲間を募集中です！

求人は出していませんが、SREやQAエンジニアも今後募集していこうと考えています！
ご興味がある方は以下リンクよりご確認ください。