【Vue.js】Vue Fes Japan 2023 での学び ~EOL対応の鍵は小さく始めること~

この記事について

今回はVue Fes Japan 2023に参加したので、そこで得たものについて書こうと思います。最近Vue3移行をチームで実施したので、その観点で学んだことを書こうと思います。

先に要点を３つ

• どの企業もVue3移行には苦しめられており、企業ごとに工夫しながら、移行作業を進めている
• 破壊的変更が加わっているVuetifyの代替ライブラリとして、Prime Vueというライブラリが紹介されていた
• 小さく始めることは大事

どの企業もVue3移行には苦しめられており、企業ごとに工夫しながら、移行作業を進めている

弁護士ドットコム株式会社 クラウドサインの事例

弁護士ドットコム株式会社 のクラウドサインというプロダクトではVue2.7を使用しているそうです。現在Vue3移行に向けて少しずつ進めているようです。まだアップデートしていない理由としてはビジネス面、技術面の問題があるからのようです。特に技術面の問題の中でも@vue/composition-apiを取り上げていました。

• Vue2.6ではcomposition-apiを使うために@vue/composition-apiを使う必要があるが、Vue2.7以降は@vue/composition-apiを剥がす必要がある
• @vue/composition-apiを使用したファイルは900ファイル以上で、１度に剥がすと特大のマージリクエストができてしまい、デグレなどの懸念点が多い

上記の観点から、変更を極小化するためのモジュールを作成しました。 詳しく方法は走りながらエンジンを交換する大規模プロダクトを成長させつつVue3にするには【クラウドサイン（弁護士ドットコム株式会社）篠田 貴大】をご覧ください。

その結果、差分を５ファイルにした状態でVue2.7に移行することができたようです。 この方法はVue2.6からVue3系にアップデートしようとしているチームは活用できそうだなと感じました。

メドピア株式会社 の事例

メドピア株式会社では複数のプロダクトを開発しており、それぞれ状況が違うようです。そのため、プロダクトにあった方法で移行作業を進めていました。 - MedPeerというプロダクトではeslintの設定にVue２系を排除するルールを追加し、Vue2の記述を排除した - ヤクメド遠いうプロダクトでは、Vue2系とVue3系を共存させ、徐々に移行を進めていった

詳しく方法はVue 2のEOLまで二ヶ月ですが進捗どうですか？【メドピア株式会社 小林和弘】をご覧ください。

破壊的変更が加わっているVuetifyの代替ライブラリとして、Prime Vueというライブラリが紹介されていた

• オープニングトークでは、Evan YouさんがVue3の開発に関する総評を述べていました
  • mistake
    • １度に全てのものを置き換えようとしたこと
    • バージョンアップにより使えなくなるライブラリが多数あること
    • 一緒にすべてをリリースしてしまったこと
  • right
    • Typescriptへの親和性を高めたこと
    • Composition APIを導入したこと
    • Vite やVolarを作成したこと

今後は破壊的変更をしないような仕組みを作ってバージョンアップを進めるとのことでした。 中でも興味を持ったのがPrime Vueというライブラリです。The Most Complete UI Suite for Vue.jsです。ドキュメントも丁寧にまとまっています。使い方はVuetifyとそこまで大差な印象です。

少し手間だなと思うのは、コンポーネントの利用するには使用したいコンポーネントを明示的にインポートして登録する必要があることです。

• アプリケーション全体で使用する場合

import Button from "primevue/Button" // 使用するコンポーネントをインポート
const app = createApp(App)

app.use(PrimeVue, { locale: ja })
app.component("Button", Button) // コンポーネントを登録
app.mount("#app")

• 個別のコンポーネントで使用する場合

<script setup lang="ts">
import { defineComponent } from "vue"
import InputText from "primevue/Button" // 使用するコンポーネントをインポート
</script>

<template>
    <Button />
</template>

以前、UIライブラリ】Vuetify3 の対応追いついてないけどどうする？という記事でElement Plusを紹介しましたが、そちらよりも日本人が使ってそうなので、もしVuetifyの対応が辛く、置き換えたい場合は検討するのもありかと思います。

小さく始めることは大事

今回印象に残った登壇者に共通していたのは、小さく始めることが大事ということです。Evan YouさんがVue3の開発において、１度に全てのものを置き換えようとしたことを失敗だったと述べていました。弁護士ドットコム株式会社、メドピア株式会社の方々もデグレを最小限にするように工夫しながら、少しずつVue3への移行作業を進めていました。

Vue3への移行の鍵は、作業を因数分解し、小さく始めることだと認識しました

最後に

初めての社外オフラインテックイベントでしたが、とても勉強になりました。得たことを業務に活用していきたいと思います。