Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
T3 Stack + Supabaseでアプリを作ってみる
Search
Yohei Iino
November 12, 2023
Technology
0
250
T3 Stack + Supabaseでアプリを作ってみる
Yohei Iino
November 12, 2023
Tweet
Share
More Decks by Yohei Iino
See All by Yohei Iino
1年半放置したExpo製アプリを最新化してみた
wheatandcat
0
42
作成中のFlutterアプリの中間発表
wheatandcat
0
41
最近読んだ技術書を簡単紹介
wheatandcat
0
62
ユニバーサルリンク/アプリリンクを使ってQRコードでゲストログインできるようにする
wheatandcat
0
120
Firebase App Checkを実装したので紹介
wheatandcat
0
110
PlanetScaleの無料プランがなくなるので、NeonとTiDBを試してみた
wheatandcat
0
280
Flutter HooksとRiverpodの解説
wheatandcat
0
390
T3 Stack(応用編: Next Auth & SSRの実装紹介)
wheatandcat
1
340
App Routerの紹介
wheatandcat
0
100
Other Decks in Technology
See All in Technology
AI時代の知識創造 ─GeminiとSECIモデルで読み解く “暗黙知”と創造の境界線
nyagasan
0
180
【CEDEC2025】『ウマ娘 プリティーダービー』における映像制作のさらなる高品質化へ!~ 豊富な素材出力と制作フローの改善を実現するツールについて~
cygames
PRO
0
170
反脆弱性(アンチフラジャイル)とデータ基盤構築
cuebic9bic
2
140
みんなのSRE 〜チーム全員でのSRE活動にするための4つの取り組み〜
kakehashi
PRO
2
120
Microsoft Clarityでインサイトを見つけよう
nakasho
0
110
【Λ(らむだ)】最近のアプデ情報 / RPALT20250729
lambda
0
210
Bet "Bet AI" - Accelerating Our AI Journey #BetAIDay
layerx
PRO
4
1.2k
生成AI時代におけるAI・機械学習技術を用いたプロダクト開発の深化と進化 #BetAIDay
layerx
PRO
1
760
大規模イベントを支える ABEMA の アーキテクチャ 変遷 2025
nagapad
6
610
ecspressoの設計思想に至る道 / sekkeinight2025
fujiwara3
12
2.3k
Gemini in Android Studio - Google I/O Bangkok '25
akexorcist
0
160
alecthomas/kong はいいぞ
fujiwara3
6
1.3k
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
Scaling GitHub
holman
461
140k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Fireside Chat
paigeccino
37
3.6k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Adopting Sorbet at Scale
ufuk
77
9.5k
Raft: Consensus for Rubyists
vanstee
140
7k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Thoughts on Productivity
jonyablonski
69
4.8k
Transcript
T3 Stack + Supabase で アプリ作ってみる Press Space for next
page
自己紹介 📝 飯野陽平(wheatandcat ) 🏢 法人設立(合同会社 UNICORN 代表社員) 💻 Work:
シェアフル株式会社 CTO 📚 Blog: https://www.wheatandcat.me/ 🛠 今までに作ったもの memoir ペペロミア MarkyLinky Atomic Design Check List
T3 Stack とは? 最近、話題の Web アプリ開発のアーキテクチャ 以下の 3 つの思想に集点を当てて設計された技術スタック simplicity(
簡潔さ) modularity( モジュール性) full-stack typesafety( フルスタックの型安全) t3-app としてコマンドラインツールも公開されている 採用されている 6 つの技術については紹介
Next.js Next.js - The React Framework React をベースとしたフルスタックフロントエンドフレームワーク 大規模な Web
アプリケーションでは採用されていることが多い
tRPC tRPC スキーマやコード生成なしで型安全な API のレスポンスを提供することができるライブラリ 以前、紹介のスライドを作成したので詳しくは、以下を参照 tRPC の紹介 - Speaker
Deck
Tailwind CSS Tailwind CSS 最近流行りの CSS フレームワーク ユーティリティファーストの思想で設計されており、汎用性が高く、自身で css を作成するコストが大幅
に軽減される
TypeScript TypeScript: JavaScript With Syntax For Types. JavaScript を拡張して開発された言語 型安全を保ちながら開発を行うことができる
Prisma Prisma | Next-generation ORM for Node.js & TypeScript Node.js
製の ORM データベースのスキーマ定義を行うことで、型安全なクエリを実行できる 以前、紹介のスライドを作成したので詳しくは、以下を参照 Prisma を試してみた - Speaker Deck
NextAuth.js NextAuth.js Next.js をベースとした認証ライブラリ 各サービスのログインに対応 Next.js でフロントエンド、サーバーサイドの API の認証を一元管理できる
T3 Stack を使っててサービスを作ってみた 使用技術 T3 Stack ログインは Discoed で実装 Supabase
以前、紹介のスライドを作成したので詳しくは、以下を参照 Supabase の紹介 - Speaker Deck vercel Figma リポジトリ https://github.com/wheatandcat/OOMAKA
作ったサービス サービス名 : OOMAKA URL: https://oomaka.vercel.app 概要 : 大まかに未来の予定を可視化するサービス
実装の紹介 デモURL ※以下、デモしながら紹介 DB 設計はPrisma でprisma/schema.prisma の通りに定義 Next.js でAPI 実装はAPI
Routes を使用 tRPC + Prisma はsrc/server/api/routers/url.ts のように実装 フロントエンド側の実装は以下の通り 読み込みはsrc/pages/index.tsx のようにして取得 書き込みはsrc/pages/index.tsx のようにして取得 ログインはsrc/pages/index.tsx で、サクッと実装できる
まとめ T3 Stack の開発体験はとても良い 今後の Web 開発のスタンダードになる可能性が高い データ通信の簡単な部分は tRPC と
Prisma で作成して、複雑な部分は gRPC でマイクロサービスに繋い で開発すると、かなり開発効率の高いプロダクトにできそう
ご清聴ありがとうございました 🎉