HonoXでWebサイトを作る

HonoXを使えば、Tailwind CSSやクライアントコンポーネントなどの最新機能を備えた高速・軽量なWebサイトを簡単に構築できます。この記事では、HonoXプロジェクトのセットアップから開発サーバーの起動まで、一歩一歩解説しています。

最近のWebフロントエンド開発では、さまざまなフレームワークやライブラリが登場していますが、「Hono」という軽量でパワフルなフレームワークをご存知でしょうか？そしてその上に構築された「HonoX」は、モダンなWebサイト構築に必要な機能を備えたフルスタックフレームワークとして注目されています。

この記事では、HonoXを使ってCloudflare Pagesにデプロイ可能なWebサイトを作成する手順を解説します

create-honoでセットアップ

HonoXプロジェクトを始めるには、create-honoコマンドを使います。今回はCloudflare Pagesにデプロイする予定ですが、cloudflare-pagesではなくx-basicテンプレートを選択します。HonoXを選ぶことで、Tailwind CSSやクライアントコンポーネント周りなどの情報が集まりやすい（記事が多い印象）ため、作業がやりやすくなります。

npm create hono

create-hono version 0.4.0
✔ Target directory … hidetaka.dev.2024
? Which template do you want to use? › - Use arrow-keys. Return to submit.
    aws-lambda
    bun
    cloudflare-pages
    cloudflare-workers
    deno
    fastly
    lambda-edge
    netlify
    nextjs
  ↓ nodejs
❯   x-basic

Tailwind CSS導入

プロジェクトが作成できたら、Tailwind CSSをセットアップしていきましょう：

npm i tailwindcss postcss autoprefixer

Tailwindの初期設定ファイルを作成します：

npx tailwind init

Created Tailwind CSS config file: tailwind.config.js

tailwind.config.jsを編集します。HonoXではファイルをappディレクトリに配置するので、contentのパスをそれに合わせます。今回はTSXファイルのみを対象とします：

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./app/**/*.tsx'],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
}

次に、PostCSSの設定ファイルpostcss.config.jsを作成します：

export default {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  }

続いて、Tailwindのスタイルを定義するapp/style.cssファイルを作成します：

@tailwind base;
@tailwind components;
@tailwind utilities;

app/routes/_renderer.tsxを編集して、CSSファイルを読み込むよう設定します：

import { Style } from 'hono/css'
import { jsxRenderer } from 'hono/jsx-renderer'
import { Link, Script } from 'honox/server'

export default jsxRenderer(({ children, title }) => {
  return (
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>{title}</title>
        <link rel="icon" href="/favicon.ico" />
        <Script src="/app/client.ts" async />
        <Style />
        <Link href='/app/style.css' rel='stylesheet' />
      </head>
      <body>{children}</body>
    </html>
  )
})

最後に、vite.config.tsを編集して、ビルド対象にCSSファイルを含めるようにします：

import build from '@hono/vite-build/cloudflare-pages'
import adapter from '@hono/vite-dev-server/cloudflare'
import client from 'honox/vite/client'
import honox from 'honox/vite'
import { defineConfig } from 'vite'

export default defineConfig(({mode}) => {
  if (mode === 'client') {
    return {
      plugins: [client()],
      build: {
        rollupOptions: {
          input: ['app/style.css']
        }
      }
    }
  }
  return {
    plugins: [honox({ devServer: { adapter } }), build()]
  }  
})

ここで注意点として、デプロイ先がCloudflare Pages以外の場合は、buildやadapterも対応するものに変更する必要があります。

HonoはAPIとJSXの両方が実装できる

Honoの強力な特徴の一つは、APIエンドポイントとJSXを使ったUIの両方を同じフレームワーク内で実装できることです。以下はその例です：

import { Hono } from 'hono'
import { renderer } from './renderer'

const app = new Hono()

app.use(renderer)

app.get('/', (c) => {
  return c.render(<h1>Hello!</h1>)
})

export default app

これにより、フロントエンドとバックエンドのロジックを一つのコードベースで管理できます。例えば、APIエンドポイントを作成してデータを返したり、そのデータをJSXコンポーネントで表示したりすることが簡単に実現できます。

開発サーバーの起動

設定が完了したら、開発サーバーを起動してプロジェクトを確認してみましょう：

npm run dev

これにより、ローカル環境（通常は http://localhost:5173 ）でアプリケーションが起動します。変更を加えると、Hot Module Replacement (HMR) によってリアルタイムで更新が反映されます。

まとめと次のステップ

この記事では、HonoXとTailwind CSSを使ったWebサイト構築の基本的なセットアップ方法を解説しました。HonoXは高速で軽量なフレームワークでありながら、モダンなWeb開発に必要な機能を備えています。

今後のステップとして以下のことに挑戦してみると良いでしょう：

コンポーネントの分割と再利用

データフェッチングとステート管理

クライアントコンポーネントの活用

ミドルウェアを使った認証・認可

フォーム処理とバリデーション

HonoXは比較的新しいフレームワークですが、その軽量さと高速性から、特にエッジコンピューティング環境での開発に適しています。ぜひ公式ドキュメントやコミュニティの情報も参考にしながら、HonoXの可能性を探ってみてください。

参考記事

https://zenn.dev/ryuapp/scraps/503cb72f57c7bb

Hono公式ドキュメント

HonoX GitHub リポジトリ