Vue.jsを2系にバージョンアップしました 🎉

お初です、エンジニアの大庭です。

最近、コンピテンシークラウドで利用しているVue.jsのバージョンを1系から2系にバージョンアップしました！（やっと）

不慣れなフロントエンドでしかも初めてのVue.jsのバージョンアップだったので、苦労や思いのたけをここに綴りたいところですが書くのがだるい長くなるので簡単にポイントだけを。

やったこと

1. 公式の移行ガイドを熟読

Railsでバージョンアップするとき同様、まずは公式ドキュメントをチェックしました。
公式で日本語の移行ガイドがあるので非常に助かりました！(https://jp.vuejs.org/v2/guide/migration.html)

ドキュメントを読んだ中でかなり影響のありそうなものは下記です。

v-model においてのインライン value 削除

v-model はもはや、 インラインの value 属性を尊重しません。予測可能性のため、それは代わりに、常に Vue インスタンスをデータをソースとして扱います。

v-model-においてのインライン-value-削除

コンピテンシークラウドではRails + Vue.jsの非SPA構成となっているため、画面はRailsのView(Slim)によってHTMLが生成されます。 ですので、編集画面のようなところでこの変更点はかなり影響があります。
これを機に初期値をすベてAPIで取得するように変えるという案もありましたが、今回はvalue属性から初期値を取り出してセットする簡易なMixinを用意し、それで対応できない特殊な画面のみAPIで取得する方針にしました。（通常開発と平行でバージョンアップをするので、なるべく大きく変更しないようにしたかった）

2. 移行ヘルパーの実行を試みる

移行ガイドにもある通り、公式で移行ヘルパーなるものがあります。(https://github.com/vuejs/vue-migration-helper)
しかし、これは素のHTML/JavaScriptを想定したツールです。

Slim/CoffeeScriptであるコンピテンシークラウドではそのまま実行しても引っ掛からないものもあります。
なんとかこの移行ヘルパーを100%実行できるように試行錯誤しましたが、Slimの方は画面のパターンが多すぎて網羅できそうにないので完全にやるのは諦めました。。（この試行錯誤の詳細は別途記事を書こうと思います）

3. 実際に動かしながら修正

移行ヘルパーは正規表現などで静的にチェックしているだけなので、実際に画面を表示してみてその他のエラーや動作しないものを対応します。

2系になったことでエラーになったものや動かなくなったものとして以下があります。

• x-template系のエラー
  • https://qiita.com/kokoe/items/a5f4b950c36bfcd61ad9
    • コンポーネントのテンプレートのルート要素は1つのみ
    • new Vueでマウントしている要素（ルート）の中にテンプレートファイルをいれない
• $('#id').on('click')などが反応しない
  • https://jp.vuejs.org/v2/api/#el

    Vue 1.x とは異なり、マウントされた要素は、全てのケースで Vue によって生成された DOM に置き換えられます。

• カスタムDirective内でのset
  • twoWay: trueがなくなったので
  • http://d.hatena.ne.jp/chi-bd/20161022/1477129270

などなど、色々ありました。

バージョンアップ対応を終えて

リリースギリギリまでドタバタしかなり反省点もあるところですが、2系へなんとかバージョンアップをすることができました。
2系にしたことの嬉しい誤算として、思った以上に表示速度が改善されました。（特に一覧の再検索でリストがごそっと変わるもの）

これから

Vue.jsのバージョンはv2にすることができましたが、まだまだフロントエンドは改善することがたくさんあります。（webpacker、ES6+など）
Railsエンジニアばかりでフロントに詳しい人がいないので四苦八苦することも多いですが、どんどん改善していきたいです。

あしたのチームでは混沌としたフロントエンドを救ってくれるエンジニアを募集しています！

そして、伝説へ・・・

jp.vuejs.org