T3 Stackを開発で使いたい

はじめに

開発の現場で初めてT3 Stackを聞いた時には、どんなものかもさっぱり分からず、「最近はそんなのが流行りなんだ」くらいの認識でした。
「ですが、調べていくうちに、これ実際に開発で使えたら楽じゃない？」
と思うようになり、今回は、自分が実際に開発の現場で使用する前提として考えてみることにします。

そもそも T3 Stackってなに？

T3 Stackの公式ページのイントロダクションによると下記となるようです

(原文)The “T3 Stack” is a web development stack made by Theo↗ focused on simplicity, modularity, and full-stack typesafety.
The core pieces are Next.js↗ and TypeScript↗. Tailwind CSS↗ is almost always included. If you’re doing anything resembling backend, tRPC↗, Prisma↗, and NextAuth.js↗ are great additions too.
You may have noticed that there are a… lot of pieces. That’s by design. Swap pieces in and out as you need - this stack is modular at its core :)

「T3 スタック」は、 Theo によって作成された Web 開発スタックであり、シンプルさ、モジュール性、およびフルスタック タイプ セーフに焦点を当てています。

コア部分はNext.js とTypeScript です。Tailwind CSS はほとんどの場合含まれています。バックエンドに似た何かをしているなら、tRPC 、Prisma 、およびNextAuth.js も素晴らしい追加機能です。

お気づきかもしれませんが…たくさんのピースがあります。それは設計によるものです。必要に応じてピースを入れ替えます - このスタックは基本的にモジュール式です:)

なぜT3 Stack が良いと思ったか

正直、分かる人には上記を見るだけで「メリットとデメリットわかりやすい！」となるかもしれませんが、私からするともう少し詳しく説明がないとわからないとは思います。
そこで、良いところを順々に書いていこうと思います。

シンプルさ

フロントエンド開発の醍醐味としてシンプルさはすごく重要だと考えます。
フロントエンドフレームワーク（Vue, React, Angularなど）がまだない頃にJavascriptを書いていたことがある人は、あまり思いだしたくないかもしれませんが、Javascriptはそれほどに複雑になりがちです。

これは、JavascriptだけではなくHTMLやCSSも同じです。

自由度が高く、やれることが多いために、実際に開発で使おうとすると、スケジュールや急な仕様変更により、ごちゃごちゃになってしまうことが多いと感じます
（私だけかもしれませんが）

必要なものを必要な分だけというシンプル性が、フロントエンド開発には必要だと感じます。

モジュール性

フルスタックのフレームワークの一つの弱点として、「何でもフレームワーク内で解決しちゃえ」があると思います。
ほとんどの場合に、この方式で間違ってはいないとは思いますが、フロントエンド開発においては別だと考えております。

基本的に、フロントエンド開発の場合、使用するライブラリやフレームワークは時代の波に乗って加速度的にバージョンを上げていきます。例えばAngularのメジャーバージョンアップは半年に1回ある話は有名ですよね。

その中で、実際に開発しているメンバーはその新しいライブラリを使いたいが、現場の都合で入れ替えられないということが、フルスタックのフレームワークでは発生しがちだと思います。

そういう意味でも、モジュール性を持って入れ替えられるT3 Stackは魅力的に映りました。

フルスタック

フロントエンドフレームワークの定義としては、かなり珍しい部類だと思います。
フロントエンドフレームワークと言っているのに、バックエンドが作成できてしまいますしね。。。

そんな話は置いておき、フロントエンドフレームワーク内でバックエンドを作ることにどんなメリットがあるか下記に記載します。

• バックエンドとフロントエンドのコードを同じ言語で書ける
  • コードの再利用性が高くなり、全体的な開発効率が向上します
• 型システムによる開発効率の向上
  • 引数や戻り値などに型を付けることができます
  • その型も、フロントエンドとバックエンドの両方で使い回すことができます
• JavaScriptのエコシステムを利用できる
  • JavaScriptで書かれたライブラリやフレームワークをそのまま利用することができます
  • また、TypeScriptの型システムにより、ライブラリの使用方法がわかりやすくなるため、開発効率の向上につながります

タイプセーフ

型の力は偉大です。
Javascriptでよく挙げられるつまづきポイントは、デバッグのしにくさです。

型があれば、実際に動かす前に、書いている途中でこの書き方が間違っているかどうかが分かるようになります。
今は、ESLintなどが大分発達していますが、型が曖昧になっているとlinterにも限界があるため、静的型付けにて明確にすることで、よりESLintを有効的に使えるようになると思います。

使用しているライブラリ達

有名どころが多いのと、詳細に書こうとすると文章が膨大になってしまうので、また個別記事を作成しようと思います。今回は、ざっくりとした内容だけ記載します。

• Next.js
  • JavascriptのライブラリであるReactを用いたフロントエンドフレームワークとなります
  • SPA, SSRのどちらでも対応ができ、世界でも人気のフレームワークです
  • 最近はTurbopackが搭載されることで話題になりましたね
• Typescript
  • Microsoft社が開発しているライブラリとなります
  • Javascriptに対して、静的型付けを行えるスーパーセットとなっております
• Tailwind CSS
  • クラス名を使って直感的にスタイルを適用することができるCSSフレームワークです
  • 組み合わせて使用することで、手早く美しいデザインを作成することができます
• tRPC
  • TypeScriptを使用した高速で堅牢なRPCフレームワークです
  • サーバーサイドとクライアントサイドの両方に対応しており、WebSocketによるリアルタイム通信も可能です
• prisma
  • TypeScriptを使用したモダンなORMフレームワークです
  • マイグレーションやデータモデルの定義、クエリの構築などが簡単にでき、データベースに関する多くの作業を簡略化してくれます
• NextAuth.js
  • Next.jsで使用するための認証ライブラリです
  • 多くの認証プロバイダーに対応しており、簡単にソーシャルログインやメール認証などを実装することができます

実際にT3 Stackで開発する上で考えるポイント

コーディング規約

個人的には、Airbnb React/JSX Style Guideがいいと思っています。
細かく記載が書いてある上で、最近のReactにも対応しているのがおすすめです。

実際に使用する際には、必要なルールをまずはまとめて、ESLintのルールで縛っていくのが楽だとは思います。

formatter

Prettierがおすすめです。
私自身は、Visual Studio Codeと一緒に使ってフォーマットすることが多いです。

おわりに

あえて悪いところは明確に記載しませんでした。
強いてあげるならば、案件との相性と学習コストだとは考えております。

私以外のどこかの誰かの参考に少しでもなれば幸いです。

告知

最後にお知らせとなりますが、イーディーエーでは一緒に働くエンジニアを募集しております。
詳しくは採用情報ページをご確認ください。
https://eda-inc.jp/recruit/
みなさまからのご応募をお待ちしております。