T3 Stackで個人開発したら2日で実装できました！

T3 Stackで個人開発をした紹介です！
個人開発アプリ：https://tech-stock-app-six.vercel.app/
Zenn：https://zenn.dev/kiwichan101kg

WebフロントエンドなんでもLT会 #9 LT初心者歓迎!
https://ncdc-dev.connpass.com/event/332456/

Transcript

1. T3 Stackで個人開発したら 2日で実装できました！
2. 1. 個人開発アプリの紹介 2. create-t3-appとは 3. Next.js × tRPCでのAPI実行 4. アプリで工夫したところ 5. まとめ アジェンダ
3. 初めて個人開発アプリをリリースしました！ 🎉
4. 1.個人開発アプリの紹介
5. 1. 個人開発アプリの紹介 「技術記事を効率よく管理！読みたい記事をストックして 　進行状況を整理し、学びの記録を残せるアプリ」 Tech📚Stock
6. 背景 • あとで読みたい記事を貯めておきたい！ • ちょっとしたメモを残して見返したい！ 💡 • 面白そうな記事！あとで読もう！ → 結局読まない 🤔 1. 個人開発アプリの紹介
7. • 記事を保存 • ステータス管理 • メモを追加 1. 個人開発アプリの紹介
8. • 記事を保存 • ステータス管理 • メモを追加 1. 個人開発アプリの紹介
9. • 記事を保存 • ステータス管理 • メモを追加 1. 個人開発アプリの紹介
10. • 記事を保存 • ステータス管理 • メモを追加 1. 個人開発アプリの紹介
11. 公式ドキュメント ブログなど... URLを保存 💭 1. 個人開発アプリの紹介
12. Next.js tRPC NextAuth.js Tailwind CSS Prisma Typescript • TypeScript がベース • フロントエンド - バックエンド一貫して型安全 1. 個人開発アプリの紹介 T3 Stack の特徴
13. Next.js tRPC NextAuth.js Tailwind CSS Prisma Typescript • TypeScriptでフルスタックに開発した人 • スピード重視の小規模プロジェクト 向いてるケース ◎ 1. 個人開発アプリの紹介
14. Next.js tRPC NextAuth.js Tailwind CSS Prisma Typescript • フロントエンド - バックエンド完全分離の大規模プロジェクト 向かないケース △ 1. 個人開発アプリの紹介
15. Next.js tRPC NextAuth.js Tailwind CSS Prisma Typescript 1. 個人開発アプリの紹介 フロントエンドエンジニアの個人開発におすすめ！ create-t3-app を使用してたったの 2 日で実装 🔥
16. 2. create-t3-appとは
17. T3 Stack が導入された雛形を提供する CLI 🪄 2. create-t3-appとは
18. API 認証 2 3 1 セットアップ完了 🎉 • スキーマ定義 • 接続実装 • 操作実装 • バックエンド用意 • API実装 • API呼び出し実装 • DB連携 • 認証ロジック実装 DB 本来個別に導入する必要がある $ npm create t3-app@latest • コマンド1つでDB構築 • サンプルAPI付き • 簡単な設定のみで外部認証 2. create-t3-appとは
19. DBの場合 Prismaによるスキーマ定義 • スキーマ定義 • サンプルモデル • DB接続設定 • Prismaクライアント • マイグレーションツール 用意されているもの 2. create-t3-appとは
20. DB構築完了🎉 DBの場合 $ npm run db:push $ npm run db:studio DB構築 Prisma studioで確認 Prismaによるスキーマ定義 2. create-t3-appとは
21. 認証の場合 • NextAuth.jsの設定ファイル • ハンドラーの設定 • スキーマ定義に認証情報のモデル • サインイン /サインアウトの UI NextAuthの設定ファイル 認証情報のモデル 用意されているもの 2. create-t3-appとは
22. 認証の場合 外部プロバイダーの設定 OAuthによる外部認証 NextAuthの設定ファイル 認証情報のモデル 2. create-t3-appとは
23. • DB構築 • API • 認証 アプリ本来のビジネスロジックに専念 🔥 開発効率を大幅に向上 ⏫ 最低限まで省略 2. create-t3-appとは
24. 3. Next.js × tRPCでのAPI実行
25. 3. Next.js × tRPCでのAPI実行 App Router • Server Components 呼び出し • Client Components 呼び出し
26. API定義 • postRouter ◦ hello プロシージャ（ ≒ APIエンドポイント） ◦ create ◦ getLatest ◦ getSecretMessage 3. Next.js × tRPCでのAPI実行
27. API定義 • zodで型安全に （スキーマ定義バリデーションライブラリ） I ：{ "text": "文字列" } O：{ "greeting": "Hello 文字列" } hello プロシージャ 3. Next.js × tRPCでのAPI実行
28. API呼び出し設定 割愛 🙏 3. Next.js × tRPCでのAPI実行
29. Server Components呼び出し • 直接APIを呼び出せる 取得したデータを表示 3. Next.js × tRPCでのAPI実行
30. Client Components呼び出し • Tanstack Query （データ取得キャッシュ管理ライブラリ） ◦ useQuery（データ取得） ◦ useMutation（データ更新系） mutate（データ作成） 3. Next.js × tRPCでのAPI実行
31. Client Components呼び出し • Tanstack Query ◦ データフェッチの状態管理 ▪ Pending状態 ▪ エラー状態 ▪ 成功状態 ex) Pending状態を検知 データフェッチの状態管理 3. Next.js × tRPCでのAPI実行
32. フロントエンド - バックエンドの型共有 • 型安全性◎ 間違った値による型エラーの検知 3. Next.js × tRPCでのAPI実行
33. フロントエンド - バックエンドの型共有 • 開発体験◎ 自動補 完 API定義元にコードジャンプ 3. Next.js × tRPCでのAPI実行
34. 4. アプリで工夫したところ
35. 4. アプリで工夫したところ 公式ドキュメント ブログなど... OGP
36. OGPがない！😠 4. アプリで工夫したところ 公式ドキュメント ブログなど... OGP
37. OEmbed URLから外部コンテンツを Webページに埋め込める 4. アプリで工夫したところ 公式ドキュメント ブログなど... OGP
38. 公式ドキュメント ブログなど... Twitter OEmbed API YouTube OEmbed API OGP 4. アプリで工夫したところ
39. 5. まとめ
40. 5. まとめ • T3 Stack は TypeScript をベースとしているため フロントエンド - バックエンド一貫した型安全な開発ができる • create-t3-app を使うと高速にセットアップできる
41. 参照 • Zenn ◦ 【T3 Stack】フロントエンド・バックエンド Typescript開発入門 ◦ 【Next.js × tRPC】tRPCを用いたRSCでのデータフェッチ ◦ 【Next.js】NextAuth.js、tRPC、Prismaを用いた認証システムの構築 • 個人開発アプリ ◦ Tech📚Stock • create-t3-app ドキュメント ◦ create-t3-app 5. まとめ
42. 会期：2024/11/03 (日) 11:00～17:00 会場：池袋・サンシャインシティ 展示ホール D（文化会 館ビル2F） 参加：入場無料 オンラインでも販売します！ Next.js AppRouter を完全攻略 ! T3 Stack でレベルアップするフルスタック開発 244ページ！ 技術書典17 表紙 mii作（可愛い！） 5. まとめ
43. ご清聴ありがとうございました！