HonoXで動かすアプリケーションのリアル

自社イベントにて使ったHonoXの資料

Transcript

1. 1
 本資料は、トグルホールディングス株式会社に許可なく複製・転載をしないようお願いします。 フロントエンド最前線！ 
 HonoXで動かす 
 アプリケーション 
 のリアル

2. 2
 © toggle holdings inc. 鈴⽊ 貴⼤ 所属 2024/07〜現在 トグルホールディングス株式会社 出⾝ 兵庫県神⼾市 Twitter はじめました！ @suu_dev
3. 何やっているの？ 
 
 弊社の不動産部門を支える
 SFA(業務支援システム)を作っています！

4. 4
 © toggle holdings inc. 沿⾰ BUKUROUを買収 シリーズB 1st 12億調達 2023年7⽉ シリーズA 5.6億調達 2022年4⽉ MINE事業が 軌道に乗り始める 2021年8⽉ 不動産業界の デジタル化に向けた 挑戦を開始する 2020年6⽉ 設⽴ MINE事業により､ ⼟地を買い建物を建てる ノウハウ的基盤ができる ⼟地を買い建物を建てる ための業務インフラをリ リースする ⼟地売買の専⾨業務を AI化する研究開発が形に なり始める ‧物件管理 ‧VCプロ / VCライト ⼟地を買って建物を建てるための業務を､技術に転換す るための研究が進⾏する 地図GISデータ活⽤、建物3Dデータ活⽤、賃料予測の機 械学習など、さまざまな技術の掛け合わせた活⽤に、レ バレッジがかかる未来が⾒え始める ⼟地流通 プラットフォームの 実現へ 売上 95億 売上 51.0億 売上 23.4億 トグルホールディングス エンジニア組織 トグルホールディングス全体 2023年10⽉
5. 何やっているの？ 

6. 技術スタックについて - Full TypeScript 

7. 構成について 

8. 技術スタックについて - Full TypeScript 

9. HonoX について 

10. HonoXって？ 
 • HonoとViteを組み合わせたメタフレームワーク
 
 Honoの機能をそのまま使える。
 Viteを素に近い状態で使える。
 高速なSSR 

11. HonoXの特徴 
 • ファイルベースルーティング
 • Bring Your Own Renderer
 • Islands アーキテクチャ
 • Vite のエコシステム

12. HonoXの特徴 
 • ファイルベースルーティング
 • Bring Your Own Renderer
 • Islands アーキテクチャ
 • Vite のエコシステム

13. HonoXの特徴 - ファイルベースルーティング
 
 ファイルを配置した場所によってルーティングを決定する仕組みのこと
 

14. HonoXの特徴 - ファイルベースルーティング
 
 routes 直下にズラッと書いてます！
 
 ここを見に行けばいいと分かっているので、
 ページの探索は比較的楽。

15. HonoXの特徴 - ファイルベースルーティング
 
 route の操作が直感的で分かりやすい！
 
 

16. HonoXの特徴 - ファイルベースルーティング
 
 フォームのリクエストなどは、POST を指定する (同じファイル内で指定可能)
 
 

17. HonoXの特徴 - ファイルベースルーティング
 
 ミドルウェアを挟めるのが熱い🔥
 
 

18. HonoXの特徴 - ファイルベースルーティング
 
 まとめ
 • routes/配下に置けば簡単にルーティングできる
 • ルーティングは createRoute して c.render を返すだけの超お手軽
 • フックしたければ、middleware を追加するだけでOK！
 直感的でプロジェクトに参画直後も理解しやすい！
 

19. HonoXの特徴 
 • ファイルベースルーティング
 • Bring Your Own Renderer
 • Islands アーキテクチャ
 • Vite のエコシステム

20. HonoXの特徴 - Bring Your Own Renderer
 hono/jsx だけじゃなくて、react 自体を使える

21. HonoXの特徴 - Bring Your Own Renderer

22. HonoXの特徴 
 • ファイルベースルーティング
 • Bring Your Own Renderer
 • Islands アーキテクチャ
 • Vite のエコシステム

23. HonoXの特徴 - Islands アーキテクチャ
 app/islands に置いたコンポーネントは ClientComponentになる
 
 基本はSSR で配信され、islands に定義したファイルはクライア ントで読み込まれる。

24. HonoXの特徴 - Islands アーキテクチャ
 メリット

25. HonoXの特徴 - Islands アーキテクチャ
 デメリット
 feature単位でコンポーネントを 切っているが、
 クライアントでの動きが必要に なってコンポーネントをislands に移して、ディレクトリだけが残 ることがよくある。

