ゆとりエンジニア

Vue.js で遊ぶ 1日目

Vue.js で遊ぶ 1日目

Vue.js で小規模〜中規模アプリケーションを作るまでのログ

お勉強なので,いきなりアプリ完成を目指すのではなく,適当な単位に区切って段階的に理解していく

開始時点の能力

  • HTML, CSS, JS は雰囲気で書いている
  • JS を使ったリッチなアプリの開発経験はない
  • browserify? React? なんだそれは…

Installation

Vue.js 2.0 のインストールガイド を参考に進む.

Vue.js は ECMASCript 5 の機能を活用するため,IE8 以下はサポートしていないようだ. そんなブラウザは隕石が降ってもいいだろう.

ECMAScript 5 については,ECMA-262 の 5th edition を見れば良い.

インストールガイドによると,スタンドアローンと,NPM の2つの方法があるようだ. いくつかの違いがあるが,template compiler の存在が大きな違いらしい. そんなのはとりあえずいいので,早く Vue.js が使いたいので CDN (スタンドアローン)を使うことにする.

Introduction

スタンドアローン版を使った Example が大量に乗っているので,そのまま動かしてみる.

Hello, Vuejs

次の例は,ただ body 要素に Hello,Vue.js! を埋め込む例だ.

<html>
  <head>
    <title>Hello, World.</title>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>
  </body>
  <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
  <script type="text/javascript">
    new Vue({
      el: '#app',
      data: {
        message: 'Hello,Vue.js!'
      }
    })
  </script>
</html>

body 要素にテンプレートシンタックスmessage と記述されているが,実際のレンダリング結果は次のようになっている. f:id:ryotaz:20170213010112p:plain

Vue.js は,テンプレートシンタックスを利用して DOM に対しデータを宣言的にレンダリングすることができる.

directive

次は,directive (ディレクティブ) というものを用いた例だ. この v- から始まる directive は Vue.js から提供される特別な属性らしい.

<html>
  <head>
    <title>Hello, World.</title>
  </head>
  <body>
    <div id="app">
      <span v-bind:title="message">
        Hover your mouse over me for a few seconds to see my dynamically bound title!
      </span>
    </div>
  </body>
  <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
  <script type="text/javascript">
    new Vue({
      el: '#app',
      data: {
        message: 'You loaded this page on ' + new Date()
      }
    })
  </script>
</html>

Conditionals and Loops

条件分岐とループはつまらないので省略.

Event Listener

v-on directive は Vue のインスタンスのメソッドを呼び出すイベントリスナーを付加できる.

<html>
  <head>
    <title>Hello, World.</title>
  </head>
  <body>
    <div id="app">
      <p>{{ message }}</p>
      <button v-on:click="reverseMessage">Reverse</button>
    </div>
  </body>
  <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
  <script type="text/javascript">
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }
    })
  </script>
</html>

このメソッドは,DOM の変更を直接行っているわけではなく,単に app の state を変更しているだけである. DOM の更新はすべて Vue がハンドリングする.

したがって,Vue の利用者は,ロジックの記述に集中することができるとのこと.

two-way binding

v-model directive を利用して two-way binding を作ることができる.

<html>
  <head>
    <title>Hello, World.</title>
  </head>
  <body>
    <div id="app">
      <p>{{ message }}</p>
      <input v-model="message">
    </div>
  </body>
  <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
  <script type="text/javascript">
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js'
      }
    })
  </script>
</html>

Composing with Components

次のようにインスタンスコンポーネントを登録できるそうだ.

<html>
  <head>
    <title>Hello, World.</title>
  </head>
  <body>
    <div id="app">
      <ol>
        <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
      </ol>
    </div>
  </body>
  <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
  <script type="text/javascript">
    Vue.component('todo-item', {
      props: ['todo'],
      template: '<li>{{ todo.text }}</li>'
    });

    new Vue({
      el: '#app',
      data: {
        groceryList: [
          { text: 'Vegitables' },
          { text: 'Cheese' },
          { text: 'Whatever else humans are supporsed to eat' }
        ]
      }
    });
  </script>
</html>

この例で,急にわからなくなった.

説明を読むと,props: ['todo']todo-itemtodo をカスタム属性のように受け取れるようにする. template は,コンポーネントを記述したとき (<todo-item></todo-item>),この template の内容に置換される ということらしい. この中に,さらに {{ todo.text }} という記述も可能なようだ.

このテンプレートとv-for, v-bind はどのような順序で展開や束縛が行われ,最終的に DOM に反映されるか正確に書いていないのでわからない. 意識しないでかけると信じ,雰囲気で理解したことにする.

今日はここまで. 正直退屈だったが次回以降楽しいアプリケーションが作れるための仕組みがたくさんあると信じる.