読者です 読者をやめる 読者になる 読者になる

@ryotaz

ゆとりエンジニア (2016~

Vue.js で遊ぶ 3日目

JavaScript Vue.js

Vue.js で遊ぶ 3日目

Tempalte Syntax

Interpolations

覚えれば良さそうなこと

  1. double curly braces を使って text interpolation
  2. v-html directive で plain HTML を挿入 (XSS には注意)
  3. double curly braces は HTML の属性に使うことはできないので,代わりに v-bind を使う
  4. double curly braces には JavaScript の任意の式がかける
<span>Message: {{ msg }}</span>
<div v-html="rawHtml"></div>
<div v-bind:id="dynamicId"></div>

{{ number + 1 }}
{{ collection.length > 0 ? 'Exist' : 'Empty' }}
<div v-bind:id="'list-' + id"></div>

Directives

  1. directive の属性の値は単一の JavaScript の式を期待している.
    • 例外は v-for
      • <li v-for='item in items'>{{ item }}</li> のような書き方をするから?
  2. いくつかの directive は : の後に引数のような形で何か値をとることがある
    • <a v-bind:href='url'></a>href
  3. いくつかの directive は,Modifier とよばれる . の後に特別な postfixes をとることがある
    • <form v-on:submit.prevent='onSubmit'></form>

Filters

double curly braces と v-bind でフィルタを利用できる

Shorthand

v-bind と v-on はそれぞれ,:, @ という省略記法がある

  • 他人の Vue.js のコードを読むときに参考にできそう

感想

完全に飽き始めている,とりあえず飛ばし読みして書いてみたほうが良い気がしてきた.

CSS と SASS

日記 日記

仕事上,CSSの勉強をしなくてはならないのだが,仕様が複雑で難しい.

さらに,SASS を覚えると便利だそうだ.なるほど,フロントエンド界隈は新しいものをどんどん取り入れられるのか.

例えば,次のような SCSS は,下のような CSS に変換される.

a {
  text-decoration: underline;
  &:hover {
    color: red;
  }
}
a {
  text-decoration: underline;
}

a:hover {
  color: red;
}

ネストできることと,親の参照をかけることは便利だ. 一方.& で参照すると,ソースコード全文検索するときに若干検索性が落ちそうだ.

Vue.js で遊ぶ 2日目

Vue.js で遊ぶ 2日目

執筆時間: 40 min

Vue.js 2.0 The Vue Instance

Constructor

すべての Vue vm は,Vue コンストラクタ関数によって root Vue インスタンスを作成することで起動するようになっているらしい. MVVM パターンとある程度関係があるようだ.

Vue インスタンスを作成するとき,オプションとして次の内容を含んだオブジェクトを渡すことができる

  • data
  • template
  • element to mount on
  • methods
  • lifecycle callbacks
  • … and more

すべてのオプションは API リファレンスを参照とのこと

また,Vue のコンストラクタは,コンポーネントのコンストラクタを作るために拡張できるらしい. 正直よく使い方がわからないが,後述とのことなのでそこまで待機.

var MyComponent = Vue.extend({
  // pre-defined options
})

var myComponentInstance = new MyComponent()

Properties and Methods

あらゆる Vue インスタンスは,data に存在する全てのプロパティをプロキシしているそうだ.

したがって,上の HTML に対し,ブラウザのコンソールで次のようなことができる.

<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">
    var data = { message: 'Hello Vue.js' }
    var vm = new Vue({
      el: '#app',
      data: data
    })
  </script>
</html>
vm.message === data.message // => true
data.message = 'Goodbye Vue.js'

vm.message // => 'Gooldbye Vue.js'

ただし,注意点として,全てのプロパティがプロキシされているわけではないということだ.

また,Vue のインスタンスは幾つかの便利なプロパティやメソッドを公開しているらしい. これらは $ を用いてアクセスできるようだ.

先ほどの例に続いて,次のようなことを試すことができる.

vm.$data === data // => true
vm.$el === document.getElementById('app') // => true

vm.$watch('a', function (newVal, oldVal) {
  // このコールバック関数は,`vm.a` が変化した時に呼び出される
})

Instance Lifecycle Hooks

Vue のそれぞれのインスタンスは,一連の初期化処理を経て生成される. 例えば,次のようなものがある

  • データの監視のための準備
  • テンプレートのコンパイル
  • インスタンスの DOM へのマウント
  • DOM の更新 (データが変化したならば)

Lifecycle Diagram

Lifecycle に関する Diagram が公式のドキュメントに載っている.

Insance and Lifecycle Hooks

この図はなかなかいろいろな情報があって良い.

“el” および “template” オプションが存在すると,template を render 関数にコンパイル. “el” があり,"template" が存在しない場合には,"el" で指定した要素の outerHTML を template としてコンパイル.

今までの例で,"el" で指定して “template” が存在しなかったので,"el" で指定した要素の outerHTML を template としてよしなにコンパイルしていたのだろう.

感想

正直,そこまで面白くなかったので早く次に行こう.

Vue.js で遊んだログ

Vue.js で遊んだログ

中規模アプリケーションを作成するまでのログ

ログ

Vue.js で遊ぶ 1日目

JavaScript Vue.js

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 に反映されるか正確に書いていないのでわからない. 意識しないでかけると信じ,雰囲気で理解したことにする.

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

日記

今日は体調が悪いので早く寝る. 最近は歳をとって経験が増えたせいか,"風邪を引く"という兆候を読むのがうまくなった.

Hatena Blog で MathJax を用いて数式を書く

まとめ

Hatena Blog では任意の head に JS コードを記述できるので,CDN で配信されている MathJax を利用できる

手順

  1. 管理画面
  2. 設定
  3. 詳細設定
  4. 検索エンジン最適化 headに要素を追加
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML" async="" type="text/javascript"> </script>

f:id:ryotaz:20170122194016p:plain