# フルスタック Web フレームワーク HonoX を使ってみる
?> HonoX は 2024 年 2 月現在アルファステージとなっています。セマンティックバージョンに従わずに破壊的な変更が行われる可能性があります。
HonoX は [Hono](https://hono.dev/) と [Vite](https://vitejs.dev/) をベースにしたフルスタック Web フレームワークです。以下のような特徴があります。
- ファイルベースのルーティング
- 高速な SSR
- BYOR（Bring Your Own Rerender）：レンダリングエンジンを自由に選択できます
- [islands](https://jasonformat.com/islands-architecture/) ハイドレーション
- ミドルウェア：バックエンドは Hono として動作するため、多くの [Hono のミドルウェア](https://hono.dev/guides/middleware) を使用できます
## HonoX を始める
新しい HonoX のプロジェクトを作成するためには、`hono-create` コマンドを使用します。
```bash
npm create hono@latest
```
`? Which template do you want to use?` という質問に対して `x-basic` を選択します。
```bash
create-hono version 0.3.2
✔ Target directory … hono-blog
? Which template do you want to use? › - Use arrow-keys. Return to submit.
↑ cloudflare-pages
cloudflare-workers
deno
fastly
lambda-edge
netlify
nextjs
nodejs
vercel
❯ x-basic
```
`hono-create` コマンドが完了すると、以下のようなディレクトリ構造が作成されます。
```sh
.
├── app
│ ├── islands
│ │ ├── counter.tsx
│ ├── routes
│ │ ├── \_renderer.tsx
│ │ └── index.tsx
│ ├── client.ts
│ ├── global.d.ts
│ └── server.ts
├── package.json
├── tsconfig.json
└── vite.config.ts
```
作成されたディレクトリに移動して、`npm install` と `npm run dev` を実行します。
```bash
cd hono-blog
npm install
npm run dev
```
http://localhost:5173 にアクセスすると、以下のような画面が表示されます。
## プロジェクトの構造
HonoX のプロジェクトは以下のような構造になっています。
- `app`：サーバーのエントリーポイント、やクライアントのすべてのコードが含まれています
- `app/islands`：インタラクションを行う islands コンポーネントを含むディレクトリ
- `app/routes`：ファイルベースのルーティングのためのディレクトリ。`index.tsx` は `/` に、`about.tsx` は `/about` にマッチする
- `app/routes/_renderer.tsx`：Hono の [JSX Renderer Middleware](https://hono.dev/middleware/builtin/jsx-renderer) が呼ばれるファイル。レイアウトとして機能する
- `app/client.ts`：クライアントエントリーポイント
- `app/server.ts`：サーバーエントリーポイント
## クライアントルートを作成する
それでは、どのようにページを作成しているのか見ていきましょう。`app/routes/index.tsx` は以下のようになっています。
```tsx:app/routes/index.tsx
import { css } from 'hono/css'
import { createRoute } from 'honox/factory'
import Counter from '../islands/counter'
const className = css`
font-family: sans-serif;
`
export default createRoute((c) => {
const name = c.req.query('name') ?? 'Hono'
return c.render(
Hello, {name}!
,
{ title: name }
)
})
```
HonoX ではそれぞれのルートで `Handler | MiddlewareHandler` の配列を `default export` する必要があります。`createRoute` はそのためのヘルパー関数です。`createRoute` に渡すコールバック関数では引数として `Context` を受け取ります。これは [Hono の Context](https://hono.dev/api/context) と同じです。ここでは `c.req.query('name')` でクエリパラメータを取得しています。
`c.render` 関数を使ってコンポーネントをレンダリングしています。ここで使われているのは HonoX のデフォルトのレンダリングエンジンである [hono/jsx](https://hono.dev/guides/jsx) です。基本的には React と同じように使えます。
`c.render` の第 2 引数にはページのカスタムデータを指定できます。ここでは `title` を指定して、ページのタイトルをカスタマイズしています。ここで指定した `title` は `_renderer.tsx` で引数として受け取り使われます。
```tsx:app/routes/_renderer.tsx {5, 11}
import { Style } from 'hono/css'
import { jsxRenderer } from 'hono/jsx-renderer'
import { Script } from 'honox/server'
export default jsxRenderer(({ children, title }) => {
return (
{title}
{children}
)
})
```
`c.render` の第 2 引数の型定義は `app/global.d.ts` で以下のようになっています。
```ts:app/global.d.ts {3-5, 12-14}
import {} from 'hono'
type Head = {
title?: string
}
declare module 'hono' {
interface Env {
Variables: {}
Bindings: {}
}
interface ContextRenderer {
(content: string | Promise, head?: Head): Response | Promise
}
}
```
`title` 以外の `description` や `keywords` などのメタデータを指定したい場合には、ここの型定義と `_renderer.tsx` を変更する必要があります。
CSS ライブラリとして [hono/css](https://hono.dev/helpers/css) が使われています。これは Hono のビルドインの CSS in JS ライブラリです。CSS をテンプレートリテラルで書くことができます。
```tsx:app/routes/index.tsx
import { css } from 'hono/css'
const className = css`
font-family: sans-serif;
`
```
`hono/css` を使う場合には、`_renderer.tsx` で必ず `
{children}