• #eurekapu
  • #nuxt4
  • #vue3
  • #移行
  • #vuetify
  • #scoped-css
  • #codex-cli
  • #日記
eurekapuメモ

Eurekapu Nuxt 4移行プロジェクト始動

app.eurekapu.com（Vue 2製の学習プラットフォーム）をNuxt 4に移行するプロジェクトを本格的に開始した日。計画の更新からプロジェクト作成、CSSフレームワーク選定の試行錯誤まで、一気に進めた。

背景

eurekpauは会計・簿記を中心とした学習サイトで、Vue 2 + Firebase構成で運用してきた。Vue 2のEOLは過ぎており、移行の必要性は以前から認識していた。2025年12月と2026年1月に移行計画ドキュメントを作成済みだったが、Nuxt 4の安定版リリース（2026年1月）を待っていた形になる。

今日やったこと

1. 既存移行計画のNuxt 4ベース更新

過去に作成した2つの移行計画ドキュメント（2025-12-18の初期計画、2026-01-28の詳細版）を発見し、Nuxt 4.3ベースに更新した。

決定した方針:

  • SSG前提（サーバーサイドレンダリングは不要）
  • Firebase認証を廃止（ログイン機能は当面不要）
  • アクセス解析で利用頻度が高いページから優先的に移行
  • @nuxt/contentは不使用（インタラクティブな会計コンテンツはMarkdownに置き換えにくい）
  • 新規リポジトリ eurekapu-nuxt4 として既存リポジトリとは独立して進める

@nuxt/contentを使わない判断は、既存コンテンツが仕訳入力やT勘定の描画などインタラクティブなVueコンポーネントに依存しているため。Markdownベースに変換するメリットが薄い。

2. Codex CLIでドキュメントレビュー

更新した移行計画をCodex CLI（GPT-5.3）にレビューさせた。9件の指摘が返り、一括で修正を適用した。

主な指摘内容:

  • URL戦略の具体化（旧URLからのリダイレクトルール）
  • ロールバック手順の明記
  • Firebase認証廃止に伴うデータ移行の整理

Codex CLIはドキュメントレベルのレビューには手軽で、指摘の粒度もちょうどよかった。

3. Phase 1: Nuxt 4プロジェクト作成

Nuxt 4.3.1 + Vue 3.5.28でプロジェクトを新規作成した。eurekapu-nuxt4 リポジトリとして初期化し、基本的なディレクトリ構造を整えた。

Nuxt 4.3.1
Vue 3.5.28

特に問題なく立ち上がった。Nuxt 4はNuxt 3からの移行パスが整備されていて、初期セットアップは素直だった。

4. Vuetify導入 → 方針転換

当初、UIコンポーネントライブラリとしてVuetifyを検討していた。vuetify-nuxt-module v0.19.0以降がNuxt 4に対応しており、セットアップ自体は完了した。

しかし、実際にページを組んでみると、Vuetifyのマテリアルデザインがeurekpauの既存デザインと合わなかった。学習サイトとしてはもっとシンプルで余白の多いレイアウトが望ましく、Vuetifyのコンポーネントをカスタマイズするコストが高いと判断。

5. デザインテンプレート調査 → Scoped CSS方式に決定

別プロジェクト（tax-lp）で使っていたデザインテンプレートを調査し、その中のSoloスタイル（ミニマルで太字を活かしたデザイン）が学習サイトに合うことがわかった。

最終決定:

  • Vuetifyを完全に削除
  • 外部CSSライブラリに依存しない
  • Scoped CSSで各コンポーネントにスタイルを閉じ込める
  • Soloスタイルのデザイン原則（余白・タイポグラフィ重視）を採用

Vuetifyの依存を外し、Scoped CSS方式に書き換えた。結果的にバンドルサイズも小さくなり、デザインの自由度も上がった。

6. 実施計画の保存

ここまでの進捗と今後の計画を memo/2026-02-15/eurekapu-nuxt4-progress.md に保存した。

判断の振り返り

今日の大きな判断は2つあった。

@nuxt/content不使用: 正しい判断だと思う。eurekpauのコンテンツはVueコンポーネントが前提で、Markdownに落とすと表現力が大幅に落ちる。mdx-playgroundとは性質が違う。

Vuetify撤退: 試してから判断できたのがよかった。最初からScoped CSSにする選択肢もあったが、実際に触ってみて「合わない」と確信できた。tax-lpのSoloスタイルを見つけたのも収穫。

技術メモ

  • Nuxt 4.3はNuxt 3系からのアップグレードが容易。breaking changesは少ない
  • vuetify-nuxt-module v0.19.0はNuxt 4対応しているが、デザインの相性は別問題
  • Scoped CSSはコンポーネント単位でスタイルが完結するため、AIとの協働でも編集範囲が明確になる
  • Codex CLI（GPT-5.3）はドキュメントレビュー用途では十分実用的

次のステップ

  • トップページのレイアウト実装（Soloスタイルベース）
  • 既存の会計コンテンツから1ページを移植して動作確認
  • ルーティング設計（旧URLとの対応表作成）
  • SSGビルド + Cloudflareデプロイの確認