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
tRPC + Next.js13 でWEBアプリを作った
Search
uutan1108
December 11, 2023
Programming
0
330
tRPC + Next.js13 でWEBアプリを作った
Raccoon Tech Connect #2 パフォーマンス改善LT
https://raccoon-holdings.connpass.com/event/301692/
uutan1108
December 11, 2023
Tweet
Share
More Decks by uutan1108
See All by uutan1108
OpenAPI を守るのは難しい
ohmori_yusuke
2
920
コミュニティに参加したことで起きた変化
ohmori_yusuke
3
150
Laravel を学ぶ前に書いていた require と Laravel 使い始めてから躓いた use 宣言と namespace
ohmori_yusuke
1
290
未来を拓く若手エンジニアの興味関心と目指すキャリア
ohmori_yusuke
1
260
PHPカンファレンス関西2024でLTとスタッフした
ohmori_yusuke
2
460
技書博に参加したら執筆できた
ohmori_yusuke
1
420
PHPを勉強してからプログラミングが好きになった話
ohmori_yusuke
1
620
「石蒜模拟器」にコントリビュートしてみた
ohmori_yusuke
1
440
新卒研修で取り組んだスクラム開発で苦戦したところと学んだこと
ohmori_yusuke
4
1.9k
Other Decks in Programming
See All in Programming
SIMD Parallel Programming with the Vector API
josepaumard
0
240
JavaScript Closure
asoluka
0
560
Deep Dive into React Stream/Serialize
mugi_uno
3
740
Direct Style Effect Systems The Print[A] ExampleA Comprehension Aid
philipschwarz
PRO
0
190
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
120
GitHub Copilotのススメ
marcy731
1
240
Webアプリをできるだけコードを手書きしないで作ってみる
tomokusaba
2
190
Snowflakeで眠ったデータを起こそう!
estie
0
160
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
10
1.6k
Let's learn code review
riofujimon
2
610
Goのエラースタックトレースの歴史と今後
sonatard
10
1.9k
敵対的ポイフル
futabato
0
140
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
238
11k
Why Our Code Smells
bkeepers
PRO
331
56k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
20k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.3k
GraphQLとの向き合い方2022年版
quramy
33
12k
We Have a Design System, Now What?
morganepeng
43
6.8k
Automating Front-end Workflow
addyosmani
1357
200k
Designing with Data
zakiwarfel
96
4.8k
It's Worth the Effort
3n
180
27k
Web development in the modern age
philhawksworth
203
10k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
Transcript
tRPC + Next.js13 で WEBアプリを作った Raccoon Tech Connect #2 パフォーマンス改善LT
うーたん
自己紹介 • うーたん • 新卒サーバーサイドエンジニア ◦ 株式会社ゆめみ • 趣味 ◦
アニメを見ること • X ◦ @uutan1108
目次 - Next.js とは - tRPC とは - 作ったもの -
構成図 - 終わりに
Next.js とは
Next.js とは WebのためのReactフレームワーク 世界最大級の企業で使用されているNext.jsは、最新の React機能を拡張し、強力なRustベースのJavaScriptツー ルを統合して最速のビルドを実現することで、フルスタッ クのWebアプリケーションを作成できます。 https://nextjs.org/
tRPC とは
tRPC とは 速く動き、何も壊さない。エンドツーエンドのタイプセー フAPIが簡単に。 フルスタックアプリケーションの生産性を向上させる TypeScript推論のフルパワーを体験してください。フルス タックアプリケーションの生産性を高めましょう。 https://trpc.io/
Next.js と tRPC で作れば早く開発できそう 「パフォーマンス改善」 ということにします。
作ったもの OHMORIYUSUKE/animes-library
None
DBに保存されて いるアニメを表示
文字を入力する と表示が変化
構成図
構成図 - Next.js で完結 - Next.js からデータベースを操作
API Routes の実装
SQL エンドポイント名 getAnimeNameList エンドポイントにアニメの名前を渡す → DBから一致するアニメの名前配列を返す エンドポイントの引数
client の実装
- バックエンドの 処理を関数を呼 び出すように書 ける - FE と BE で同じ
型を利用 入力があると レコメンドが変化 AutoComplete コンポーネント
終わりに
感想 - 慣れない書き方だったが、慣れたら簡単に書くことが できた - Next.js13 の勉強になった - 検索窓に入力するたびにSQLが実行さて遅いので、入 力するたびにストレス
「パフォーマンス改善」 の余地しかない。
告知
None
ご清聴ありがとうございました🙇