Vue.jsハンズオンに参加してきた


logo

渋谷のDeNAヒカリエオフィスで開催されたVue.jsではじめるMVVM入門 ハンズオン勉強会に参加してきました。

TL上でちょくちょく使っている人が見受けられるVue.jsです。
angularのようなフルスタックのフレームワークではなく、MVVMのデータバインドに特化したライブラリという位置づけです。

依存性が少ないライブラリなので、jQueryと併用しやすく、jQueryの既存のコンポーネントを使ったまま、それを拡張していけるというのがメリットに感じました。

(AngularとかReact-reduxだとjQueryの遺産を捨て去る覚悟が必要です。共存させるといろいろ悲しいことが起こりますが、完全に捨てされずに悲しいことになっている現場も多いです。。。)
もちろん、「DOM操作はjQueryで行うけどデータの受け渡しはVueのコードで行えよ!」というメンバーへの周知徹底は必要ですが。

似たようなMVVMライブラリとしてknockout.jsがありますが、Vueのほうが後発なため過去の遺産を捨て去ってシンプルにされています。

参考:
日本語公式 https://jp.vuejs.org/ (日本語の公式があるのも日本人の学習コストを下げていていい感じですね。エンジニアとしてはもちろん英語の原典に触れられたほうがいいですが)

Qiita Vue.js概要

作ったTODOアプリケーション

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
    .completed{
       text-decoration:line-through;
       color:gray;
     }
    </style>
    <title>Vue handson</title>
</head>
<body>
<h1>Todo application</h1>
<div id="todo-app">
    <input placeholder="please input your task..." v-model="newTask">
    <button v-on:click="addTask">追加</button>

    <hr />
    <ul>
        <li v-for="task in tasks">
            <input type="checkbox" v-model="task.completed">
            <span v-bind:class="{'completed':task.completed}">{{task.name}}</span>
            <button v-on:click="removeTask($index)">削除</button>
        </li>
    </ul>

</div>

<script src="lib/vue/dist/vue.min.js"></script>
<script src="main.js"></script>
</body>
</html>

new Vue({
  el: '#todo-app',
  data: {
    newTask: '',
    tasks: [{
      name: 'hoge',
      completed: false
    }]
  },
  methods: {
    addTask: function () {
      if (this.newTask === '') {
        return;
      }
      this.tasks.push({
        name: this.newTask,
        completed: false
      });
    },
    removeTask: function ($index) {
      this.tasks.$remove(this.tasks[$index]);
    }
  }
});