🔥
HonoがJSXを提供しているので使ってみた

2024/11/25に公開
React
 はじめにHonoはTypeScriptファーストのWebフレームワークとして知られていますが、JSXもサポートしているので、それについて書いていきます。
https://hono.dev/docs/guides/jsx

 HonoとはHonoとは何かについては、以下の記事に記載されています。
https://qiita.com/hukuryo/items/ed2cda9b1c42d3c6ff6a#honoって何
ちなみに、Honoが提供しているJSXは、Reactと同じ文法をしていますが、開発者は、あえてReactのソースは見ずに実装をしているみたいです。
https://github.com/honojs/hono

 セットアップまず、必要なパッケージをインストールします。
npm install hono @hono/jsx
次に、TypeScriptの設定を行います。tsconfig.jsonに以下の設定を追加します。
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "hono/jsx"
  }
}

もしくは、以下のようにプラグマを記載することで利用できます。
/** @jsx jsx */
/** @jsxImportSource hono/jsx */

 簡単な画面を作成最初は、以下のコードで簡単な動作確認をしていきましょう。

「/」がリクエストされた際に、HTMLをレスポンスします。
import { Hono } from 'hono'
import type { FC } from 'hono/jsx'

const app = new Hono()

const Layout: FC = (props) => {
  return (
    <html>
      <body>{props.children}</body>
    </html>
  )
}

const Top: FC<{ messages: string[] }> = (props: {
  messages: string[]
}) => {
  return (
    <Layout>
      <h1>Hello Hono!</h1>
      <ul>
        {props.messages.map((message) => {
          return <li>{message}!!</li>
        })}
      </ul>
    </Layout>
  )
}

app.get('/', (c) => {
  const messages = ['Good Morning', 'Good Evening', 'Good Night']
  return c.html(<Top messages={messages} />)
})

export default app
「npm run dev」を実行し、http://localhost:8787 をブラウザで開いてみましょう。

以下のような画面が表示されるはずです。


 HonoとNext.jsを比べるとNext.jsはフロントからきているフレームワークなので、基本的なバックエンドの機能が弱い部分があります。例えば、ロギングがまともにできない点であったり、ミドルウェアの機能が使いづらい(Node.jsの機能が全て使えない等)などの弱さがあります。(Honoは普通にできる。)

これに対して、Honoは、バックエンドからきているフレームワークなので、Next.jsの弱い部分であるバックエンドの機能については、一通り揃っているのではないかと思いますが、一方でReactを使ってUIを構築していくとなると、Next.jsはReactのフレームワークとしての機能が揃っているため、そちらも捨て難いなと思います。

なので現状は、要件によって、フロントエンドとバックエンドのどちらに重きをおくかで、技術選択としては、変わってくるのではないかなと思います。

 まとめHonoはサーバーサイドフレームワークとして誕生しましたが、こういったJSXもサポートしているということで、これからさらにシェアが広がっていく技術になっていくのではないかと思います。
はじめに

Honoとは

セットアップ

簡単な画面を作成

HonoとNext.jsを比べると

まとめ

Discussion
