ブログ大掃除 - やっと技術的負債を返済した

image link

やっとこのブログを整理した。正直、この技術的負債はずっと溜まってて、見るたびに「次やろう」って言ってたけど、結局何ヶ月も経っちゃった... 本当に先延ばし癖がひどい 😅

きっかけ：警告を見てイライラ

ある日、なんとなく pnpm audit を実行したら、画面に 43個のセキュリティ脆弱性 が表示された。そのうち18個はHigh レベル。もう気分最悪 QQ

ほとんどが間接依存関係の問題だってわかってるけど、あの赤い文字の羅列を見ると、やっぱりモヤモヤする。

他にも、とっくに対処すべきだった問題がいくつかあった：

• 機密情報が丸見え - PostHog Key、Gitalk Secret がそのまま config に書いてあった、やばい
• nuxt.config.ts が肥大化 - なんと235行！何か探すたびにスクロールが大変
• ファイル名のタイポ - error-handler.ts.ts、そう、.ts が2つ。当時何考えてたんだろう 🤦

よし、返済しよう

今回のリファクタリングは主に3つのパートに分かれた：

1. まずパッケージをアップグレード

まず古い依存関係を更新：

アップグレード中に一つハマった：shadcn-docs-nuxt を 1.1.9 にしたらビルドが爆発した。調べたら今の Nuxt 3 との互換性問題だった。仕方なく 1.0.2 に戻した。

アップグレード後、脆弱性は43個から35個に減った。完璧じゃないけど、だいぶマシになった。

2. 機密情報を環境変数に移動

GA、PostHog、Gitalk などの API Key を全部 .env に移して、Nuxt の runtimeConfig で読み込むようにした。これで機密情報はコミットされないし、環境ごとに設定を変えられる。基本中の基本なのに、ずっとやってなかった 🙈

3. 肥大化した config を分割

235行の nuxt.config.ts を見るのが嫌になったので、分割することにした：

config/
├── index.ts    # エクスポート
├── image.ts    # 画像設定
├── nitro.ts    # サーバー設定
└── vite.ts     # ビルド設定

分割後、メインファイルは約100行に。すっきり。

ついでに直した細かいこと

整理してるついでに、他の小さな問題も片付けた：

• lint と typecheck スクリプトを追加 - 今までなかったなんて、どうりでコードがぐちゃぐちゃだったわけだ
• ESLint が Markdown を無視するように - じゃないと偽警告だらけになる
• 522個の lint エラーを自動修正 - --fix 一発で解決、もっと早くやればよかった

整理後の感想

半日くらいかかったけど、本当にやってよかった：

正直、もっと早くやるべきだった。でも人間って「緊急」なことを優先して、「重要だけど緊急じゃない」ことは後回しにしがち。今回の経験で実感した：技術的負債は定期的に返済しないとダメ。

未来の自分へのメモ

最後に自分（とあなた）へのリマインダー：

1. 毎月 pnpm audit を実行 - 問題が山積みになる前に
2. 機密情報は必ず環境変数で - これは譲れない
3. Config が150行超えたら分割 - じゃないとメンテが地獄
4. --fix を活用 - 多くの問題は一発で解決できる

今回の整理はここまで。もしあなたのプロジェクトにも似たような問題があるなら、週末に時間を取って片付けてみて。整理後のスッキリ感、本当に最高だから ✨

質問があればコメントでどうぞ～