イノベーション エンジニアブログ


株式会社イノベーションのエンジニアたちの技術系ブログです


このエントリーをはてなブックマークに追加

jQueryから移行するならVue.jsが良さそう

お久しぶりです、中村です。
いきなりですが、年末にこんなイベントに行ってきました。

【ヒカ☆ラボ】最新フロントエンドフレームワークを利用した開発事例! https://atnd.org/events/83403#

フロントエンドフレームワークがもの凄い勢いで誕生している中、
Angular 2、Vue.js 2、React.jsの3つのフレームワークを導入した貴重なお話を聞いてきました。

主催してくださった レバレジーズさん、登壇者の皆様ありがとうございました!

弊社ではほぼjQueryで開発しており、管理することが難しく(不可能に)なってきたため
移行したいなぁと思っている今日この頃です。

ただ、

・これを選定しておけば間違いないといったフレームワークがない
・学習コストが高い
・いっぺんに移行するにはリスクが高すぎる

といったことを理由に今まで新しいフレームワークに踏み込めていなかったのですが、
イベントに行ってみて「Vue.jsいいんじゃない?」って思ったので少し挑戦してみました。

5分程度でVue.jsの魅力が伝わると思うので、ぜひやって見てください!

Vue.jsいいなと思った所

・少しずつVue.jsに移行できる
・学習コストが低い

ある特定のページだけVue.jsにしてみたり、共存することも可能なため
少しずつ移行していくのに非常に適しているなと。

また学習コストも低いので、新卒エンジニアが多い弊社でも導入出来るんじゃないか。

他のフレームワークとの比較が公式サイトにあるので、詳細はこちらを読んで見てください。 https://jp.vuejs.org/v2/guide/comparison.html

とりあえず動かしてみる

hello.html
<html>
<head>
    <style>
        .error {
            font-size: 10px;
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>{{ message }}</div>
        <input v-model="message"><br>
        <p class="error" v-if="!message">入力してください</p>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
</body>
</html>

たったこれだけでデータバインディングができちゃいます!

簡単に解説

<script src="https://unpkg.com/vue/dist/vue.js"></script>

まずはvue.jsを使うためにファイルをインクルードしておきます。
準備はこれだけ。

<script>
var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})
</script>

「id="app"」の要素内に {{ message }} と記述すれば、初期に「Hello Vue!」と表示されるようになります。
script側はこれだけ。

<input v-model="message">

「v-model」をつかうと、簡単に双方向バインディングが設定できます。
これで入力フォームの内容がそのまま上に表示される訳です。

<p class="error" v-if="!message">入力してください</p>

「v-if」では、内容がtrueの場合のみ、その要素を追加してくれます。
ここでは「message」がnullの場合のみ追加され、それ以外は<p>タグが存在しません。

ちなみに「v-if」の代わりに「v-show」を使っても見た目は同じですが、
messageがnullで無い場合にも要素が存在します。
ただし「style="display: none;"」となることで、非表示になるという違いがあります。

感想

今回と同じような記述をすることで、簡単にEFO機能(エントリーフォーム最適化)が実装できそうだと感じました。
またAPI経由で取得してきたデータをpushするだけで表示が変わるので、
記述が少なくなりそうでいいですね!もっと使ってみようと思います。

まぁIE8以下対応していないので、 ITトレンドには導入できないんですけどね。。。
交渉してみよっと。

こちらからは以上です!