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
55
作成中のFlutterアプリの中間発表
wheatandcat
0
50
最近読んだ技術書を簡単紹介
wheatandcat
0
71
ユニバーサルリンク/アプリリンクを使ってQRコードでゲストログインできるようにする
wheatandcat
0
160
Firebase App Checkを実装したので紹介
wheatandcat
0
170
PlanetScaleの無料プランがなくなるので、NeonとTiDBを試してみた
wheatandcat
0
320
Flutter HooksとRiverpodの解説
wheatandcat
0
440
T3 Stack(応用編: Next Auth & SSRの実装紹介)
wheatandcat
1
350
App Routerの紹介
wheatandcat
0
110
Other Decks in Technology
See All in Technology
From Natural Language to K8s Operations: The MCP Architecture and Practice of kubectl-ai
appleboy
0
170
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
43k
データ戦略部門 紹介資料
sansan33
PRO
1
3.8k
AI AgentをLangflowでサクッと作って、1日働かせてみた!
yano13
1
150
ストレージエンジニアの仕事と、近年の計算機について / 第58回 情報科学若手の会
pfn
PRO
2
200
Linux カーネルが支えるコンテナの仕組み / LF Japan Community Days 2025 Osaka
tenforward
1
120
会社を支える Pythonという言語戦略 ~なぜPythonを主要言語にしているのか?~
curekoshimizu
3
630
FinOps について (ちょっと) 本気出して考えてみた
skmkzyk
0
210
HonoとJSXを使って管理画面をサクッと型安全に作ろう
diggymo
0
170
コンパウンド組織のCRE #cre_meetup
layerx
PRO
1
240
Databricks AI/BI Genie の「値ディクショナリー」をAmazonの奥地(S3)まで見に行く
kameitomohiro
1
400
デザインとエンジニアリングの架け橋を目指す OPTiMのデザインシステム「nucleus」の軌跡と広げ方
optim
0
100
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
80
6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
990
Become a Pro
speakerdeck
PRO
29
5.6k
Scaling GitHub
holman
463
140k
The Pragmatic Product Professional
lauravandoore
36
7k
Optimizing for Happiness
mojombo
379
70k
The Language of Interfaces
destraynor
162
25k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
880
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
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 でマイクロサービスに繋い で開発すると、かなり開発効率の高いプロダクトにできそう
ご清聴ありがとうございました 🎉