SEN PRODUCT BLOG

千株式会社のプロダクト開発メンバーによるブログ

Node.jsとViteのバージョンアップに挑戦して遭遇した強敵

アドベントカレンダー2025

こんにちは。千株式会社のぶりおです この記事はSEN Advent Calendar 2025の15日目の記事になります。 今回はメンテナンスされていなかったリポジトリでNode.jsやViteをバージョンアップした時の苦労話について書こうと思います。

リポジトリのフロントエンドの課題

今回私は、フロントエンドの改修プロジェクトを担当します。 ですが、そのリポジトリは十分にメンテナンスされているとは言えず、以下のような大きな二つの課題を抱えていました。

  • Node.js v16
    • とっくのとうにEOLを迎えているのですが、使い続けていました。
  • Vite v3
    • こちらも古く、改善する必要がありました。

新たなプロジェクトを円滑に行い少しでも早く価値を届けられるようにするためにも、リポジトリの改善に着手することにしました。

JestをVitestに移行するだけで済まそうとしてた

上記のような課題はありつつも、最初からNode.jsやViteを上げようとは考えていませんでした。

まずは、今後フロントエンドのテストを増やしていくことを見越して、テスト実行が早くなるVitestへの移行だけで済ませようとしていました。元々Jestを使っていたので、互換性があるVitestなら移行は容易だろうと考えていました。

しかし現実は甘くなかったです。Vitestでテストを通すにはプラグインなどのバージョンアップが必要で、その結果ビルドの成果物に差分が出てしまいました。「ビルドの成果物が変化していないから安全」という確認ができなくなってしまったのです。

そこで先輩から、「バージョンはある程度最新の方が安心だし、バージョンを上げ、動作確認をして安全を保証するのもありだと思う」というような助言もあり、方針転換しました。今後大きな改修も控えているし、いっそのことメンテされていなかったNode.jsやViteも上げてリポジトリ全体を改善しよう、となりました。

実際に上げた

実際にViteやNode.jsを上げることはできました。 Node.jsはv16からLTSであるv24に、Viteはv3だったものをv6にすることができました。 ここからが苦労その一でした。

苦労その一:動作確認の負荷が高い

プロダクトのCUJが作成されておらず、動作確認をしづらい

CUJ（Critical User Journey）：ユーザーが重要な目標を達成するために行う一連の流れ

動作確認をするためのCUJなどは作成されておらず、このままだと全機能を見ることになりそうでした。

途方に暮れてSlackを巡回していると、他プロダクトでQAチームが機能一覧のドキュメントを共有しているのを発見。のぞいてみると、奇跡的に今回のプロダクトの機能一覧もありました！！！！！

しかし、機能一覧があっても全機能を見ることには変わりなく、負担は高いままです。

そこで「バージョンアップ対応用のCUJ」を作ることにしました。機能が停止した時のユーザー影響度や、不具合時にサービス利用を妨げる度合いで優先度をつけていきました。

作成したCUJ
バージョンアップ対応用のCUJができたことで、優先度の高い機能から動作確認を進められるようになりました。この過程で知らなかった機能や細かい仕様にも触れられて、良い経験になったと思います。

結果として、不具合が発生しているところを発見することができたのですが、これが苦労その二でした。

苦労その二:開発当時のものが負債になる

メンテナンスされてないUIライブラリで不具合が引き起こされる

動作確認の結果、DevExtreme Reactという近年メンテナンスされていないUIライブラリで不具合が発生していることがわかりました。

  • 不具合①：古いReactのコードによるクラッシュ

    _jsx is not definedエラーが発生してアプリがクラッシュする問題です。

    詳しく調査できていないですが、Vite 6と@vitejs/plugin-react v2が想定しているesbuildのバージョンにミスマッチがあり、DevExtreme Reactの古い書き方のコードを変換する際に問題が発生していたと考えられます。

    解決策は、@vitejs/plugin-reactをv3にアップグレードすることでした。最終的には、Viteのバージョンアップに追随する形で、v5まで上げたことで、バージョンのミスマッチもなく正常に動くようになりました。

  • 不具合②：曜日が二重表示

    クラッシュしなくなり、これでリリースできる！と思った矢先、別の不具合を発見しました。

    二重になった曜日たち

    DevExtreme Reactのカレンダーコンポーネントで、曜日を日本語化するために独自実装が施されていたのですが、それが原因で曜日が二重に表示されてしまっていました。

    こちらはDevExtreme React側の言語変更ドキュメントを探し出し、見よう見まねで公式の方法に置き換えることで解決できました。

    当時は問題なく動いていたし、このドキュメントがなかった可能性もありますが負債になってしまっていたのでここで改善することができました。

最後に

メンテナンスされていないリポジトリの改善に挑戦することで、以下のような学びがありました。

  • CUJの重要性: 今回たまたまQAチームの資料があって助かりましたが、なければ本当に途方に暮れていたと思います。普段から「このサービスで絶対に動いてほしい機能」を整理しておくことの大切さを痛感しました。
  • 定期的なアップデート: 「動いているから触らない」はいつか大きな負債になる。小さな更新を継続的に行うことの重要性を身をもって学びました。

開発できているから、動いているから良いではなく、他の人が触る時のことや、今後のことを考え、より良いものを残していけるように精進したいと思いました。 今回の挑戦は苦労しましたが、とてもいい経験になりました。これからも挑戦し続け、学びを得られるようにしていきたいと思います！

SEN Advent Calendar 2025 16日目となる明日はndaDayoさんです。どうぞお楽しみに！