読者です 読者をやめる 読者になる 読者になる

kitak.blog

Kみたいなエンジニアになりたいブログ

Vue v1.x から v2.x へアップデートした

Vue v1.0.15 から最新の v2.2.4 へアップデートしたのでメモ。かかった時間は2日程度だった(ついでにやった Browserify から Webpack への移行も含む)。
全体を通して、内部実装は大きく変わったが API 自体は v1 とある程度互換性があるので、vue-migration-helper の指示通りに変更して、テンプレートのエラー(正確にはコンパイル後の render 関数のエラー)を直せば、後はそのまま動くという印象。

手順

vue-migration-helper の警告メッセージに対応する

自分が対応した警告メッセージは以下のもの。大体は、エディタの置換機能で対応することができた。

transition コンポーネントをラップするコンポーネント

コンポーネントオプション

export default {
    name: 'foo-transition',
    props: [],
    methods: {
        enter(el, done) {
           // ...
        },
        enterCancelled(el) {
           // ...
        },
        leave(el, done) {
           // ...
        },
        leaveCancelled(el) {
           // ...
        }
    }
};

テンプレート

<transition
    v-on:enter="enter"
    v-on:enter-cancelled="enterCancelled"
    v-on:leave="leave"
    v-on:leave-cancelled="leaveCancelled"
    v-bind:css="false"
>
    <slot></slot>
</transition>

使うときは以下のように。

<foo-transition>
  <p v-if="bar">Hi!</p>
</foo-transition>

エラーをひたすら直す

一通りページを見て、発生しているエラーを片っ端から直した。
内部実装が大きく変わったので、以前はエラーにならなかった未定義のプロパティ・メソッドへの参照がエラーになった。
null チェックも厳しく行う必要があった。以前は以下のテンプレートで問題なかったが、

<div v-if="foo">
  <p v-if="foo.bar"></p>
</div>

このように書き直す必要があった。

<div v-if="foo">
  <p v-if="foo && foo.bar"></p>
</div>

v-if や v-show でロジックがテンプレートに漏れがちなので、メソッドや算出プロパティに置き換える良い機会なのかもしれない。

その他、あらかたエラーを直した後に Integration 環境に deploy して、社内の JavaScript のエラー集約の仕組み(Bugsnag や Newrelic にもあるやつ)でエラーが起きていないか確認した。
また、QA/テストエンジニアの人にリグレッションテストを依頼して、一通り問題がないか確認してもらった。

Vue(ライブラリ)のバージョンアップのために普段気をつけていること・思っていること

普段、なにとなく意識していることを言語化しておきます。

  • (当たり前な気がするが)ガイドや API ドキュメントをよく読んで、その API が提供されている理由を理解した上で使う。
    • たまたま動くからといって、意図されていない形では使わない。真っ先に壊れる
    • Vue.nextTick や setTimeout(fn, 0) で実行を遅らせて動いているコードも壊れやすい
  • 内部実装に近いフック・フラグ・API の使用をできるだけ避ける
    • 今回の v1 → v2 のように内部の構造が変わると影響を大きく受ける
    • ガイドや API ドキュメントを読むと内部実装に近い API は、プラグインやライブラリ開発者のためのもので一般的に使用を推奨していない記述(あるいは雰囲気)がある
  • ちょっとした便利なオプション・エッジケースで必要になるオプションも避ける
    • メジャーバージョンアップに伴う整理で廃止される可能性が高い
  • 公式ではない Vue に依存した UI コンポーネントライブラリもなるだけ避ける
    • よほど広く使われているものでなければ、メンテナンスされない可能性が高い(GitHub の Star の数や Contributers の数で判断)
    • コードを読んで、4, 500 行以下であれば、実装を参考にさせてもらい自分で書く
    • 開発スケジュールとの兼ね合いで使う場合は、最終的に自分で引き受けるぐらいの気持ちで使う
  • ビルドツール・モジュールバンドラ等と強く依存する機能の使用には慎重になる
    • v2 だと Webpack と連携する機能が次々と追加されていて、使うメリットもあるが、Webpack に依存する分、Webpack が捨てづらくなるデメリットもあることを理解する
  • 悩んだら「置換や書き捨てのスクリプトでなんとかできるか」で思考実験する
  • 悩んだら「他のツール・ライブラリで置き換えることができるか」で思考実験する

こんなところです。