ゼロからVue.jsを学んでいる（用語整理）

以下の２冊で勉強しています。

Vue.js入門 基礎から実践アプリケーション開発まで

基礎から学ぶ Vue.js

Vue.js、学習コストが低いという噂を聞きつけてノコノコとやってきたんですが。

別に簡単ではない！！

未知の概念の連続っ…！！　

しかし、漠然とフロントエンドエンジニアという分野に持っていた誤った考え、つまり「フロントエンジニアとは、マークアップがちゃんとしているオシャレなサイトを作る分野だ」という誤解が氷解していき、一気にフロントにも興味が持て始めてきました。

見通しのよい設計でコードを書きつつ、レンダリングのパフォーマンス等を加味しながらUI/UXの向上を図る…みたいな感じやろ！？知らんけど…。

自分自身のキャリアとして完全なフルスタックを目指すつもりはないですが、チームに参画したときにパフォーマンスを出せる人間になりたい（「 出来るFWは他のポジションの役割も理解している」ように。）っていうのと、個人としての開発力を上げたいっていうのがフロントを学んでいる動機です。

とりあえず用語だけまとめながら本を読んでコード書こうと思います。

用語まとめ

リアクティブデータとは？

Vue.jsのgetまたはsetにフックして反応できるデータのこと。

ディクレティブとは？

Vue.jsの場合だとv-bindなどがそれにあたるが、コンパイルしてテンプレートを作るさいの補足情報のこと。 ディレクティブは指令という意味。Vue.jsへの指令。

v-showとv-ifの違い

v-showはCSSのdisplayプロパティを切り替えているだけで、DOM要素自体は残っている。 v-ifはDOM要素自体の削除。そのため描画コストがかかる。

this.$setの使い所

名前を持たない配列の値に直接オブジェクトを置きたい場合、またはそのオブジェクトのプロパティに新しいものを追加する場合に使う。

this.$set(更新する対象, インデックス番号 or 新しいプロパティ名, 新たなオブジェクト or 新たな値) 

イベントハンドラとは？

Vue.jsの場合だと、v-on:で紐付けるイベント対象によって実行される処理のこと。例：　v-on:click="eventHandler"

算出プロパティとは？

computedで定義しておく関数。先に定義しておくと「this.definedProperty（定義しておいたプロパティ名）」で呼べるから便利。 メソッドと違い一度処理した値をキャッシュしておくため、呼び出すたびに処理が走ることはない。 （依存するdataの値が書き換わると再処理） 基本的にはdataの値を貰っておくゲッタープロパティだが、セッターとしての処理を書けばdataの値を書き換えることも出来る。

ウォッチャーとは？

特定のデータまたは算出プロパティを監視しておき、その変化にトリガーして実行される処理のこと。 監視しながらDOM操作したいならカスタムディレクティブの方がよい。

カスタムディレクティブとは？

v-bindのようなディレクティブを自作するための機能。direvtivesで定義する。ただし、カスタムディレクティブで受け取った値は$elや$refsと同じで、仮想DOMではないため、描写の最適化は行われない。 要素や値を監視しながらDOM操作したいときに使おう。

$el、$refsとは？

$elがidと結びついているDOM要素すべて。 $refsは$elが結びついてるDOM要素の中で、ref="foo"といった要素について$refs.fooで結びつけるために使う。

nextTickとは？

監視先のDOM要素について、データがバインディグされて処理されたあとのものをとってこれる。

<div id="app">
  <button v-on:click="list.push(list.length+1)">追加</button>
  <ul ref="list">
    <li v-for="item in list">{{ item }}</li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    list: []
  },
  watch: {
    list: function () {
      // 更新後のul要素の高さを取得できない…
      console.log('通常:', this.$refs.list.offsetHeight)
      // nextTickを使えばできる！
      this.$nextTick(function () {
        console.log('nextTick:', this.$refs.list.offsetHeight)
      })
    }
  }
})

コンポーネントとは？

JSとテンプレートをセットにしたもの。コンポーネントを使えばコードの再利用性が高い。 コンポーネントはそれぞれスコープを持っている。コンポーネントがコンポーネントを呼び出すことも可能(親子関係になる)

コンポーネント間の通信方法

親から子へ渡す

子どもは親の属性(val='hoge')をprops: ['val']といったように指定すれば、そのhogeを扱うことができる 親のデータを渡したいときは親側にv-bind:val="message"といったふうに記述し、子側でprops:['val']と指定すれば、親側のdataに入っているmessageの値を貰えるといった動きになる。

子から親へ渡す

カスタムイベントと、$emitを使う。 親側でv-on:custom-event='eventHandler'とテンプレートにあった場合、子のコンポーネント側はthis.$emit('custom-event')で発火しにいける。（コンポーネント側でthis.$emitを呼ぶためにメソッドなど必要）。これでthis.$emit('custom-event')で親側のメソッドeventHandlerを実行させることが出来る。 emitは発火させるって意味。

親子関係でないコンポーネント間はイベントバスを使う

イベントバスは通信用のためだけに作られるVueインスタンス。そいつをフックにコンポーネント間をやりとりする。 状態管理がややこしくなるので非推奨っぽい。

スロットとは？

親となるコンポーネント側から子ども側のコンポーネントのテンプレートの一部を差し込む機能のこと。

<div class="comp-child">
   <slot>ここに親側のテンプレートが入る</slot>
</div>

スコープ付きスロット

スロットは定義した側（親側）のスコープが優先されるが、slot-scopeを使えば子側でのスコープでデータを受け取れる。

例：

子側のテンプレート

<ul class="comp-child">
  <slot v-for="item in list"  v-bind:item="item"></slot>
</ul>

親側のテンプレート

<comp-child>
  <li slot-scope="props">{{ props.item }}</li>
</comp-child>

propsという変数名を指定しているが、これは任意でいい。子側のコンポーネントのスコープを表す。

トランジションとは？

Vue.jsにおいては、CSSトランジション/アニメーション効果をより簡単に使いやすくサポートする機能のこと。

<div id="app">
  <p><button v-on:click="show=!show">切り替え</button></p>
  <transition>
    <div v-show="show">
      トランジションさせたい要素
    </div>
  </transition>
</div>

/* 1秒かけて透明度を遷移 */
.v-enter-active, .v-leave-active {
  transition: opacity 1s;
}
/* 見えなくなるときの透明度 */
.v-enter, .v-leave-to {
  opacity: 0;
}

webpackとは？

モジュール化した複数のファイルをまとめるバンドルツールのこと。

まだ多分続きますが

一旦、ここで終わろうと思います。 覚えることがたくさんありますねえ。

作りたいアプリの開発環境としては、RailsAPI＋Vue.js（＋もしいければ開発中のLINE用APIアプリケーション）って感じなので、もう少しVue.js触ってからRails動かしていこうかな、と思います。

がんばります！