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
560
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
「何か」を求めて参加したカンファレンスから持ち帰ってきた「熱」を維持して、活用するために
ohmori_yusuke
2
290
1人150秒、2人で5分 LT
ohmori_yusuke
2
73
Tidy First?個人で実践する経験主義的ソフトウェア設計を読んでみた感想
ohmori_yusuke
2
54
今年始めた 「アニメから得た学びを発表会」
ohmori_yusuke
2
1.9k
行き当たりばったりの二年
ohmori_yusuke
1
360
技書博に参加したら執筆できた
ohmori_yusuke
1
1.8k
開発終了後こそ成長のチャンス!プロダクト運用を見送った先のアクションプラン
ohmori_yusuke
2
300
学生の時に開催したPerl入学式をきっかけにエンジニアが組織に馴染むために勉強会を主催や仲間と参加して職能間の境界を越えていく
ohmori_yusuke
2
660
やりっぱなしで終わらない勉強法
ohmori_yusuke
3
520
Other Decks in Programming
See All in Programming
Writing documentation can be fun with plugin system
okuramasafumi
0
120
sappoRo.R #12 初心者セッション
kosugitti
0
260
GoとPHPのインターフェイスの違い
shimabox
2
200
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.8k
Open source software: how to live long and go far
gaelvaroquaux
0
650
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
940
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
150
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
180
ML.NETで始める機械学習
ymd65536
0
210
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
React 19アップデートのために必要なこと
uhyo
5
730
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
180
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
Building Applications with DynamoDB
mza
93
6.2k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
Navigating Team Friction
lara
183
15k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Embracing the Ebb and Flow
colly
84
4.6k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Automating Front-end Workflow
addyosmani
1368
200k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
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
ご清聴ありがとうございました🙇