Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Viteに移行した話とVue-demiでVue2と3両対応のコンポーネントを作った話

 Viteに移行した話とVue-demiでVue2と3両対応のコンポーネントを作った話

M.Yoshikawa

October 16, 2022
Tweet

Other Decks in Programming

Transcript

  1. Composition APIへの移行  早くなったのは良かったのですが、その直後デフォルトでインストールされる Vueが3になったことで、早々に困ったことになりました。  UIフレームワークにVuetifyとBootstrapVueを採用していましたが、Vuetifyはα 版、BootstrapVueは開発計画どころか、Bootstrap5にも対応していない状態で あり、Vue3に移行するのは時期尚早であるというのと、Vue3からは今までの書 き方が使えずComposition

    APIになるということでそれまで作っていたvue- property-decoratorが実質使えなくなる(可能性が高い)ということでした。  そこで出した結論は、当面Vue2を使いつつもComposition APIに移行し、各種UI フレームワークが対応次第Vue3に移行するということでした。  また、同時期に発見したVue demiでVue2/Vue3両対応のプログラムが書けると いうことと、そのライブラリがComposition API前提だったというのも後押しし ました。
  2. Vue-demiで作るvue-codemirror6コン ポーネント  しかし、vue-codemirrorは当時長らくメンテされておらず、最新の CodeMirror6 に対応していませんでした。  当時作っていたVueプロダクトで、直接APIを叩く形でCodeMirror6を使ってお り、自力でラッパーを作っていたのでこれを外部化しようとしていたところ Vue-demiという便利なライブラリがあることに気づきました。

     Vue-demiは、Vue2とVue3両対応のライブラリをビルドするためのラッパーラ イブラリです。  初期バージョンはVue2向けにpropertey-decoratorで作っていましたが、vue- demiに対応させるためプロダクト側のComposition API化と並行して作業を行 いました。  以降、これ以外のコンポーネントでもComposition API化と疎結合化をすすめ、 コンポーネントの開発はVue3で行い、それをVueDemiでVue2に移植するという 方針で行っています。
  3. 所感  CompositionAPIへの移行はコツを掴んでしまえばあっという間に終わりました。  今年の2月から3ヶ月かけてすべてのプロダクトの移行が完了しました。  試しにVue3で動かしてみましたが、UIライブラリ(Vuetify3 v3beta)の実装状況に 起因するエラー以外はすんなり動きそうでした。 

    ただ、説明サイトを見るだけだとやっぱりメリットを見出すのは難しいです。実際 手を動かして作業することで気がつくことが多いです。  少なくとも2013年頃から自分は、言語を問わずコード整形ツールを活用する習慣が あり、Vueを触った当初からeslintやprettierの設定をキツ目にしていました。  また、たまたま自動インストールされたsonarlintがvueのtypescriptにも作用したた めトラブルが少なかったというのも考えられます。(それでも、v-modelに.sync修 飾子がついている前提で使用するライブラリがあって悩んだことがありますが)
  4. 作ったミドルウェアの紹介  vite-vue2-starter Viteでvue2を使うための最小限のライブラリを集めたスターターテンプレート  vite-vue2-vuetify-ts-starter 上記のテンプレートにVuetifyを追加したもの  @logue/vue2-helpers Vue2でVue-routerやVuexなどをVue3風のComposition

    APIで書くためのラッ パーライブラリ。これのフォーク版を作り、VuetifyとVue3のteleportに対応さ せた。  vue-inertia-composable Laravel9用Laravel BreezeをVue2でも使えるようにするためのミドルウェア。