Go to Qiita Advent Calendar Top
LoginSignup
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Day 10

Hono Advent Calendar 2025

@morioka1206

HonoでJSXを使ってHTMLをつくろう

Last updated at Posted at 2025-11-30

コンポーネントをHonoのJSXでつくりたい :hourglass:

image.png

日本人の和田 裕介（@yusukebe)さんが開発した国産のTypeScriptフレームワークHono。

honoは依存関係ゼロ。とても軽くNode.jsのフレームワークExpressと比べても非常に小さいフレームワークです。(hono/tinyプリセットは14KB以下。Expressは572KB。らしいです）

そんなHonoですが、HTMLも生成できるフルスタックフレームワークです。しかもReactで知られるJSXでコンポーネントを作成し、HTMLを作成することができるんです。

本記事はReactじゃなくてHonoでJSXを書く良さをお伝えできたらと思います。

なぜHonoでJSXを書くといいのか？ :frowning2:

そもそもJSXって？ :airplane_small:

JavaScriptの拡張構文でHTMLっぽい感じコンポーネントを書くことができ、それを組み合わせることで保守性の高いWebページをつくることができます。

HonoのJSXとReactのJSX :scales:

ReactはSPAアプリケーションをつくることができるクライアントサイドのライブラリです。
Honoはサーバーサイドのフレームワークです。
これが大きな違いです。

Honoは仮想DOMがないので軽く初期表示が速い

ReactはJavaScriptがユーザーのブラウザで動き、仮想DOMによってレンダリングを行うため初期表示に時間がかかります。

React の JSX は仮想DOMとセットですが、Hono は仮想DOMを持ちません。
JSX を 純粋に HTML を生成するための構文として使っているだけ なので、クライアントに重い JavaScript を送る必要もありません。

  • クライアント JS を使わない構成であればバンドル不要
  • 初期表示が爆速（SSRで即返す）
  • 低スペック端末でも軽い

サーバーで生成したHTMLを送り表示するだけのためユーザー側の処理が軽くなります。

React（CSR: Client-Side Rendering）の場合:

ユーザーのブラウザで実行される処理:
1. JavaScriptファイルをダウンロード（130KB以上）
2. JavaScriptを解析・実行
3. 仮想DOMを構築
4. 実際のDOMに反映
→ 低スペックなスマホやタブレットでは遅い！

Hono（SSR: Server-Side Rendering）の場合:

サーバーで実行される処理:
1. JSXをHTMLに変換
2. 完成したHTMLを送信

ユーザーのブラウザで実行される処理:
1. HTMLを表示するだけ
→ どんなデバイスでも爆速！
→ バッテリーにも優しい

「React風の書き味なのに、処理はサーバーで超軽く動く」 というのが Hono JSX 最大のメリットです。

HonoとReactの比較 :writing_hand_tone1:

項目 Hono React（CSR）
初期表示速度 ⚡ 爆速（HTMLが即座に表示） 🐌 遅い（JS読み込み待ち）
バンドルサイズ 📦 数KB 📦 130KB以上
ユーザーのCPU負荷 💚 軽い 🔴 高い
低スペック端末 ✅ 快適 ❌ 遅い
SEO ✅ やりやすい ⚠️ 要工夫

とても良さそうなHonoですが、デメリットもあります。

  • Reactのエコシステム（フック・ライブラリ）は使えない
  • ページ内の複雑な状態管理は苦手
  • SPAならReactのほうが適している

基本的にはReactのフックは使えません。
逆を言うと、Reactの状態管理、ライフサイクルなどの複雑さがなくシンプルです。

サーバーサイドレンダリングのフレームワークとの比較 :writing_hand_tone2:

サーバーサイドで HTML を生成するという点では、HonoはRuby on Railsなどのフレームワークにも近い立ち位置にあります。

Rails の erb もサーバー側でテンプレートをレンダリングし、生成した HTML をブラウザに返します。
ただし、Rails はアプリケーションサーバーが常に動作し、DB連携やRubyの処理を挟むため、どうしてもレスポンスは重くなりがち です。

一方 Hono は Web 標準 API をベースにした非常に軽量な設計で、
Cloudflare Workers や Bun、Vercel Edge などの “エッジ環境” で動かせる のが大きな特徴です。

その結果：

  • 世界のどの地域からアクセスされても初期表示が速い
  • インフラ構築がほぼ不要（EC2 などの設定がいらない）
  • スケールも自動で、維持コストも低い

といった “現代的な SSR” の恩恵を自然に受けられます。

Railsは大きなエコシステムと高い生産性が魅力ですが、
「軽量 SSR ＋ 簡単デプロイ」で Web サイトを作りたい場合は Hono のほうが適しています。

HonoでJSXのなにがいいのか？ :doughnut:

つまり、HonoでJSXを使うと 「Reactライクな書き方 + 圧倒的なパフォーマンス + 開発に集中できる環境」 が手に入ります。

HonoでJSXのはじめかた :fire:

それではここからはHonoでJSXを利用する方法を説明していきます。

インストール :comet:

npmやbunなどお好きなパッケージマネージャーを選択してください。

インストール
npm create hono@latest

JSXの導入 :lemon:

HonoをインストールしただけではJSXを使うことはできません。

tsconfig.jsonへ追記

まずはインストール時に選択したテンプレートの種類で内容は変わってきますが、tsconfig.jsonのcompilerOptionsを追記します。

tsconfg.jsonの例
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "jsx": "react-jsx", // JSXを使えるようにする
    "jsxImportSource": "hono/jsx", // HonoのJSXを使うことを宣言する
    "strict": true,
    "baseUrl": "./",
    "outDir": "dist",
    "paths": {
      "@components/*": ["src/components/*"],
      "@pages/*": ["src/pages/*"],
      "@routes/*": ["src/routes/*"],
      "@lib/*": ["src/lib/*"]
    }
  },
  "include": ["src"]
}

