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
390
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
企業主催勉強会をきっかけに職能間の境界を越える ロングver
ohmori_yusuke
1
230
企業主催勉強会をきっかけに職能間の境界を越える
ohmori_yusuke
1
100
OpenAPIに静的解析とフォーマッターを導入する
ohmori_yusuke
3
260
Next.jsのClient-side RenderingでPHPを動かす
ohmori_yusuke
1
210
プログラミング&実行できるWEBアプリを手作り
ohmori_yusuke
3
460
社外向け勉強会とプライベートの勉強会を開催してみて
ohmori_yusuke
2
310
勉強会に楽しさワクワクは重要
ohmori_yusuke
2
420
OpenAPI を守るのは難しい
ohmori_yusuke
2
1.2k
コミュニティに参加したことで起きた変化
ohmori_yusuke
3
180
Other Decks in Programming
See All in Programming
Rubyのパフォーマンスプロファイリングの改善 / Enhancing performance profiling for Ruby
osyoyu
1
410
今こそ始める、CDKコンストラクトライブラリ開発 ― 入門から実践まで
tmokmss
1
930
Trial
cairolibrary720
1
130
OpenAI/Gemini APIを使って EPUBを翻訳するCLIツールをつくってみた
tomiyan
0
790
Async Await: Mastering Python's Time-Bending Tricks - EuroPython2024
yanbo
1
290
Product Management LT会_クアンド新家
shinshin
0
210
20240706_CDKConf
takuyay0ne
0
1.2k
ピグパーティにおけるMongoDB CommunityバージョンからAtlasへの移行事例
10969hotaka
0
130
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
Android開発者のための Kotlin Multiplatform入門
ntaro
0
190
Terraformテスト入門
msato
0
520
Introduction of Happy Eyeballs Version 2 (RFC8305) to the Socket library
coe401_
1
220
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
127
8.7k
Thoughts on Productivity
jonyablonski
64
4.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
Making Projects Easy
brettharned
111
5.7k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
Web development in the modern age
philhawksworth
203
10k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Teambox: Starting and Learning
jrom
130
8.6k
Side Projects
sachag
451
42k
Into the Great Unknown - MozCon
thekraken
20
1.3k
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
ご清聴ありがとうございました🙇