これはIMPL Advent Calendar 2022の1日目の記事です。
https://adventar.org/calendars/7404
T3 Stackとは？
自分が普段開発している最中に、もう少しシンプルな構成にしたいなと思う時があります。
選定候補であるフレームワークやライブラリは、星の数ほどを多く存在します。
しばしば「ライブラリを追加しすぎて首が回らなくなる」と言った状況も観測してきました。
また、アプリ開発では、認証やDBアクセス、レスポンシブなUIといった実装が必要な場合が多いです。
そこで、最近それを解決しようという思想が生まれました。
それが、にわかにフロントエンド界隈を盛り上げている、T3 Stackです。
具体的に言うと、下記の構成で作るアプリケーションのことを指します。
T3 Stackの強み
英語の原文が見たい方は下記READMEを参照してください。
T3 Stackは下記の３つ部分の思想が核になります。
■simplicity(簡潔さ)
■modularity(再結合性)
■full-stack typesafety(フルスタックな型安全性)
１つずつ触れて行きます。
simplicity
シンプルさと聞いて、下記のようなことと思った方もいるかもしれません。
「コードの行数 = シンプル性」
「シンプルなデザインパターン」
「ソフトウェアで汎用性に従っているのでシンプル」
これらは当てはまらず、もう少しベターな回答があります。
読みやすく、理解しやすく、正しく修正しやすいことです。
modularity
モジュールの利点は、部品を独立して考えることが可能なところです。
もう少し細かく分解すると、下記のようなものになります。
■システムのコンポーネントを分離して再結合できる
■ソフトウェアパッケージを論理ユニットに分割可能
モジュールは、他の言語にも共通する考え方なので飲み込みやすいと思います。
車をの作成には部品が必要なので、部品ごとに独立して作るという考え方でOKです！
full-stack typesafety
フルスタック型安全とは、アプリケーション全体で型の一貫性を保つという考え方です。
つまりDBからAPI、フロントエンドまでにおける全ての過程で型の安全性を確保するということです。
考え方としては「型駆動開発」などど言い換えた方が分かりやすいかもしれませんね。
ここでは、
- データベース(tRPC)
- ORM(Prisma)
- サーバー(Next.js + TypeScript)
- フロント(Next.js + TypeScript)
全てのレイヤーで型を持つことによって生じる型の安全性のことを指します。
構成の特徴
構成されている技術の特徴を、軽く説明して行きます。
Next.js
サーバーサイドのスクリプトや静的Webサイトも作れます。
また、Reactっぽい書き味で色々出来るのがいいところですね。
その他にも、日本語のドキュメントが手厚く、手軽に学習しやすい点も魅力です。
個人的な主観で言えば、優柔不断な人間なので下記あたりが最高です。
■環境構築の作業がすごく楽
■Reactと違い、ディレクトリ構成を決めてくれる
■フロントとAPIの両方をレンダリング可能なので、技術選定に迷わない
TypeScript
いまモダンな技術で開発者に好まれると言えばコレ、TypeScriptです。
フロントを少しでも触ったことがあれば、TypeScriptといえば型ということが分かるかと思います。
特に厳選してTypeScriptの良さを書くと下記になります。
すべて書いていくと冗長になるので、キーワードが気になった方は別途調べてみてください。
■型推論
■静的型付け
■null安全性
１つだけ付け加えると、これらの３つの特徴はプログラミング界隈全体のトレンドです。
SwiftやHaskell、Rustなどの近年よく名前を聞く言語は、全てこれらを網羅しています。
どれか１つでも書いたことがあれば、なんとなく概念は理解できるかもしれませんね！
Tailwind CSS
TailwindCSSには一長一短あります。
採用の是非はありますが、今回使うインストーラーのバンドルに含まれているので紹介しておきます。
書き味に優れ、小さく作る分には必要十分です。
以下、個人的なTailwind CSSに対する感想です。
■使いやすい点
・実装しやすい
・CSS設計の必要性がない
・スコープがファイル単位なので、変な所でCSSが効かない
■使いにくい点
・独特な命名規則
・逐次ドキュメントを参照する必要がある
tRPC
Typescript Remote Procedure Callです。
もう一方で、gRPCというGoogleが開発したものもあります。
今回はTypeScriptを採用しているので、こちらを紹介します。
簡単に役割を言うと、GraphQLのようにAPI向けのデータ構造を作ることが出来ます。
ざっくり所感として良いなと思った点は下記です。
■インターフェースを書かなくていい
■サーバーインスタンスを実行しなくていい
■IDEで静的に解析できる(型チェック)
Prisma
PrismaはNode.jsのORMです。
ORMは、SQL文を書かずともDBを生成して値を取得、変更など出来るものとしての理解でOKです。
DBのスキーマを定義して、モデルに型を書くと推測して関数の自動補完などしてくれます。
■型安全
■型推論
■関数の自動補完
アプリのモデルとDBのモデルが一致することでより安全にコードを書くことができます。
NextAuth.js
NextAuth.jsは、その名の通りNext.jsの書き方を踏襲した認証ライブラリです。
Next.jsのアプリケーションに簡単に認証機能を導入できます。
■OAuth認証のサポート
■JWT認証方式のサポート
■データベースセッション認証方式のサポート
その名の通り、Next.jsとの互換性が高いので、導入しやすい点が特徴です。
特に認証形式を選べる点が好まれる要因でもあるようですね！
構成を作ってみよう
今回使用したリポジトリは下記です。
まずは、Next.jsで立ち上げるアプリケーションの環境を構築していきます！
T3 Stackの構成であるNext.jsを使いますが、webpackロックインの設計のため、viteが使えません。
vite や snowpack 等のバンドルなしビルダーの開発体験は味わえませんが、今回はwebpackでビルドしていきます。
まずはt3-stackの構成全てのインストーラを実行します。
先人に感謝！
$ npx create-t3-app@latestこれで必要なものが全てインストールできました。
以下、選択の結果です。
? What will your project be called? t3-stack-app
? Will you be using JavaScript or TypeScript? 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!構成について選択肢が現れますが、今回は全て有効化しました。
? 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最後に聞かれるGitのリポジトリに格納する設定などは、個人のお好きなように設定してください。
たくさんのディレクトリが生まれますが、一応中身の説明をするとこんな感じです。
- ~/prisma/*
データベース構造を定義するところ。
Prismでモデルの構造が書かれていたりする。 - ~/public/*
フォントや画像などの最初の置き場。 - ~/src/env/*
環境変数に対し、整形やバリデーションをするファイルが置かれている。 - ~/src/pages/*
フロント側のページを置く場所。 - ~/src/server/*
バックエンドとかAPIの場所。
中身はtRPCで書かれています。 - ~/src/styles/*
CSS置き場です。
TailwindCSSを使う限りは不要です。 - ~/src/types/*
認証系の型を宣言するファイルの置き場です。 - ~/src/utils/*
よく使うものを置いておく場所。
セットアップだとベースURLの定義などがされている。
ビルドを実行する
下記を実行してビルドします。
$ yarn dev何か設定してない限りは、<a href="http://localhost:3000/">http://localhost:3000</a>にサーバーが立つと思います。
下記の画面が表示されたら成功です。
さて、これでT3 Stackの準備ができました！
あとは実際にコードを見て、どういった所で型を書いているか確認してみてください！
バリデーションにはzodを使っていたりと、随所に型を大切にする工夫がされているはずです！
さいごに
この構成で小さく作ってデプロイするときはVercelにしておくとNext.jsとの互換性があって良いです！
というわけで、考案者であるTheoに敬意を払ってコミュニティのURLを貼って終わりにしたいと思います。
ここまで読んでくださり、ありがとうございました。
また、ここまで読んでいただいて弊社に興味を持っていただいた方へ。
古い記事ではありますが、下記のような会社です。
興味がある方は、弊社HPから応募の程をよろしくお願いします！
