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
100
1人150秒、2人で5分 LT
ohmori_yusuke
2
72
Tidy First?個人で実践する経験主義的ソフトウェア設計を読んでみた感想
ohmori_yusuke
2
51
今年始めた 「アニメから得た学びを発表会」
ohmori_yusuke
2
1.9k
行き当たりばったりの二年
ohmori_yusuke
1
350
技書博に参加したら執筆できた
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
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
7
740
Honoとフロントエンドの 型安全性について
yodaka
7
1.3k
仕様変更に耐えるための"今の"DRY原則を考える / Rethinking the "Don't repeat yourself" for resilience to specification changes
mkmk884
4
710
チームリードになって変わったこと
isaka1022
0
200
ML.NETで始める機械学習
ymd65536
0
120
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
140
Rails アプリ地図考 Flush Cut
makicamel
1
120
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
2
490
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
570
Domain-Driven Transformation
hschwentner
2
1.9k
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
140
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
920
Featured
See All Featured
Practical Orchestrator
shlominoach
186
10k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
330
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Building Applications with DynamoDB
mza
93
6.2k
Thoughts on Productivity
jonyablonski
69
4.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
A designer walks into a library…
pauljervisheath
205
24k
Speed Design
sergeychernyshev
27
790
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
ご清聴ありがとうございました🙇