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