HonoとJSXを使って 管理画面をサクッと型安全に作ろう

"フロントエンドカンファレンス関西 × TSKaigiコラボイベント" で発表した資料です。

https://fec-kansai.connpass.com/event/368837/

## 資料内のURL

- マッハチームの紹介ページ: https://dev.classmethod.jp/articles/retaila-app-mach-serverside-engineer/
- 弊ブログ: https://dev.classmethod.jp/articles/hono-jsx-admin-panel/
- 弊リポジトリ: https://github.com/diggymo/hono-admin-panel
- JSX - Hono（公式ドキュメント）: https://hono.dev/docs/guides/jsx

Transcript

1. HonoとJSXを使って 管理画⾯をサクッと型安全に作ろう クラスメソッド株式会社 マッハチーム morimorikochan
2. 名前 morimorikochan 所属 クラスメソッド    マッハチーム🚀 趣味 マリカワールド    （レート9100） X @marooon88 ⾃⼰紹介
3. 管理画⾯にSPA（CSR）、本当に必要ですか？ • SPAは便利ですが開発コストが⾼くなりがち ◦ APIのインタフェース/スキーマの共有 ◦ エラーハンドリングなど • 顧客に本当に価値を提供できているのか？ ◦ （管理画⾯に求められる要件次第だが） ◦ オーバースペックではないか？ 🙄課題
4. じゃあ、SPAやめてSSRにする？ • テンプレートエンジン機能がツライ... ◦ 独⾃記法, 未定義変数の利⽤, 型の取り違い, タイポなどなど... • じゃあどうすりゃいいのさ... 🙄課題
5. ✍JSX そんなときに使えるのがJSX • JSX: Reactに使われてるあの構⽂ • TypeScriptを使ったJSXを使うと ◦ TypeScriptの構⽂でHTMLを記述でき、従来のテンプレートエンジン のツラミを解消 ▪ （独⾃記法, 未定義変数の利⽤, 型の取り違い, タイポ） • JSXはExpressやHonoと組み合わせて使える • 今回はセットアップの⼿軽さからHonoを紹介 const element = <h1>Hello, world!</h1>;
6. 🔥HonoでJSXを使う⽅法 1. tsconfig.jsonを修正 { "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "hono/jsx" } } 2.ファイル拡張⼦を.tsから.tsxに 3. c.html()でJSXを返却 app.get('/', (c) => { const messages = ['Good Morning', 'Good Evening', 'Good Night'] return c.html(<Top messages={messages} />) }) 参考: https://hono.dev/docs/guides/jsx
7. 🎉JSX内でもしっかり補完が効く
8. 💪HonoでJSXを使うときのコツ CSSスタイリングにはtailwindを使う • ブラウザ⽤のcssフレームワークをサーバーで使うには⼀苦労... • tailwind だとcdnを読み込むだけで使える JSXのコードは⽣成AIをフル活⽤ • バックエンドエンジニアがHTMLを記述するのは⼤変 • ⽣成AIに叩き台を書かせて⼈間が微調整
9. 🤖Claude Codeがポン出したUI
10. 複数画⾯またいだ状態管理 • SPAだと状態管理できるがSSRではできない • <input type="hidden"/> を使った状態管理が 今の所⼀番スマート 静的アセットの配信 • serveStaticミドルウェアが必要 詳しくは弊ブログで解説してます https://dev.classmethod.jp/articles/hono-jsx-admin-panel/ 🚨HonoでJSXを使うときの注意点
11. 📚まとめ • 管理画⾯にSPA（CSR）構成は本当に必要なのか考えよう • Hono+JSXを使ったSSR構成は ◦ 従来のSSRのテンプレートエンジンのツラミが解消されてる ◦ セットアップが簡単 ◦ ⼗分実⽤的 ◦ ただし注意点もある • Hono+JSXで管理画⾯をサクッと型安全に作れることがわかった 参考資料 • 弊ブログ https://dev.classmethod.jp/articles/hono-jsx-admin-panel/ • 弊リポジトリ https://github.com/diggymo/hono-admin-panel • JSX - Hono（公式ドキュメント） https://hono.dev/docs/guides/jsx
12. プロダクトの0→1⽴ち上げ 専⾨チーム ⼀緒に働く仲間を募集...! モダンな技術スタックを積極採用 • Hono, V0, Claude Code… 顧客と0距離 • プリセールス ~MVPリリースまで • 顧客対応も 2~3名の小規模チームで高速開発 • 1案件 2~6ヶ月 • マッハで経験が積める 📢マッハチーム 絶賛募集中
13. ありがとうございました 🫠おわり