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

by takahiro suzuki

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

2  © toggle holdings inc. 鈴⽊貴⼤所属 2024/07〜現在トグルホールディングス株式会社出⾝兵庫県神⼾市 Twitter はじめました！ @suu_dev

Slide 3

Slide 3 text

何やっているの？     弊社の不動産部門を支える  SFA(業務支援システム)を作っています！ 

Slide 4

Slide 4 text

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⽉

Slide 5

Slide 5 text

何やっているの？  

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

構成について  

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

HonoX について  

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

HonoXの特徴 - Bring Your Own Renderer 

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

弊社の事例について  

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

そこで...  

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

RHFの採用   経緯 ● フロントでも動的なフォームの動きは欲しい。 ● React Hook Formを⼊れることに。結果 ● API経由でのSubmitが必要になる。

Slide 36

Slide 36 text

RHFの採用   ● SSR的なサポートもα版であるようなので、利⽤できるかも？

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

構成について  

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

チーム内の反応について  

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

なんだかよくわからないエラーにも遭遇   この修正によって、ホットリロードの速度が 4分 → 20秒に短縮

Slide 49

Slide 49 text

メリットについて   CloudflareにデプロイするときにPrismaなどは重いので、選択肢があるのは助かる  

Slide 50

Slide 50 text

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