仕事でモダンな技術を取り入れたい
I 今後新規プロダクトが立ち上がる時にProd起用できるようC
I Prod起用することになった時に触れるように
Slide 6
Slide 6 text
今回は何を触る？
5 Remi&
5 Hon
5 Next.j#
5 Cloudflare
気になるスタックは色々あるけど...今回は、
Slide 7
Slide 7 text
今回は何を触る？
on
Slide 8
Slide 8 text
with RPC
Slide 9
Slide 9 text
今回の技術モチベーション
f Next.jsのRoute Handlersをいちいち定義したくなa
f Remix on Hono on Cloudfrareとかも興味あったが..S
f Hono使ってみたa
f Hono使ってみたa
f Hono使ってみたa
f Hono使ってみたい
Slide 10
Slide 10 text
Step. 1
本家公式ドキュメントを読み漁る
Slide 11
Slide 11 text
Step. 1 本家公式ドキュメントを読み漁る
Hono - Ultrafast web framework for the Edges
https://hono.dev/
Slide 12
Slide 12 text
Step. 2
yusukebeさんのZennを読み漁る
Slide 13
Slide 13 text
Step. 2 yusukebeさんのZennを読み漁る
Hono - Ultrafast web framework for the Edges
yusukebeさんの記事一覧 | Zenn
https://hono.dev/
https://zenn.dev/yusukebe
Slide 14
Slide 14 text
Step. 3
気
完全に理解した になる
Slide 15
Slide 15 text
多分登壇の時間が押しているので
簡単に実装面の紹介
Slide 16
Slide 16 text
今回はa
U Next.jsのApp Routerをベースとして
Route HandlersにHonoを乗せていきまR
U 最低限必要になってくるserver.tsとroute.ts
のサンプルコードを紹介します。
Slide 17
Slide 17 text
/server.ts
Slide 18
Slide 18 text
/server.ts
Slide 19
Slide 19 text
/server.ts
Slide 20
Slide 20 text
/server.ts
Slide 21
Slide 21 text
/server.ts
Slide 22
Slide 22 text
/app/api/[...route]/route.ts
Slide 23
Slide 23 text
もう一歩深い使い方を試す
Grouping routes for RPC
Slide 24
Slide 24 text
Grouping routes for RPC
https://hono.dev/snippets/grouping-routes-rpc
Slide 25
Slide 25 text
c Hono on Next.js 結構おすすQ
c 個人開発をしておくと、会社で新しいプロジェクトを立ち上げる時や
立ち上がった時に手をあげやすくな"
c 注目の技術をキャッチアップしておくと社内で一目置かれる存在に？
Special Thank You
言語ロゴ：さわらつき さん（https://x.com/sawaratsuki1004）
まとめ