コンポーネントをつくる :books:

hello.tsxを作成します。
コンポーネントのファイルの拡張子は.tsxにする必要があります。

HonoはReactのような大文字から始める命名規則はありません。top.tsxやuser.tsxなど小文字から始めるのが一般的です

hello.tsx
const Hello = () => {
  return (
    <>
      <h1>Hello Hono!</h1>
    </>
  );
};

export default Hello;

index.tsxで呼び出してみましょう。

index.tsx
import Hello from "./hello.js";

const app = new Hono()

app.get("/", (c) => {
  return c.html(
    <>
      <Hello />
    </>
  );
});

image.png

表示されました！

propsを渡してみよう :gift:

JSXなので当然、propsを渡すことができます。
Message.tsxを作成します。

propsを受け取る場合、FC（Function Component） 使用するとpropsの型チェックが効き、すっきり書くことができます。

Message.tsx
import type { FC } from "hono/jsx";

type Props = {
  text: string;
};

const Message: FC<Props> = (props) => {
  return <p>{props.text}</p>;
};

export default Message;

index.tsxでPropsを渡してみましょう。

index.tsx
import Hello from "./hello.js";
import Message from "./Message.js";

const app = new Hono();

app.get("/", (c) => {
  return c.html(
    <>
      <Hello />
      <Message text="Messageコンポーネントです" />
    </>
  );
});

image.png

表示されました！

まとめ :boy:

簡単ではありますが、HonoでJSXを使ったコンポーネントの作成を紹介しました。
他に、useMemoのようなメモ化の機能やuseContextのようなどこからでもデータを参照できる仕組みも用意されています。
JSX以外にもHonoにはさまざまなAPI、ミドルウェア、ヘルパーなどの機能がたくさんあります。

向いているサイト、向いていないサイト :desktop:

Honoはサーバーサイドレンダリングのため、ユーザー操作やデータの変更に応じて表示内容を頻繁に更新するサイトには向きません。その場合はReactを使うのがよい選択だと思います。
そうでないブログやコーポレートサイトなどではサーバーサイドレンダリングで十分なためHonoを使うのがよい選択になるはずです。

しかもCloudflareを使うことでほぼ無料でWebサイトを公開、運営することができます。（太っ腹！）:100:

ぜひHonoでWebページを作成してみてください。

Honoのクライアントサイドレンダリングについても書きたいと思います。

1
1
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?