Yusuke Wada - 2024/3/15 Ya8 2024 - ヤパãƒãƒ¼ 令和å…年最新版(ä»®)
Honoã¨htmx
Yusuke Wada - 2024/3/15 Ya8 2024 - ヤパãƒãƒ¼ 令和å…年最新版(ä»®)
Honoã§API付ã雑React SPA最å°
laisoã•ã‚“ãŒæ›¸ã„ã¦ãŸã®ã»ã¼ãªã‚“ã ã‘ã© Honoã¯æ–‡å—列ã§ã‚‚Streamã§ã‚‚ãªã‚“ã§ã‚‚è¿”ã›ã‚‹ã‹ã‚‰ã‚µãƒ¼ãƒãƒ¼ã‚µã‚¤ãƒ‰ã‚‚Reactã§æ›¸ã‘ã‚‹ã—ã€tsconfig.jsonã§é©åˆ‡ã«è¨å®šã™ã‚Œã°JSXãªã‚“ã§ã‚‚ã„ã‘ã‚‹ã—ã€Viteã®dev-serverãŒã‚ã‚‹ã‹ã‚‰ã€ã‚µãƒ¼ãƒãƒ¼ã‚‚クライントもåŒæ™‚ã«é–‹ç™ºã€ãƒ“ルドã§ãã¦ã€ã‚‚ã¡ã‚ã‚“APIを生やã™ã®ãŒå¾—æ„ã§ã€é›‘React SPA環境（API付ãï¼ï¼‰ä½œã‚‹ã®ã«å‘ã„ã¦ã‚‹ã‚ˆã€‚ 作り方解説ã—ã¾ã™ã€‚ã‚ã‚“ã©ã„人ã¯ã“ã“ã«ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆä½œã£ã¦ã‚‹ã‹ã‚‰cloneã€ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ã—ã¦ãã ã•ã„。 ã¾ãšã€create-honoã—ã¦ã€cloudflare-pagesã®ãƒ†ãƒ³ãƒ—レートをé¸ã¶ã€‚bunをパッケージマãƒãƒ¼ã‚¸ãƒ£ãƒ¼ã«ä½¿ã£ã¦ã‚‹ã€‚
htmxã‚’Cloudflare Workers + Honoã§å‹•ã‹ã—ã¦å…¥é–€ã—㟠- Lambdaカクテル
htmxã«ã¤ã„ã¦ã¡ã‚‡ã£ã¨éŠã‚“ã§ãŠããŸã‹ã£ãŸã®ã§éŠã‚“ã 。Cloudflare Workersã®ä¸Šã§Honoã‚’å‹•ã‹ã—ã¦ã€TSXã§HTMLã‚’è¿”ã—ã¤ã¤ã€ãã®ä¸ã«htmxã‚’ã®ã£ã‘ãŸã€ã¿ãŸã„ãªæ§‹æˆã€‚ð‘¹ð’†ð’‚ð’ ð‘¾ð’ð’“ð’ð’… ð‘©ð’–ð’”ð’Šð’ð’†ð’”ð’”...ã§ã‚‚使ãˆã‚‹ã‹ãªï¼Ÿ https://wild-meadow-79c7.windymelt.workers.dev/ ãªã‚“ã‹ä¸€çž¬ã§ã§ããŸã€‚ ã‚„ã£ãŸã“㨠pnpm create cloudflare@latestã—ã¦Hello, Worldプãƒã‚¸ã‚§ã‚¯ãƒˆã‚’作æˆã—ã¦ãã®ã¾ã¾ãƒ‡ãƒ—ãƒã‚¤(ã“ã®æ™‚点㧠https://wild-meadow-79c7.windymelt.workers.dev/ ãŒç”Ÿãˆã‚‹ã€‚ã™ã’〜) ディレクトリãŒã§ãã‚‹ã®ã§ãã“ã«å…¥ã£ã¦pnpm i honoã™ã‚‹ tsconfig.jsonã®compilerOptionsã®jsxã¾ã‚
HonoXã«ã¤ã„ã¦
2月9æ—¥ã€äºˆå‘Šã—ã¦ã„ãŸé€šã‚ŠHono v4をリリースã—ã¾ã—ãŸã€‚ ãã®Hono v4ã®ãƒªãƒªãƒ¼ã‚¹ã¨åŒæ™‚ã«ã€Honoを使ã£ãŸãƒ¡ã‚¿ãƒ•ãƒ¬ãƒ¼ãƒ ワーク「HonoXã€ã‚’公開ã—ã¾ã—ãŸã€‚ 今回ã¯HonoXã®ã„ãã¤ã‹ã®ç‰¹å¾´ã«ã¤ã„ã¦æ›¸ã„ã¦ã¿ãŸã„ã¨æ€ã„ã¾ã™ã€‚ã“ã‚Œã¯ä½¿ã„æ–¹ã¨ã„ã†ã‚ˆã‚Šä½œè€…目線ã®æ€æƒ³ã¿ãŸã„ãªã‚‚ã®ã§ã™ã€‚ メタフレームワーク HonoXã¨ã¯ä¸€è¨€ã§è¨€ã†ã¨ã€ŒHonoã¨Viteを組ã¿åˆã‚ã›ãŸãƒ¡ã‚¿ãƒ•ãƒ¬ãƒ¼ãƒ ワークã€ã§ã™ã€‚HonoX自体ãŒæ©Ÿèƒ½ã‚’æä¾›ã—ãªã„ã®ãŒè‚ã§ã™ã€‚ ã‚‚ã†å°‘ã—ã ã‘具体的ã«è¨€ã„ã¾ã™ã€‚HonoXã§æ‰±ã†ã®ã¯ã€ŒHonoã®ã‚¤ãƒ³ã‚¹ã‚¿ãƒ³ã‚¹ã€ãã®ã‚‚ã®ã§ã™ã€‚ã¤ã¾ã‚Šã‚ãªãŸãŒHonoXã§ã‚¢ãƒ—リを作るã¨ã„ã†ã“ã¨ã¯ã€ŒHonoã®ã‚¢ãƒ—リを作るã€ã“ã¨ã«ãªã‚Šã¾ã™ã€‚ãã®è¨¼æ‹ ã«ã‚¨ãƒ³ãƒˆãƒªãƒ¼ãƒã‚¤ãƒ³ãƒˆã«ãªã‚‹app/server.ts内ã§å‡ºã¦ãã‚‹appã¯Honoã®ã‚¤ãƒ³ã‚¹ã‚¿ãƒ³ã‚¹ãªã®ã§ã€hono/devã«ã‚るヘルパー関数showRoutes()ãŒãã®ã¾ã¾ä½¿
フルスタック Web フレームワーク HonoX を使ã£ã¦ã¿ã‚‹
Warning HonoX 㯠2024 å¹´ 2 月ç¾åœ¨ã‚¢ãƒ«ãƒ•ã‚¡ã‚¹ãƒ†ãƒ¼ã‚¸ã¨ãªã£ã¦ã„ã¾ã™ã€‚セマンティックãƒãƒ¼ã‚¸ãƒ§ãƒ³ã«å¾“ã‚ãšã«ç ´å£Šçš„ãªå¤‰æ›´ãŒè¡Œã‚れるå¯èƒ½æ€§ãŒã‚ã‚Šã¾ã™ã€‚ HonoX 㯠Hono 㨠Vite をベースã«ã—ãŸãƒ•ãƒ«ã‚¹ã‚¿ãƒƒã‚¯ Web フレームワークã§ã™ã€‚以下ã®ã‚ˆã†ãªç‰¹å¾´ãŒã‚ã‚Šã¾ã™ã€‚ ファイルベースã®ãƒ«ãƒ¼ãƒ†ã‚£ãƒ³ã‚° 高速㪠SSR BYOR（Bring Your Own Rerender）：レンダリングエンジンを自由ã«é¸æŠžã§ãã¾ã™ islands ãƒã‚¤ãƒ‰ãƒ¬ãƒ¼ã‚·ãƒ§ãƒ³ ミドルウェア：ãƒãƒƒã‚¯ã‚¨ãƒ³ãƒ‰ã¯ Hono ã¨ã—ã¦å‹•ä½œã™ã‚‹ãŸã‚ã€å¤šãã® Hono ã®ãƒŸãƒ‰ãƒ«ã‚¦ã‚§ã‚¢ を使用ã§ãã¾ã™ HonoX を始ã‚ã‚‹ æ–°ã—ã„ HonoX ã®ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã‚’作æˆã™ã‚‹ãŸã‚ã«ã¯ã€hono-create コマンドを使用ã—ã¾ã™ã€‚
個人ブãƒã‚°ã‚’Next.jsã®SSGã‹ã‚‰Honoã®SSGã«ç§»è¡Œã—ãŸ
「Honoã®v4ãŒ2月9æ—¥ã«ãƒªãƒªãƒ¼ã‚¹ã•ã‚Œã¾ã™ã€ã¨ã„ã†è¨˜äº‹ã«ã¦Hono v4ã§ã¯SSGモードãŒã‚µãƒãƒ¼ãƒˆã•ã‚Œã‚‹ã¨ç™ºè¡¨ãŒã‚ã£ãŸã€‚ã“ã®æ©Ÿèƒ½ã‚’試ã™ç›®çš„ã§ä»Šã¾ã§Next.jsã®SSGモードã§æ§‹ç¯‰ã—ã¦ã„ãŸå€‹äººãƒ–ãƒã‚°ã‚’Honoã®SSG機能ã§æ›¸ãæ›ãˆãŸã€‚ ブãƒã‚° https://yuheinakasaka.github.io/gialog-diary/ リãƒã‚¸ãƒˆãƒª https://github.com/YuheiNakasaka/gialog-diary å…ƒã®å€‹äººãƒ–ãƒã‚°ã§ã¯r7kamuraã•ã‚“ã®r7kamura/gialog: Blog template to use GitHub Issues as article editor.ã¨ã„ã†ãƒ†ãƒ³ãƒ—レを使ã£ã¦ã„る。ã“ã‚Œã¯GitHub Issuesã‚’CMSã¨ã—ã¦ç”¨ã„ã¦è¨˜äº‹ã‚’書ãã€issueã®ä½œæˆãªã©ã®ã‚¤ãƒ™ãƒ³ãƒˆã‚’フックã«ã—ã¦GitHub Actionsã‚’èµ·å‹•ã•ã›ã¦è¨˜
Honoã¨Denoã§ç¤¾å†…ツールを作ã£ã¦ã¿ãŸ - RAKSUL TechBlog
ã“ã‚“ã«ã¡ã¯ï¼ãƒ©ã‚¯ã‚¹ãƒ«ã®ç°åŽŸã§ã™ï¼ 軽é‡ã‹ã¤é«˜é€ŸãªWebフレームワークã§ã‚ã‚‹Honoã¨ã€æ–°é€²æ°—é‹ã®JSランタイムã§ã‚ã‚‹Denoを使ã£ã¦ã€ç¤¾å†…ツールを作ã£ã¦ã¿ã¾ã—ãŸã®ã§ç´¹ä»‹ã—ã¾ã™ã€‚ 作ã£ãŸãƒ„ール 技術スタック index.tsx ã®å†…容 Tips Honoã§Twindを使ㆠHonoã®JSXã§Alpine.jsを使ㆠHono+Denoã§esbuildを使ㆠãŠã‚り㫠作ã£ãŸãƒ„ール テックブãƒã‚°å‘ã‘ã®ã‚¢ã‚¤ã‚ャッãƒç”»åƒã‚¸ã‚§ãƒãƒ¬ãƒ¼ã‚¿ã‚’作りã¾ã—ãŸã€‚ タイトルを入力ã—ã¦ã€ 背景画åƒã¨æ–‡å—色をé¸ã‚“ã§ã€ æ–‡å—ã®ä½ç½®ã¨å¤§ãã•ã‚’調整ã—ã¦ã€ 後ã¯ã€ŒDownloadã€ãƒœã‚¿ãƒ³ã‚’押ã›ã°ç”»åƒãŒæ‰‹ã«å…¥ã‚Šã¾ã™ã€‚ ã“ã‚Œã¯ä»¥å‰ã€å¼Šç¤¾ãƒ‡ã‚¶ã‚¤ãƒ³çµ„ç¹”ã§ä½œã‚‰ã‚ŒãŸã€ŒZoom背景ジェãƒãƒ¬ãƒ¼ã‚¿ã€ã«å¤šåˆ†ã«å½±éŸ¿ã•ã‚Œã¦ã„ã¾ã™ã€‚ ã“ã¡ã‚‰ã®ãƒ‡ã‚¶ã‚¤ãƒŠãƒ¼ãƒ–ãƒã‚°ã‚‚是éžã”覧ãã ã•ã„ï¼ note.com 技術スタック ã“ã®ãƒ„ールã¯åˆ©ç”¨é »åº¦ãŒãã“ã¾ã§å¤šããªã„ã¨æ€
Hono + htmx + Cloudflareã¯æ–°ã—ã„スタック
ã“ã®è¨˜äº‹ã¯ä»¥å‰7月ã«è‡ªåˆ†ã§æ›¸ã„ãŸã€ŒHono + htmx + Cloudflare is a new stackã€ã¨ã„ã†è¨˜äº‹ã‚’一部修æ£ã—ã€è¨³ã—ãŸã‚‚ã®ã§ã™ã€‚ Hono + htmx + Cloudflareã¯æ–°ã—ã„スタック 以å‰ã€ãƒãƒƒã‚¯ã‚¨ãƒ³ãƒ‰ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã ã£ãŸèº«ã‹ã‚‰ã™ã‚Œã°ã€Reactã¯è¤‡é›‘ã ã¨æ„Ÿã˜ã‚‹ã“ã¨ãŒã‚ã‚Šã¾ã™ã€‚ã•ã‚‰ã«ï¼ˆç§ã¯ãƒ•ãƒ¬ãƒ¼ãƒ ワーク開発者ãªã®ã§ã™ãŒï¼‰ãƒ•ãƒ¬ãƒ¼ãƒ ワーク開発者ã«ã¨ã£ã¦ã¯ãƒã‚¤ãƒ‰ãƒ¬ãƒ¼ã‚·ãƒ§ãƒ³ã®ä»•çµ„ã¿ã‚’作るã“ã¨ã¯åŽ„介ã§ã™ã€‚ã—ã‹ã—ã€ã—ã°ã—ã°Reactを使ã†ã“ã¨ã«ãªã‚Šã¾ã™ã€‚ Reactã®å„ªä½ãªç‚¹ã®ä¸€ã¤ã¯ã€ŒJSXã€ã§ã™ã€‚最åˆè¦‹ãŸæ™‚ã€JSXã¯å¥‡å¦™ã«æ€ãˆã¾ã—ãŸã€‚「ãªã‚“ã§JavaScriptã®ä¸ã«HTMLã®ã‚¿ã‚°ãŒå…¥ã£ã¦ã„ã‚‹ã‚“ã ï¼ã€ã€‚ã—ã‹ã—ã€ä¸€åº¦æ…£ã‚Œã‚‹ã¨ã€JSXã¯æŸ”軟ã§ã€æ›¸ãã‚„ã™ã„ã“ã¨ã«æ°—ã¥ãã¾ã—ãŸã€‚ 今日ã¯ã“ã‚Œã‹ã‚‰ã€JSXをサーãƒãƒ¼ã‚µã‚¤ãƒ‰ã®ãƒ†ãƒ³ãƒ—レートã¨ã—ã¦ä½¿ã†æŠ€è¡“スタックを紹介ã—ã¾ã™ã€‚ã“ã‚Œã¯ã¤
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}