26. HonoXの特徴 
 • ファイルベースルーティング
 • Bring Your Own Renderer
 • Islands アーキテクチャ
 • Vite のエコシステム

27. HonoXの特徴 - Vite のエコシステム
 Vite をそのまま使っているので
 Viteのエコシステムをそのまま使える
 
 mdx や ssg なども扱えます

28. 弊社の事例について 

29. UIライブラリ選定が難しい 
 • 隣のチームでも社内ツール(管理画面)でHonoXを採用して いる。
 • UIライブラリにAntDesignを採用し、CSRが必要なものはす べて islands コンポーネントに書き出すようにしているので、 ライブラリの選定は重要

30. そこで... 

31. SSRならではのフロントの技術選定 
 HonoXというよりSSRという部分が大きいが...
 PandaCSS を採用 
 既存のUIライブラリはクライアントの機能に依存しているので、
 うまく動かないことが多い

32. PandaCSS とは 
 ゼロランタイム CSS in JS 
 • JS内にCSSを書きつつも、ビルド時に実際のCSSファイルを 生成する
 • 動的にCSSを生成するハイブリッドなライブラリもある(Kuma UI) など

33. PandaCSS とは 
 • Patterns など提供されている機能の組み合わせで
 チーム内のスタイリングの統率は図りやすい
 パターンやレシピなど、スタイリング の統率を行うための機能提供は多 いが、
 学習コストはやや大きいかも 

34. 動的なUIについて 
 Radix UI の primitives を使っています
 

35. RHFの採用 
 経緯 • フロントでも動的なフォームの動きは欲しい。 • React Hook Formを⼊れることに。 結果 • API経由でのSubmitが必要になる。
36. RHFの採用 
 • SSR的なサポートもα版であるようなので、利⽤できるかも？
37. Context
 Server
 パッケージ構成について 
 
 Web
 Service層
 AppServer
 Transaction層
 Domain層
 infra層
 routes

38. 構成について 

39. 技術スタックについて - Full TypeScript 

40. パッケージ構成について 
 Web(フロントエンド)とServer(バックエンド)で分けています。 
 Serverは Classベースで Transaction, Service層などを用意 
 
 export class UserTransaction {
 private userService: UserService
 
 constructor(infra: Infra) {
 this.userService = new UserService(userService) 
 }
 
 async getUsers(): Promise<User | ErrorResponse> {} 
 }
 Transaction層
 Service層

41. パッケージ構成について 
 
 Web(フロントエンド)とServer(バックエンド)で分けています。 
 Serverは Classベースで Transaction, Service層などを用意 
 
 export class AppServer {
 private infra: Infra
 private userTransaction: UserTransaction
 
 constructor() {
 this.userTransaction = new UserTransaction(this.infra)
 }
 }

42. パッケージ構成について 
 
 export const backendMiddleware = createMiddleware<Env>(async (c, next) => {
 const backend = new AppServer() 
 c.set(‘backend’, backend) 
 await next()
 })

43. Context
 Server
 パッケージ構成について 
 
 Web
 Service層
 AppServer
 Transaction層
 Domain層
 infra層
 routes

44. Context
 Server
 クライアントからの呼び出し 
 Web
 Service層
 AppServer
 Transaction層
 Domain層
 infra層
 routes
 hono rpc

45. Context
 Server
 クライアントからの呼び出し 
 Web
 Service層
 AppServer
 Transaction層
 Domain層
 Service層
 routes
 hono rpc

46. チーム内の反応について 

47. コミュニティ・サポート体制について 
 問題が顕在化した場合は、 
 自分たちで対処する必要があるので、ハ マるとキツイ場面はある 
 自分たちで参考事例を増やしていく 
 気概は必要！

48. なんだかよくわからないエラーにも遭遇 
 この修正によって、ホットリロードの速度が 4分 → 20秒に短縮
49. メリットについて 
 Cloudflareにデプロイ するときにPrismaな どは重いので、選択 肢があるのは助かる 

50. まとめ
 • jsxによるrender や、ファイルベースルーティングなど、Honoを活かしつつ honoXで実現している機能は⾯⽩い！ • ViteやHonoが、ある程度「素」の状態で使えるので、HonoXだから困るとい うことは少ない。 • islands コンポーネントでCSRと境界は区切られるが、気を抜くとなんでもか んでもislandsコンポーネントになりがち。ゆえにライブラリ選定も難しい。 • HonoXを使っている！というイケイケ感。