Hono × Nuxt 用のワークスペースを作る

作りかけプロダクトを量産してきた結果、ワークスペース作成時のおまじない（ルーチン設定）が固まってきました。この記事では、その手順をまとめます。

結論

• 以下を使う
  • editorconfig
  • devcontainer
  • biome
  • bunx create-hono {アプリ名}
  • npx nuxi@latest init {アプリ名}
  • bun workspaces

editorconfig

EditorConfig とは何ですか?
EditorConfigは、複数の開発者が様々なエディタやIDEを使用して同じプロジェクトに取り組む際に、コーディングスタイルの一貫性を維持するのに役立ちます。
.ts / .json / .vue 向けにはあとからBiomeを適用しますが、それ以外のファイル向けに、インデントスタイル・文字コード・最終行を揃えるための設定です。

.editorconfig

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true

プロジェクトルートに上記の設定ファイルを作成し、ワークスペースの推奨事項にEditorConfig.EditorConfigを追加します。

devcontainer

初期の開発環境構築を含め、ワークスペースでの作業は基本的にdevcontainer内で行います。

Dockerfile

FROM oven/bun:1.3

RUN apt-get update && \
    apt-get install -y git curl vim locales && \
    apt-get clean && \
    rm -rf /var/lib/apt/lists/*

Dockerfileを用意すれば、devcontainerファイルはVS Codeから自動生成できます。
Ctrl+Shift+Pでコマンドパレットを開き、Add Dev Container Configuration Files と入力します。
コマンドの中から、開発コンテナー: 開発コンテナー構成ファイルを追加…を選択します。

'Dockerfile' から (コンテナー構成の既存の 'Dockerfile' を参照してください) を選んで進めると、自分で作成したDockerfileイメージを使うdevcontainer設定が完了します。

.devcontainer/devcontainer.json

{
  "name": "sample-typescript-workspace",
  "build": {
    "context": "..",
    "dockerfile": "../Dockerfile"
  }
}

補足:docker-compose.yml

Dockerfileをベースにdevcontainerを構成しましたが、docker-compose.ymlをベースに選択することもできます。
普段は、アプリ・DB・S3などのコンテナを同時起動する docker-compose.yml をベースにしています。

biome

Web開発のためのたった1つのツールチェーン
フォーマット、リントなどが一瞬で完了します！

フォーマッター・リンターは prettier + eslint を採用するのが一般的だと思います。
ただ、個人的には次の点で扱いづらさがありました。

• eslintがフォーマットまで担えてしまい、役割分担が見えづらい
• それぞれで競合する設定もあり、設定難易度が高い
• 別々の設定ファイルを作成し、別々の設定方法を学習する必要がある

これを解決しやすいのがBiomeです。
さらに、高速という強みもあります。

• 設定ファイルを初期化

  bun install -D @biomejs/biome
  bunx @biomejs/biome init
  

• organizeImportsの設定を追加

    "assist": {
      "enabled": true,
      "actions": {
        "source": {
          "organizeImports": {
            "level": "on",
            "options": {
              "identifierOrder": "natural"
            }
          }
        }
      }
    }
  

• VSCode拡張機能 biomejs.biome をインストール

• VSCodeで保存時に自動フォーマットをかける設定を追加
  ※ .vscode/settings.json に追記する前提で記載しますが、.devcontainer/devcontainer.json でもOKです。

  {
    "[typescript]": {
      "editor.defaultFormatter": "biomejs.biome",
      "editor.formatOnSave": true
    },
    "[javascript]": {
      "editor.defaultFormatter": "biomejs.biome",
      "editor.formatOnSave": true
    },
    "[vue]": {
      "editor.defaultFormatter": "biomejs.biome",
      "editor.formatOnSave": true
    },
    "[json]": {
      "editor.defaultFormatter": "biomejs.biome",
      "editor.formatOnSave": true
    },
    "[jsonc]": {
      "editor.defaultFormatter": "biomejs.biome",
      "editor.formatOnSave": true
    },
    "editor.defaultFormatter": "biomejs.biome",
    "editor.codeActionsOnSave": {
      "source.fixAll.biome": "explicit",
      "source.organizeImports": "explicit"
    }
  }
  

Hono

リポジトリ構造は、ぼくのかんがえたさいきょうのフルスタックTypeScriptモノレポ・ポリレポ構成に合わせます。

Honoアプリを初期化します。

cd /app
mkdir /app/packages
cd /app/packages
bunx create-hono hono-backend
# 以降、ガイドに沿って進めます。

ワークスペース機能を使うため、package.jsonのパッケージ名を変更します。

/app/packages/hono-backend/package.json

{
  "name": "@{GitHub-username}/hono-backend",
  // ....
}

Nuxt

cd /app/packages
npx nuxi@latest init nuxt-frontend

こちらもHonoと同様に、package.jsonのパッケージ名を変更します。

/app/packages/nuxt-frontend/package.json

{
  "name": "@{GitHub-username}/nuxt-frontend",
  // ....
}

workspaces

/app/package.json

{
  "workspaces": [
    "packages/*"
  ],
  "scripts": {
    "build": "bun run --workspaces build",
    "dev": "bun run --workspaces dev"
  },
  "devDependencies": {
    "@biomejs/biome": "2.4.2"
  }
}

上記の設定で、例えばnuxtからhonoのRPCをコールする実装をする場合、
以下のようにパッケージとして参照できます。

import { type App } from "@{GitHub-username}/hono-backend"
import { hc } from "hono"

const client = hc<App>("http://localhost:3001")
client.index.$get()

package.json の devDependencies は次のようになります。

/app/packages/nuxt-frontend/package.json

{
  "devDependencies": {
    "@{GitHub-username}/hono-backend": "workspace:*"
  }
}

まとめ

初期構築の手順を標準化すると、毎回の迷いが減り、本質的な実装に早く入れます。
今回の構成（devcontainer / biome / Hono / Nuxt / workspaces）は、そのための実用的な最小セットです。

最初にひな型を作っておけば、次回以降は流れ作業で立ち上げられます。環境構築の負担を減らして、機能実装に集中できるようになります。