TypeScriptベースのフルスタックフレームワーク「T3 Stack」で極上の開発体験を 何がすごいのか？：フルスタックフレームワーク、T3 Stack入門（1）（1/3 ページ）

フロントエンドエンジニアに向けて、Webアプリケーション開発のためのフルスタックフレームワークT3 Stackを解説する本連載。第1回はT3 Stackの概要とTodoアプリ作成を例にしたチュートリアルを紹介する。

[上原潤二，NTTテクノクロス]

　NTTテクノクロスの上原です。本記事は、効率性の高いWebアプリケーション開発のためのフルスタックフレームワーク「T3 Stack」についての連載1回目です。T3 Stackの概要と簡単なチュートリアルとしてTodoアプリ作成について説明していきます。

　Web開発技術は日進月歩であり、忙しいエンジニアにとってキャッチアップは大変で、時には技術の名前を覚えることすら難しい印象を持つかもしれません。しかし、それを避けて古い技術にとどまっているわけにもいきません。技術トレンドと、個々の技術の位置付けや必然性を見すえて、技術を点ではなく線、面で捉えていくことで技術習得は地に足がついた形になるのではないでしょうか。

　今回ご紹介するT3 Stackは、「T3 原則」と呼ばれる一貫した技術ポリシーを形にした技術群です。この連載ではT3 Stackの紹介を通じて、T3 Stackで代表されるような開発トレンドを見ていきます。

　連載第1回目となる今回はT3 Stackの全体像を紹介します。次回以降は個々の構成要素について、考え方や位置付けを重視しつつ、具体的に紹介していきたいと思います。以下に今後の連載予定を示します。

• 第1回　T3 Stackの概要
• 第2回　tRPCによる分散処理
• 第3回　Prismaによるデータベース設計と運用
• 第4回　Tailwind CSSによる画面設計

T3 Stackとは何ぞや

　ご存じのように、TypeScriptはJavaScriptに静的型情報を付与することで、開発の安全性や効率を高めることができる言語であり、昨今のフロントエンド開発では広く普及しています。また普及に伴って、型情報から得られる恩恵が最大限受けられるように周辺ツールが対応するようになってきています。

　T3 Stackも、TypeScriptを最大限活用するフルスタックフレームワークであり、Theo氏（@t3dotgg）が提唱することで始まったものです。なお、T3の’T’は「Theo」のTから来ていて、TypeScriptやTailwind CSSのTから来ているわけではないそうです。

　T3 Stackの構成要素は以下の通りです。