Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
検証も兼ねて個人開発でHonoとかと向き合った話
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
hanetsuki
April 23, 2024
Programming
2.2k
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
検証も兼ねて個人開発でHonoとかと向き合った話
2024.4.23
TechBrew in 東京〜業務外で取り組む 個人開発での学び〜
https://findy.connpass.com/event/313271/
hanetsuki
April 23, 2024
More Decks by hanetsuki
See All by hanetsuki
AIを用いて実践してきた開発方法について
hanetsuki
1
110
ソフトウェア開発ナニモワカラナイ
hanetsuki
0
240
Next.jsの今年一年を振り返る
hanetsuki
1
1.5k
大規模メディアにおけるNext.js とVercelのレンダリングとキャッ シュ戦略について
hanetsuki
4
3.5k
Next.jsチョットデキル!サイトの規模やページ特性に合わせた開発テクニック
hanetsuki
3
2.5k
Jamstackで事前に欲しいパーツ群を洗い出す
hanetsuki
1
470
2022年最新版 GatsbyJS + TypeScript + microCMS でブログを作る。
hanetsuki
1
13k
Next.jsで静的サイトを作成時 よく使っているライブラリまとめ
hanetsuki
5
18k
Next.jsで整える。デザインとロジックの分離
hanetsuki
5
4.7k
Other Decks in Programming
See All in Programming
Apple Intelligenceとオンデバイス時代の到来
yahir0
0
230
AmebaブログはKMPから卒業します
kmars0605
0
340
クラウドゲーミングのパフォーマンス最適化に挑む / Cloud Gaming Performance Tuning
vivion
0
330
そのデザイントークン、Flutterでも同じ見た目になりますか?
nakamizu
0
320
느린 네트워크와 저사양 디바이스 사용자를 위한 웹뷰 로딩 시간 개선기
kmkim
1
220
クラウドエージェントは、 何がそんなに便利なのか / what makes cloud agents so useful
rkaga
5
810
Python Lambdaにおけるテストしやすい設計とAI支援の活用 / Designing Testable Python Lambda Functions with AI
kitano_yuichi
1
310
SFCで実現する病院・医療システムの動的組み立て式UI
koukimiura
1
170
graphql-ruby を Spinel で速くしようとした話
mtsmfm
0
140
オーケストレーション記述言語 Katari
yukikurage
0
240
AI時代のIaC入門 〜なぜインフラをコードで管理したいのか?〜 / Introduction to IaC in the AI Era
akihisaikeda
6
1.4k
Vapor Mode でアクセシビリティは 壊れないか検証した話
fuqda
1
330
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
96
6.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
287
14k
Ethics towards AI in product and experience design
skipperchong
2
460
A Modern Web Designer's Workflow
chriscoyier
699
190k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
2.5k
Leo the Paperboy
mayatellez
10
2.4k
Applied NLP in the Age of Generative AI
inesmontani
PRO
4
2.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
45
9.3k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
12k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
70
68k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
1.1k
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
1
660
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
ご清聴ありがとうございました