見出し画像

プロジェクト内ツールの Nuxt3 移行

NAVITIME_Tech

こんにちは、ひよこです。
ナビタイムジャパンの全サービスで共通利用する API 基盤の開発をするプロジェクトに所属していました。

今回は、そのプロジェクト内で利用している社内ツールの Nuxt3 への移行について紹介します。小さな社内ツールを抱えた開発者の方に向けて、フレームワークのバージョンアップの事例をお伝えできればと思います。

Nuxt3 移行の背景と課題

2023年12月末に Vue2 は EOL (End of Life) を迎えました。Nuxt2 も 2024年6月末に EOL を迎える予定です。
新年度を迎えた 2023年4月に移行作業を行うことを決め、9ヶ月程で Nuxt2 から Nuxt3 への移行を完了させました。

Nuxt3 移行の課題は下記の通りでした。

  • EOL までに移行を行う

  • プロジェクトのメイン業務は移行より優先

  • プロジェクトに当該社内ツールのメンテナンスをできる人が少ない (属人化している)

移行の流れ

こちらの資料を参考に移行を進めました。

具体的な流れは下記の通りです。

  1. 新規に Nuxt3 の空のアプリケーションを作成する

  2. 必要そうなライブラリをインストールする

  3. 既存のページを2,3ページ移植しながら、基盤を整える

  4. 残りの既存のページを一気に移植する

今回のツールは、利用は頻繁ではありますが機能追加の頻度が低く、作業期間中に機能追加が必須になる可能性が低かったことから、アプリケーションを新規に作り直すことにしました。まっさらな状態からライブラリをインストールしていったため、依存関係をすっきりした状態に保つことができました。
Axios ではなく fetch API を使うことや、Vuex が標準で入らなくなったといった部分は Nuxt3 の流儀に合わせるようにしました。
特に Vuex については Nuxt2 時代に利用されていたのですが、煩雑な状態管理での利用ではなかったため、パスパラメータの利用と useState の利用に置き換えを行いました。

UI ライブラリは Vuetify を使っていたので移行後もそのまま利用を続けました。Nuxt2 向けと 3 向けでコンポーネント名等に変更があったので移行ガイドを見ながら地道に追従しました。

移行当初は実験的機能の位置付けだった v-data-table が、移行を進めるうちに通常の機能に格上げされたり、不安定な動きが改善されたりと、開発が活発に行われているありがたみを体感することができました。Nuxt3 自体も細かなアップデートが入るので、移行中は時々各種ライブラリのバージョンを最新にするようにしていました。

ぶつかった壁

細かい技術的な壁を1つずつ突破し、各ページで利用されるコンポーネントの移植もほぼ終わり、あとはページの移植をやり切れば…となった時、大きな壁にぶつかっていました。

「このペースでは終わらない」

当初は筆者が1人で移行を進めていました。移植対象の残りページ数、プロジェクトのメイン業務を優先しながら1週間に何ページ移植できるか、完了させたい時期、これらを総合してプロジェクト内で一人体制では無理という判断がされました。そして Nuxt 未経験のメンバーも含め5人体制で進めることになりました。

メンバーが増えてしばらくは環境構築やページの移植をモブプロやもくもく会の形で進めました。もくもく会は名前に反して全然黙々せず「その場で質問が解決できて良い」とメンバーから好評でした。
ページごとに想定難易度をつけ「やさしい」ページから割り当てていったものの、想定外に難しい場合もいくつかあり、メンバーが一人で長時間はまらないうちに拾えたのももくもく会のおかげでした。

ページ量産計画シートの一部

担当の割り当ては最初の数ページだけ行い、後は作業時に各自でページを取っていくというスタイルで進めました。
「プロジェクトのメイン業務は移行より優先」ということで筆者も手を動かせない時期もありましたが、「今週は余裕があったので！」と 最初は Nuxt 未経験だったメンバーが何ページも作業を進めていたという場面もありました。

細かな改善タスクの対応

前項の「終わらない」話と一見矛盾しますが、移行と同時に細かい改善も行いました。メンバーが増えたことで改善を行なっても移行を終えられるようになりました。

  • ツールを利用した後の後続タスクの説明資料へのリンク追加

  • 本番環境に影響する操作の前に警告の表示を追加

  • 全く使われていなかったページの削除

  • などなど

過去にこのツールについて気になることをプロジェクトで洗い出したことがあり、どんな改善をしたいかがタスクとして積まれている状態でした。
事前に洗い出されていたことで、余裕の出たタイミングに少しずつ細かな改善タスクを拾って消化することができました。

移行によってできたこと

EOL 前に Nuxt3 への移行を完了することができました。
これにより各種ライブラリも最新化でき、今後も安心してツールの運用が続けられるようになりました。

細かな改善が入ったことで、将来の新規メンバーもより安心してツールを利用できるようになりました。

さらに、副次的な効果として属人化の解消ができました。
この移行が完了した少し後に筆者は別のプロジェクトに異動しました。筆者一人に属人化していたわけではなかったものの、あのまま1人で進めてしまっていたら…と考えるとゾッとします。プロジェクト全体で待ったをかけてくれたこと、メンバーを増やす決断をしてもらえたこと、一緒に手を動かしてもらえたことに感謝しています。

終わりに

社内ツールのメンテナンスはどうしても後回しになりがちですが、メインの業務をスムーズに進めるためにはメンテナンスが不可欠です。この記事が社内ツールの持続的な運用のヒントになれば幸いです。