今年Vueにお世話になったお話

メリークリスマス。
Vue.js Advent Clendar の24日目です。

本来ならVueでDnDを作ってネタにしようと考えていたのですが、
心が折れたのでプロジェクトでVueにお世話になった話をしたいとも思います。

特に具体的なプラクティスがあるわけでもなく、つらつらと思い出したことを書いていきます。
御免なさい。

きっかけ

今年は仕事でプログラマとして初めて一つのパッケージを１から作る、というチャレンジがありました。
その中で、一部複雑なステートの管理やインターフェースを必要とする機能があり、JSのフレームワークを導入しよう！と決めました。

技術選定

もともと一人でスタートしたプロジェクトですが、のちのち、人が増えたり
自分が抜けてしまうことも考えられたので引き継ぎできるか？という観点を重視しました。

周りにフロントを主戦場とするのが自分一人しかいなかったため

• ビルドツールを使わない
• 検索で使える情報が引っかかる

を考えなければいけませんでした。

Npm周りのエコシスタム、GulpやWebpackみたいなものは本当に便利です、便利ですが、
頻繁なバージョンアップやベストプラクティスの変化などの理由から、
アンテナを常に張っておかなければプロジェクトのアキレス腱になる可能性が高いです。
なのでこれらのツールの使用を前提にしているようなものはNGとしました。

React は別にCDNファイルからライブラ入りを読み込んでJSXも使わずに書けばいいのですが、
コミュニティやネットに転がっている情報は明らかにそれらを前提にしていたのでパスしました。

結果として候補としたのは下の二つです。

• Vue
• knockout.js

どちらもメジャーバージョンが出てそれなりにAPIが固まっており、
何より、しっかりとしたドキュメントが用意されていて、それを入ればOKというのが魅力的でした。

特にVueは日本語ドキュメントがあるのが嬉しいですね。（結局原文を読みにいったりもしましたが）

またどちらも学習コストが少なめで、サンプルコードを見て30分程度でそれっぽいものを書き出すことができます。
１枚のHTMLとJavaScriptでライトに書かれているサンプルコードもネットにいっぱい転がっているため、学習自体もやりやすい、という印象でした。

今のいわゆる「流行り」からは大きくかけ離れた技術選定を行ったと思います。
自分でも思うことはたくさんあるのですが、チームの中でビジネスが回る方がはるかに重要でした。

プロトタイピング

実際に二つのFWから一つ選ぶにあたりプロトタイプを繰り返しました。
書いた感じとしてはVueの方が後発なだけあり、書きやすい印象があったのですが、
knockout.jsは枯れていると感じたので二つをちゃんと検証することにしました。

また、

ドラッグ&ドロップ
（パレットからアイテムをドラッグして特定のエリアにドロップしてクローンみたいなややこしいことをやる）

を実装しなければならなかっため、それを実現するライブラリとセットで検証しました。
ドラッグ&ドロップを実現するライブラリとして

• jQueryUI
• Sortable.js

がメジャーどころかなと思います。非常に機能が豊富で困ることはないと思います。

いったん、

• knockout.js + jQueryUI

に決まりかけたのですが、jQueryUIにはMac Safariで座標計算がバグるという致命的な問題を抱えており、オジャンとなってしまいました。

結局あーだーこーだを繰り返して

• Vue + Sortable.js ( vue-sortable )

に決まりました。
（結局この組み合わせでも不具合があり、vue-sortableには手を入れる羽目になりました）

ちなみに、一時期フルスクラッチでドラッグアンドドラッグを頑張りましたが、
データのやり取りが整理しきれずに挫折しました。ｼｸｼｸ

実装してみて

データバインディング楽しい！

が一番の感想ですね。2016年に何言ってんだって話ですけど。
jQueryで頑張ってた頃には戻れません。

複雑なデータのやり取りも、とりあえずFluxぽくrootのコンポーネントに処理を集めるようにすれば問題ありません。
大規模アプリケーション向けに vuex というものもあるそうですが、
SPAにこだわらなければ必要ないのでは？と思いました。

またバリデーションで使った vue-validator もドキュメントが非常に整っていて助かりました。

Vueの1.X系はDOMの管理をそこまできっちりやってないため、所々雑にjQueryを入れてっても問題なしです。

使ったvue-sortableもほぼsortable.jsの初期化くらいしかやってないので
ソースコードも こんだけ です.

他案件での利用

学習コストｶﾞｰ、学習コストｶﾞｰと言って思い切って入れて見たVueですが、それを実証するために
新人のAくん（フロント経験なし）に他案件で使ってもらうことにしました。

見積もり計算用のインフェース実装で、選択肢によって動的に
見積もり金額が変わるというコンポーネントを作ってもらいました。

結果として０スタートで２〜3日で無事に完成しました。
ドキュメントが手厚かったので良かったのかな。

Vueは学習コストが低い をちゃんと実証できて安心です。

今後

Vueに散々お世話になっておいてアレですが、来年からはReactをがっつりやって行きたいと思っています。
しばらくVueを触ることはないと思いますが、

• 導入障壁の低さ
• 小規模開発スピード

については他フレーワークから抜きん出て優れていると思います。

2がリリースされてVirtual DOMが導入されたりとどんどん進化しているみたいです。
いつか出戻りでお世話になることがあるかも、なんて思っています。