フロントエンド界隈で新しく提唱されているT3 Stackについて調べてみた
T3 Stackとは
昨今のWeb開発ではTypescriptによる型安全なWebアプリケーションの開発を求められている。またバックエンドとフロントエンド、さらにBFFによる構成においていかに型安全で効率よく開発するかはWebアプリ開発において非常に重要な課題となっている。
そこでTheo氏によって「T3 Stack」という技術スタックが提唱された。 これは最近注目のWeb開発の技術スタックとなっている
T3 Stackにおいては以下3つの思想に焦点が当てられている。
- simplicity(簡潔さ)
- modularity(モジュール性)
- full-stack typesafety(フルスタックの型安全)
そしてこれらの思想を実現するためにT3 Stackでは以下6つの技術を採用する
- Next.js
- tRPC
- Tailwind CSS
- Typescript
- Prisma
- NextAuth.js
T3 Stackにおいて採用される技術
Next.js
Next.jsはReactをベースとしたフルスタックフロントエンドフレームワークである。Reactはコンポーネントを宣言的に記述することができ、最近ではフロントエンドで人気が特に高いUIライブラリとなっている
Next.jsはこのReactの機能に加えて、RouterやSSR、SSG、ISR, 画像最適化などの機能が提供されている。これらの機能によりWebアプリケーションの開発体験が大幅に向上した。
tRPC
tRPCとはスキーマやコード生成なしで型安全なAPIのレスポンスを提供することができるライブラリである。先程も述べたようにWeb APIの開発ではバックエンドとフロントエンドの通信間で型を安全に保つ必要性が求められている。
それを実現するのがこのtRPCでありAPIのエンドポイントに静的な型をつけることができる。さらにその型をサーバーサイドとクライアントサイドの両方で共有することによって型安全なWeb APIとクライアント間の通信を実現することができるようになった
Tailwind CSS
Tailwind CSSの特徴としては何よりもユーティリティファーストという設計思想である。
従来までの開発ではスタイルを当てたいタグに対してクラス名を定義することでスタイルを定義してきた。しかし現代のコンポーネント指向なUI設計において柔軟にスタイルを当てる必要性が出てきた。
このClass名の命名こそがコンポーネント設計を複雑にする要因であることから生まれたフレームワークである。より柔軟にスタイルの設計を行うことができる便利なUIライブラリとなっている
TypeScript
ここまで読んでいただければ説明不要かと思うが、マイクロソフトの開発したAlt JSの一つであり静的型付言語である。Typescriptの登場でJavascriptを型安全に書くことが可能になった。
先程から何度も言及してきたが、TypeScriptは現代の複雑なWebアプリケーションにおいては欠かせないツールである
Prisma
PrismaはNode.jsとTypescriptを利用した型安全なORMである。DBのスキーマを定義することでデータのモデルによる型をベースに関数の自動補完等が提供される
PrismaによってアプリケーションのモデルとDBのモデルが一致することでより安全にコードを書くことができるようになるORMである
NextAuth.js
NextAuth.jsはNext.jsをベースとした認証ライブラリである。Next.jsによって構築されたサーバーレスなアプリケーションに対して簡単に認証機能を導入することができるようになる
GoogleやFacebook等のOAuth認証もサポートしており簡単に導入することができる。さらにJWTやデータベースセッション両方の認証方式もサポートしてくれるライブラリである
T3 Axioms
T3が掲げている公理。提唱者の考え
Solve Problems
Theo氏によると
It's easy to fall in the trap of "adding everything" - we explicitly don't want to do that
あらゆるものを追加しようする罠に嵌まりやすいが、それはT3がやりたくないことである
Everything added to create-t3-app should solve a specific problem that exists within the core technologies included
create-t3-appに追加された全てのものはある特定の課題を解決すべきものである
ここでも述べられているようにT3はWebアプリケーションに必要なものを全て含んでいるわけではないと述べられている。例をあげるとReduxのようなstate管理ライブラリであるが、T3はあくまでも最初に掲げた「simplicity」、「modularity」、「full-stack typesafety」を実現するために必要な最小構成であると考えられる。
もしそれ以外でプロジェクトに必要なものがあるとするのであれば、プロジェクトの要件や仕様に応じて各自で議論することになるだろう
Bleed Responsibly
Theo氏によると
We think it's important to bleed responsibly, using riskier tech in the less risky parts
私たちは出血(最新の技術を使う上でのリスクのこと)について考える必要がある。リスクのある技術をリスクの少ない部分に使うべきであり、私達はリスクを積極的に取ることができる
例えばtRPCは最新の技術であるが、それはあくまでもただの機能である。なのでプロダクトにそぐわなかったり、機能として問題があるのであればそれは使うべきではないと考えられる
これはまさにmodularityを示しており、部分的に取り外すことが可能なことを指している
Typesafety Isn't Optional
型安全は絶対である
Theo氏によると
Two of the three T's are typesafe (Typescript, tRPC). We take typesafety seriously in these parts
3つのTのうち2つは型安全に関してです。私たちは型安全について真剣に考えています
これまで何回も繰り返してきたが、T3は型安全に着目した技術スタックである。
(Theo氏のDiscordのタイトルが型安全崇拝になっていました...型安全はカルトです)
create-t3-app
今回紹介したT3 Stackを利用したプロジェクトを作成するためのCLIツールも用意されている
(もしT3での開発体験をしてみたいという方はこちらで簡単にプロジェクトを作れるようになっています！)
まとめ
今回は「T3 Stack」という最近注目されている技術スタックについて紹介しました
筆者は普段Reactを利用する機会も少ないので、この様なjavascriptでサーバーサイドからフロントエンドまで一貫して開発する体験も機会があればしてみたいなと思っています
T3 Stackで型安全にプロダクトを開発したいという方はぜひ検討してみてください！
Discussion
一部翻訳にミスがあったため修正致しました。ご指摘頂いた方ありがとうございます
↓