🔥ほのおくん🔥

構成

🔥Hono使い倒しポイント🔥

✨HonoXを使用したフロントエンド✨

HonoXはHonoとViteを組み合わせたJSXでReact風に書けるフルスタックwebフレームワークだよ Honoのインスタンスそのものを扱うから、Honoを書き慣れてさえいればとっても使いやすいね

コードはここ！ https://github.com/claustra01/hackz-rabuka/blob/main/app/islands/Top.tsx

✨Helperを用いたWebSocket実装✨

Honoのwebsocket helperを用いてwebsocketを実装したよ！ アップグレードしているのはhonoのhelperだけどブロードキャストを実現するためにhono/bunのwebsocketも使っているよ

コードはここ！ https://github.com/claustra01/hackz-rabuka/blob/main/websocket/src/index.ts#L65

✨Middleware✨

カスタムミドルウェアの実装ができる！ CORSやバリデーションのミドルウェアを実装したよ 他に変なミドルウェアも書いたよ

コードはここ！ https://github.com/claustra01/hackz-rabuka/blob/main/websocket/src/index.ts#L30

✨RPC✨

Honoといえばこれだよね！型安全でスムーズな通信！ フロント側のコードがすごく簡単に書けるよ

コードはここ！ https://github.com/claustra01/hackz-rabuka/blob/main/app/islands/Result.tsx#L29

✨デプロイ✨

Honoはcloudflare workersで簡単に動くらしいからCI/CDを組んだよ

コードはここ！ https://github.com/claustra01/hackz-rabuka/blob/main/.github/workflows/deploy.yml#L13

🪄黒魔術ポイント🪄

💫Three.js💫

この炎のアニメーションはhono/jsxでThree.jsを描画しているよ シェーダーのオプションを文字列で何十行も書いてなんとかしてるよ！

コードはここ！ https://github.com/claustra01/hackz-rabuka/blob/main/app/hooks/useFireCreate.ts#L71

💫炎が揺らぐようなエフェクト💫

普通に認可ミドルウェアなんかを実装してもつまらないからレスポンス全体に炎の揺らぎっぽいアニメーションのフィルタをかけるミドルウェアを実装したよ

コードはここ！ https://github.com/claustra01/hackz-rabuka/blob/main/app/middlewares/filter.ts