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

ご清聴ありがとうございました!