HonoXのSSGビルドでCSS・JSファイルを正しく読み込む方法

HonoXはHonoをベースにした軽量なWebフレームワークで、Cloudflareのようなサーバーレス環境で動作します。この記事では、HonoXのSSG（Static Site Generation）ビルドにおいてCSS・JSファイルを適切に読み込めるように設定する方法について解説します。

問題点

HonoXでSSGビルドを行う際、デフォルトの設定では以下のような問題が発生することがあります：

1. CSSファイルが正しく読み込まれない
2. クライアントサイドJavaScriptが動作しない
3. Islandsコンポーネントが正しくハイドレーションされない

これらの問題を解決するには、vite.config.tsの適切な設定が必要です。

解決策: vite.config.tsの設定

以下に、HonoXプロジェクトでSSGビルド時にCSS・JSを正しく読み込むためのvite.config.tsの設定例を示します：

import tailwindcss from "@tailwindcss/vite";
import honox from "honox/vite";
import { defineConfig } from "vite";
import ssg from "@hono/vite-ssg";
import client from "honox/vite/client";

// エントリーポイントを指定
const entry = "./app/server.ts";

export default defineConfig(({ mode }) => {
  // クライアントモードの設定
  if (mode === "client") {
    return {
      plugins: [
        client({
          input: ["./app/style.css"], // クライアント側で読み込むCSSファイル
        }),
        tailwindcss(),
      ],
    };
  }

  // サーバーおよびSSGモードの設定
  return {
    build: {
      emptyOutDir: false, // ビルド時にdistディレクトリを空にしない
    },
    plugins: [
      honox({
        client: {
          input: ["./app/style.css"], // サーバー側でも同じCSSファイルを読み込む
        },
      }),
      tailwindcss(),
      ssg({ entry }), // SSG設定
    ],
  };
});

重要なポイント

1. クライアントとサーバーの両方で同じCSSファイルを指定

// クライアントモード
client({
  input: ["./app/style.css"],
}),

// サーバー/SSGモード
honox({
  client: {
    input: ["./app/style.css"],
  },
}),

両方で同じCSSファイルパスを指定することで、クライアントサイドとサーバーサイドの両方でスタイルが適用されます。

2. SSGプラグインの設定

import ssg from "@hono/vite-ssg";

// 中略

ssg({ entry }),

@hono/vite-ssgプラグインを使って、エントリーポイント（通常はapp/server.ts）を指定します。このプラグインがSSGビルドを処理します。

3. emptyOutDirオプション

build: {
  emptyOutDir: false,
},

emptyOutDir: falseを設定することで、ビルド時にdistディレクトリが完全に空にならず、クライアントビルドの成果物が保持されます。

注意点

• app/style.cssは自分のプロジェクトのCSSファイルパスに合わせて変更してください。
• 複数のCSSファイルを読み込む場合は、input配列に追加します：input: ["./app/style.css", "./app/other-style.css"]
• JavaScriptファイルも同様にinput配列に追加できます。

Islandsアーキテクチャとの連携

HonoXのIslandsアーキテクチャを使用している場合、クライアントサイドのハイドレーションが正しく機能するように、以下の点にも注意してください：

1. Islandsコンポーネントはapp/islands/ディレクトリに配置する
2. クライアントサイドのエントリーポイント（通常はapp/client.ts）が正しく設定されていることを確認する

まとめ

HonoXのSSGビルドでCSS・JSファイルを正しく読み込むには、vite.config.tsでクライアントとサーバーの両方のモードに対して、適切な設定を行うことが重要です。この記事で紹介した設定を参考にして、自分のプロジェクトに合わせた調整を行ってください。

特に、Islandsコンポーネントを使用する場合は、クライアントサイドのハイドレーションが正しく機能するよう、CSSとJavaScriptの設定に注意が必要です。適切に設定することで、高速で効率的なサイト生成とユーザー体験を実現できます。