Vue.jsを導入してみた #JavaScript

ユアマイスターアドベントカレンダー2018の3日目の記事です。

結論

めっちゃ便利。

導入の背景

元々フロントはjQueryで色々やっているんですが、ajaxで取得したデータをごにょごにょして画面に表示するのが面倒だったので、上手いことデータバインドで表示したいなーと思ったのが最初です。
初期表示時は非表示としたかったため、CSSでdisplay: none;をつけて要素を隠しておく必要もあり、それをjQueryで表示する処理が必要だったりなど、色々気になることがあったことも理由です。
また、そろそろ一度くらいVue.jsに触れてみたいなぁと言う気持ちもあり、と言うかそれが最大の理由だったので、とりあえず導入してみた次第です。
まだあまり使えてはいないのですが、ざっと使ってみた内容を書いてみたいと思います。

ちなみにですが、サクッと使ってみたかったのでVue.jsの公式からJSをダウンロードして使っています。

よかったこと

表示・非表示の制御が簡単

v-ifディレクティブが思っていた以上に便利で、Vue側で定義した変数が変わるたびに表示・非表示を切り替えられるのがとても楽でした。
ajaxで取得したデータの整合性をチェックして、問題がなければある変数を切り替えるだけで要素の表示が可能だったので、

sample.html

<div id="container">
    <div class="hoge">
        <p>hogehoge</p>
    </div>
</div>

<script>
    $(function () {
        if (hoge) {
            $('.fuga').show();
        } else {
            $('.fuga').hide();
        }
    });
</script>

こんな処理が

sample.html

<div id="container">
    <div v-if="showHoge">
        <p>hogehoge</p>
    </div>
</div>

<script>
    new Vue({
        el: '#container',
        data: {
            showHoge: false
        }
    });
</script>

こんな感じで書けます。
showHogeがtrueになれば要素が表示され、falseであれば非表示です。
また、非表示時はレンダリングされないので、display: none;のようにdevToolで表示できてしまう、と言うこともありません。

計算処理が楽

データバインディングが使えるので、画面の表示値を簡単に書き換えることができます。
表示中の要素から金額部分を抜き出して、それを数値型に変換した後に計算をし、再度画面にセットし直す、が下のように書けます。

sample.html

<div id="container">
    <div>
        <p>{{price}}</p>
    </div>
    <button type="button" @click="addPrice">add</button>
</div>

<script>
    new Vue({
        el: '#container',
        data: {
            price: 0
        },
        methods: {
            addPrice: function () {
                this.price += 1000;
            }
        }
    });
</script>

もし、データは数値型で持ちたいけど表示はカンマで区切りたい、みたいな場合はHTMLの表示部分で
<p>{{price.toLocaleString()}}</p>
と書くとカンマ区切りで表示できます。
表示部分でもJSのメソッドを呼び出すことができるので、最終的に見せたい値はここで加工することも可能です。

よくなかったこと

既存要素のデータを取得できない

jQueryでよくやる
$('.hoge').text()
みたいな書き方はできません。
(できるのかもしれませんがやったことないので分かりません)
データを取りたい時は生のJSで
document.getElementById('hoge').innerText;
みたいなことを書かなければいけないのでちょっと手間です。
レンダリング時にv-bindなどを使ってバインドしておけばいいだけではありますが、jQueryに慣れているとちょっと戸惑いがちな部分だなと思いました。

単体でのアニメーションができない

jQueryだと.fadeIn(200)とかで簡単にアニメーションできましたが、Vue.jsではCSSと組み合わせないとアニメーションできません。
そんな難しいことではないのですが、jQueryでのアニメーションに慣れていると「あっ」となることがあったりするので、ちょっと不便かなーと。
慣れの問題もあるので個人的感想ですが。

結局

やっぱりデータバインドがすごく便利でした。
いちいち要素指定してデータ拾ってきて加工して、が不要になるので、それだけでもう大きなメリットかなと思います。
しばらくはjQueryと共存する予定ですが(ajaxもjQuery依存なので)、いずれはvue-cliを導入してコンパイルしたものを使う、と言う形にしていきたいと思っています。