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
検証も兼ねて個人開発でHonoとかと向き合った話
Search
hanetsuki
April 23, 2024
Programming
1
1.8k
検証も兼ねて個人開発でHonoとかと向き合った話
2024.4.23
TechBrew in 東京〜業務外で取り組む 個人開発での学び〜
https://findy.connpass.com/event/313271/
hanetsuki
April 23, 2024
Tweet
Share
More Decks by hanetsuki
See All by hanetsuki
Next.jsの今年一年を振り返る
hanetsuki
1
1.4k
大規模メディアにおけるNext.js とVercelのレンダリングとキャッ シュ戦略について
hanetsuki
4
2.9k
Next.jsチョットデキル!サイトの規模やページ特性に合わせた開発テクニック
hanetsuki
4
2.2k
Jamstackで事前に欲しいパーツ群を洗い出す
hanetsuki
1
350
2022年最新版 GatsbyJS + TypeScript + microCMS でブログを作る。
hanetsuki
1
12k
Next.jsで静的サイトを作成時 よく使っているライブラリまとめ
hanetsuki
5
17k
Next.jsで整える。デザインとロジックの分離
hanetsuki
5
4.3k
Other Decks in Programming
See All in Programming
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
110
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
220
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
480
Amazon Qを使ってIaCを触ろう!
maruto
0
400
Jakarta EE meets AI
ivargrimstad
0
600
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
4
640
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
330
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
470
Click-free releases & the making of a CLI app
oheyadam
2
110
Hotwire or React? ~アフタートーク・本編に含めなかった話~ / Hotwire or React? after talk
harunatsujita
1
120
Amazon Bedrock Agentsを用いてアプリ開発してみた!
har1101
0
330
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
180
21k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Navigating Team Friction
lara
183
14k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
The World Runs on Bad Software
bkeepers
PRO
65
11k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Adopting Sorbet at Scale
ufuk
73
9.1k
Statistics for Hackers
jakevdp
796
220k
Practical Orchestrator
shlominoach
186
10k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Transcript
TechBrewin 東京〜業務外で取り組む 個人開発での学び〜 検証も兼ねて個人開発で とかと向き合った話 Hono hanetsuki
自己紹介 hanetsuki @hantsuki_dev #TypeScript #Next.js #AB型 #子育て #日本酒 #アニメ #イラスト #漫画 #ゲーム #VTuber #Hono フロントエンド領域を主戦場とし、 浅く広くやっているモノづくり好きなWEBエンジニア。
最近のプライベートタイムは絵描き活動をしている。
個人開発やってますか?
私はどうして個人開発をしているのか 学習 開発意欲 課題解決
仕事でモダンな技術を取り入れたい I 今後新規プロダクトが立ち上がる時にProd起用できるようC I Prod起用することになった時に触れるように
今回は何を触る? 5 Remi& 5 Hon 5 Next.j# 5 Cloudflare 気になるスタックは色々あるけど...今回は、
今回は何を触る? on
with RPC
今回の技術モチベーション f Next.jsのRoute Handlersをいちいち定義したくなa f Remix on Hono on Cloudfrareとかも興味あったが..S
f Hono使ってみたa f Hono使ってみたa f Hono使ってみたa f Hono使ってみたい
Step. 1 本家公式ドキュメントを読み漁る
Step. 1 本家公式ドキュメントを読み漁る Hono - Ultrafast web framework for the
Edges https://hono.dev/
Step. 2 yusukebeさんのZennを読み漁る
Step. 2 yusukebeさんのZennを読み漁る Hono - Ultrafast web framework for the
Edges yusukebeさんの記事一覧 | Zenn https://hono.dev/ https://zenn.dev/yusukebe
Step. 3 気 完全に理解した になる
多分登壇の時間が押しているので 簡単に実装面の紹介
今回はa U Next.jsのApp Routerをベースとして Route HandlersにHonoを乗せていきまR U 最低限必要になってくるserver.tsとroute.ts のサンプルコードを紹介します。
/server.ts
/server.ts
/server.ts
/server.ts
/server.ts
/app/api/[...route]/route.ts
もう一歩深い使い方を試す Grouping routes for RPC
Grouping routes for RPC https://hono.dev/snippets/grouping-routes-rpc
c Hono on Next.js 結構おすすQ c 個人開発をしておくと、会社で新しいプロジェクトを立ち上げる時や 立ち上がった時に手をあげやすくな" c 注目の技術をキャッチアップしておくと社内で一目置かれる存在に?
Special Thank You 言語ロゴ:さわらつき さん(https://x.com/sawaratsuki1004) まとめ
「今年はフロントエンド20名を募集中!」 採用情報 フルリモート フルフレックス Vercel Sandbox使い放題 https://chot-inc.com/recruit
ご清聴ありがとうございました