[株式会社ventus　加古氏]エクスペリエンスを損なわないフロントエンドの改善 #Webフロントエンドリプレイス

加古氏：
早速ですが、私たちのサービス「ORICAL」を紹介させていただきます。これは電子トレーディングカードをコレクションするサービスです。

ただ単にカードを集めるだけではなく、様々なファン活動と結びつけています。例えば、プロ野球の試合観戦で特別なカードを獲得できたり、試合の結果を予想して当てると報酬がもらえるなど、ファン活動を全面的にサポートするアプリとして開発しています。

Nuxt2からNuxt3へのアップデートを実施

技術面については、私たちはNuxtを使って開発を行っており、現在Nuxt2からNuxt3へのアップデートを進行中です。Nuxt3には大きな違いが2つあります。一つは「Vue Composition API」が標準で搭載されており、これにより開発体験が向上します。

もう一つはパフォーマンスの向上で、ビルド時間とサーバーの実行速度が改善される点です。私たちはぜひアップデートを行いたいと考えていますが、残念ながら初めの試みは失敗に終わりました。

失敗の経緯は次の通りです。最初にパッケージをアップデートし、その後に発生したエラーを順番に解決しようとしたのですが、エラーの量が膨大で、修正方法もすぐにはわかりませんでした。

特に当時はNuxt3がリリースされたばかりで、検索しても技術的な記事がほとんどなく、英語で情報を探しても見つけることができませんでした。

修正を試みても、それはライブラリの基本的な部分に関わるものが多く、同時にメインブランチでの新機能開発が進行していました。これにより、コンフリクトが発生し、それを解決するためには再び修正を加えなければならないという悪循環に陥りました。新機能の開発が進む中で、状況はより複雑になっていきました。

この経験から学んだ教訓を活かし、我々は新たなアプローチで再挑戦しています。そのためにはまず、失敗からの反省が必要だと考えています。

ベータ版「Vue Composition API」が組み込まれ、大量のエラーが発生

具体的には、私が単純にNuxt2からNuxt3へのアップデートを試みたと言いましたが、それは完全に正確ではありません。確かにNuxt2は使用していましたが、皆さんが想像する一般的なNuxt2の状況とは異なる、特定の条件が関わっていたのです。その条件とは、以下の通りです。

Nuxt2とVue2についてですが、なぜかベータ版の「Vue Composition API」が組み込まれていました。背景としては、「Vue Composition API」が発表された際、私の上司がこの技術に注目したようです。その結果、ベータ版ではあったものの、積極的に取り入れて使用していましたが、これが後に大変な作業を引き起こすことになります。

言いたいことを端的に表現すると、技術間の差異が非常に大きかったのです。

「Vue Composition API」の正式版がリリースされた後も、さらにVue3への移行を試みたところ、大量のエラーに見舞われました。

そして、直せないエラーが続出しました。これらのエラーを解消しない限り、アップデートをメインブランチにマージすることはできません。

その間にも、メインブランチでは新しい開発が進んでおり、進行するうちにコンフリクトが増えていきました。社内のリソースは限られているため、新規機能の開発と並行してアップデート作業を行う中で、ブランチの更新作業は徐々に忘れ去られていきました。

結局、忘れ去られたブランチを掘り起こしたところ、parse.jsの中に「Vue Composition API」のベータバージョンが使用されていたことが明らかになったのです。

私たちが直面した主な問題点を分析した結果、解決策を練ることができました。

特に重大な問題は「メインブランチにマージできない」という点でした。マージがスムーズに行けば、新機能の開発を並行して進めることができるため、非常に望ましい状態です。

マージができない原因は、更新を一度に大量に行おうとするためです。そこで、我々は異なるアプローチを試みることにしました。

具体的には、開発の歴史を遡る作業を行いました。これは単に言い換えると、最初の状態から、Nuxt 3以上へのバージョンアップを段階的に行おうという戦略です。大規模な更新を一度に行うのではなく、小さなステップで進めることにしました。

この手法を取り入れることで、長期的な視点ではありますが、複数のプルリクエストを小さく保つことができ、それによって平行作業が可能となり、スムーズにマージが行えるようになります。これがこの方法の主な利点です。

Composition APIについては、これを使用した経験のある方ならその利便性が理解できるかと思います。ロジックの分離が容易で、管理やテストがしやすくなるなど、多くのメリットがあります。そのため、私たちはこのAPIを安定して使いたいと考えています。

Vue2.6系からVue2.7にも大きなアップデートが必要に

次に、Vue 2.7をVue 2.6系とは別に分けた理由についてですが、Vue 2.6系とVue 2.7系の間には大きな変更があったためです。これらの変更により、アップデート時に従来の機能が動作しなくなる可能性があります。例えば、プロップスの名前がアンダースコアから始まる場合、それが読み込まれなくなるという変更がありました。この変更は私たちにとって大きな影響をもたらしました。

これを修正するには、データの受け渡しに関わる多くの部分を変更する必要があり、結果としてかなりの大幅な変更を要することになります。そこで、これは後回しにするという判断をしました。

さらに残念なことに、Nuxt3へのアップデートを助けるためのライブラリ「Nuxt Bridge」は、Vue 2.6と互換性がなく、Vue 2.7以降とのみ互換性を持っています。つまり、Vue 2.7へのアップデートを経てNuxt Bridgeを使用する必要があります。

現在の進捗状況については、nuxtjs/composition-apiまでアップデートが完了しています。Vue 2.7へのアップデートはまだ進行中で、これを完了させた後に、Nuxt Bridgeを介してNuxt3にアップデートする予定です。

当初のNuxt3へのアップデートは失敗に終わり、そのブランチをマージできず、アップデートは全く進展しませんでした。しかし、新しいアプローチを取った結果、nuxtjs/composition-apiまでのアップデートが可能となりました。これは大きな一歩であり、今回の成功点と考えています。

この方法を用いることで、新規機能の開発を停止することなく、コンフリクトを最小限に抑えながら、新規開発とアップデートの両方を進めることができました。

今後は、Vue 2.7へのアップデートとNuxt3への最終アップデートを継続的に進めていく予定です。

これにて発表を終わります。ご清聴ありがとうございました。

＼株式会社ventusでは、積極的に採用中📣／

株式会社ventusの中途採用・転職・求人情報｜Offers Jobs