はじめに
@dyoshikawaです。
2025年11月、zenn-editorの依存パッケージを全面的に最新化しました。必要なことと重々承知しつつ、どうしてもサービス本体の機能追加・改善にリソースをとられてなかなか手が回っていなかった……のですが、この度ようやく実施することができました。
Claude Codeの力を借りることでだいぶ楽に進められたので、そのあたりも含めて実施内容を紹介していきます。
とりあえずClaude Codeに好きに作業させてみる
まず、Claude Codeがパッケージ刷新にどこまで使えるかわからなかったので、効果検証として雑にアップデート作業を依頼してみました。
結果、ルートの package.json を最新化し、それに伴って発生するエラーをClaude自身で解決できました。そして packages/zenn-cli/package.json の最新化もエラー解消含めてできたことを確認できたので、「これはいけそうだな」ということでいったんPRを閉じました。
Claude Code活用のためのセットアップ
本格作業に入る前に、Claude Codeが効率的に作業できる環境を整えました。
まずはDevContainersの整備です。コンテナ上でClaude Codeを動かすことでホスト環境を荒らされることがなくなるので、YOLOに作業を任せやすくなります。設定ファイル群はclaude-code/.devcontainerをベースにしています。
また、ルールファイルも整備し、simple-git-hooks + secretlintでシークレット漏洩事故を防止する仕組みも入れました。zenn-editorはOSSなので機密情報を扱うことは基本的にありませんが、念の為。
パッケージで区切りながら最新化を実施
zenn-editorの package.json は
package.jsonpackages/zenn-cli/package.jsonpackages/zenn-content-css/package.jsonpackages/zenn-embed-elements/package.jsonpackages/zenn-markdown-html/package.jsonpackages/zenn-model/package.json
があります。
全部一気に上げると、「動いているが理解不能」な状態になってしまうので、各 package.json でPRを分けて作業しました。もちろんパッケージ更新に伴って変更されたコードのチェックも行います。
Vitest V4 Migrationなど、Claudeのカットオフされた知識で対応できないものもありましたが、ドキュメントのURLを渡したりContext7 MCPを使うことで対応ができました。
一通りアップデートが完了し、自動テストがPASSし、手元での動作確認も問題なしと判断してリリースしました。
最新化に伴うバグを報告いただいたので、修正する
最新化の1次リリース後、ユーザーからバグ報告をいただいたため 🙏 修正を行いました。
ホットリロードが効かなくなった
v0.2.6以降、zenn preview実行中のホットリロードが機能しなくなったという報告がありました。
原因はchokidar v4でglobパターンのサポートが削除されていたことを見逃していたことです。
Sep 2024 update: v4 is out! It decreases dependency count from 13 to 1, removes support for globs...
chokidar.watch()に渡すパスをglobパターンから個別のディレクトリパス配列に変更することで修正しました。
Windowsで動かなくなった
Windows環境で zenn init がNode.jsの例外で落ちるという報告がありました。
Zennチームエンジニアは全員Mac端末のため、GitHub ActionsのWindows環境を用いて再現を確認しました。
原因は open パッケージで、バンドルせずに外部化することでWindows環境の動作も解決しました。また、この機会に、簡易的なものではありますが、Linux・Windows環境においてzenn-cliをE2EテストするGitHub Actions Workflowも構成しました。
なお、そもそもバンドルして配布するとパッケージの利用者側で依存関係をコントロールできなくなる（ npm audit fix などでの脆弱性対応が困難になる）ため、バンドルせずに配布した方が良いのではという議論もあります。今回は依存関係の最新化というスコープに集中するため、この点については見送りました。今後の課題として検討していきます。
最新化で得られた成果
Vulnerabilityが大幅に減少
依存関係の最新化により、 pnpm audit で検出されるVulnerability警告が大幅に減少しました。
v0.2.3:
63 vulnerabilities found
Severity: 11 low | 30 moderate | 18 high | 4 critical
最新:
9 vulnerabilities found
Severity: 5 moderate | 4 high
（上記いずれも2025/12/8に実施）
ビルド時間を79.4%高速化（局所的に）
基本、パッケージの最新化だけをスコープとしていましたが、リビルド+動作検証を繰り返す中でWebpackのビルドに待たされる時間がどうしても気になりました。
そこでWebpack互換性の高さを謳うRspackへの移行を行いました。ほとんど設定を変えることなく動作したので助かりました。
目当てのビルド時間については12.43秒から2.56秒と、79.4%の短縮になりました。
Node.js, pnpm, lerna-liteをアップデート + OIDC Trusted Publishing設定
pnpmとlernaを最新化したことで、OIDC Trusted Publishingが使用可能になったため、npm token運用をやめて移行しました。
これにより、npm publishがより安全になります。この点は次の記事が参考になります。
注意点として、GitHub OIDC Publishingでは1ファイルしかワークフローファイルを指定できないようです。zenn-editorではlatestとcanaryのリリースを publish-latest.yml と publish-canary.yml に分けていたのですが、これらを統合し、単一の publish.yml に一本化しました。
mainブランチへのpushでlatest版、canaryブランチへのpushでcanary版がpublishされます。
今後のためにdependabot.ymlを整備
今回の依存関係最新化を踏まえ、今後は定期的にアップデートが行われるよう dependabot.yml を整備しました。これにより、依存パッケージの更新PRが自動的に作成されるようになります。
おわりに
zenn-editorの依存パッケージ最新化について紹介しました。
Claude Codeを活用することで、各パッケージのBreaking Changesの調査やコード修正をかなり効率的に進めることができました。ユーザーからのバグ報告で発覚した問題もありましたが、今回に関しては手動で作業しても同じ結果だったと思います。Windowsの動作確認についてはCIによるチェックを設けることができたので、恒久的な改善に繋げられたと考えています。
タスクの切れ目を見てzenn-vscode-extensionの依存関係も最新化することも予定しています。
zenn-cliをお使いの方は、ぜひ最新版へのアップデートをお願いします。
Discussion