HonoXを使ってみたよ

HonoXとは

HonoXは、フルスタックのウェブサイトやウェブAPIを作成するための、シンプルで高速な超音速メタフレームワークです。HonoXは、Hono、Vite、UIライブラリの上に構築されています。

とあります。やNext.jsやRemixのようにWebサイトを作るときのフレームワークとして使えるものです。

このサイトのリポジトリは以下で見れます⭐️

使ってみた感想

👍 良かったところ

• Cloudflare Pagesでのデプロイがデフォルトでサポートされているので高速デプロイが可能（DXが良い）
• ビルドが速い
• パフォーマンスも良い
• シンプルなので無駄に凝ったことをせずにサイトを作れる
  • 今回みたいに自分のブログサイトやドキュメントベースのサイトなどに向いてそう
• ルールが少なく、わかりやすい
• 型補完が優秀

総じてやっぱりCloudflare Pagesとの相性がよく、App RouterをCloudflare Pagesでデプロイしたほぼ同じサイトよりもビルドは速いし、パフォーマンスも良いし、DXも良いので気持ちの良い開発ができました！

✊ もう少しだったところ

まだアルファ版ということもあり、これから改善されていくことは重々承知しているのですが、今のところは以下の点がもう少し！と思いました。

• Reactで使える機能が限られている
  • React前提のライブラリは使えないことが多く、App Routerで作ったサイトよりすぐに実装できる機能は限られる
  • かといってReactを入れるとHonoXの良さがなくなってしまいそうなので、使わない方向で進めた
• Islandsコンポーネントがまだ不安定
  • Islandsコンポーネントの用のsciriptが読み込まれず例えばスマホ用のハンバーガーメニュをクリックしても反応しないなどが起きた
  • しかし、以下のPRで修正されるので問題なさそう（現状はカスタムのScriptコンポーネントを作成し対応 ※参考）
    https://github.com/honojs/honox/pull/114
  • 2024/03/20 追記:
    • 上記だと解決しなくて、どうやらroutes配下のページからIslandコンポーネントを直接インポートする形でないとhasIslandsImportがtureにならないためだった
    • 例えばLayoutを_renderer.tsxで読み込んで、その中でIslandコンポーネントを読み込むと直接インポートではないのでclientのscriptが読み込まれない
    • つまりネストされたコンポーネントにあるIslandコンポーネントは対象外になっている
    • すでにIssueがありこちらで解決されるのを待つしかなさそう（自分で直せるかなとコードを見てみたけどあまり良い方法が思いつかなかった）

終わりに

HonoXの開発体験は素晴らしく、今後も使っていこうと思いました！ 私自身まだまだ未熟ですが、サポートできるところがあれば積極的にコントリビュートしてみたいです！！

P.S. ダークモードの他にライトモードのデザインも作ってみました。OSの設定によって切り替えるタイプですが、ぜひ試してみてください！

参考になったサイト

• https://yossy.dev/posts/honox-blog-created
• https://blog.berlysia.net/entry/2024-02-14-honox