tRPC + Next.js13 でWEBアプリを作った

Slide 1

Slide 1 text

tRPC + Next.js13 で WEBアプリを作った Raccoon Tech Connect #2 パフォーマンス改善LT うーたん

Slide 2

Slide 2 text

自己紹介 ● うーたん ● 新卒サーバーサイドエンジニア ○ 株式会社ゆめみ ● 趣味 ○ アニメを見ること ● X ○ @uutan1108

Slide 3

Slide 3 text

目次 - Next.js とは - tRPC とは - 作ったもの - 構成図 - 終わりに

Slide 4

Slide 4 text

Next.js とは

Slide 5

Slide 5 text

Next.js とは WebのためのReactフレームワーク世界最大級の企業で使用されているNext.jsは、最新の React機能を拡張し、強力なRustベースのJavaScriptツールを統合して最速のビルドを実現することで、フルスタックのWebアプリケーションを作成できます。 https://nextjs.org/

Slide 6

Slide 6 text

tRPC とは

Slide 7

Slide 7 text

tRPC とは速く動き、何も壊さない。エンドツーエンドのタイプセーフAPIが簡単に。フルスタックアプリケーションの生産性を向上させる TypeScript推論のフルパワーを体験してください。フルスタックアプリケーションの生産性を高めましょう。 https://trpc.io/

Slide 8

Slide 8 text

Next.js と tRPC で作れば早く開発できそう「パフォーマンス改善」ということにします。

Slide 9

Slide 9 text

作ったもの OHMORIYUSUKE/animes-library

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

DBに保存されているアニメを表示

Slide 12

Slide 12 text

文字を入力すると表示が変化

Slide 13

Slide 13 text

構成図

Slide 14

Slide 14 text

構成図 - Next.js で完結 - Next.js からデータベースを操作

Slide 15

Slide 15 text

API Routes の実装

Slide 16

Slide 16 text

SQL エンドポイント名 getAnimeNameList エンドポイントにアニメの名前を渡す → DBから一致するアニメの名前配列を返すエンドポイントの引数

Slide 17

Slide 17 text

client の実装

Slide 18

Slide 18 text

- バックエンドの処理を関数を呼び出すように書ける - FE と BE で同じ型を利用入力があるとレコメンドが変化 AutoComplete コンポーネント

Slide 19

Slide 19 text

終わりに

Slide 20

Slide 20 text

感想 - 慣れない書き方だったが、慣れたら簡単に書くことができた - Next.js13 の勉強になった - 検索窓に入力するたびにSQLが実行さて遅いので、入力するたびにストレス「パフォーマンス改善」の余地しかない。