Vueクラスのインスタンスを作れるようになる〜コンストラクタの書き方習得編 Part1〜

※この内容はVue.js入門の〜基礎から実践アプリケーション開発まで〜のP36〜P42を勉強したときの自己流理解メモです。

## Vueインスタンスとは〜復習〜

詳細は前回の記事を↓
<a href="https://qiita.com/sakiyama0101/items/f80f3ed2405788cca0f9"> Vue.js 〜導入、基本の言葉の定義、考え方〜</a>

基本は、Vueクラスのインスタンスを`Vueインスタンス`というポイント。下記のように表されている。

```
let Vueインスタンス　= Buttonクラス（ 属性を私が代入するもの ）;
```
（Vueクラスで定義されたVueコンストラクタによって定義されたもの）

Vue.jsはインスタンスを操作していく。そのため、これからインスタンスを作るための、コンストラクタの書き方を習得していく。


## コンストラクタの書き方

コンストラクタの書き方を学ぶ序章として、Vue.jsがどのような処理になっているのかを確認する。

【 Vueの処理の順序を確認 】
0. コンストラクタ書く
1. Vueインスタンス生成
2. HTML部分にVueインスタンスくを適用（DOMにマウントするという）

という手順のようだ。

これより、プロパティを確認していく。
`el` プロパティは、Vueインスタンスで置き換えたいDOMを指定して、Vue.jsで生成されたDOMで置き換える。

Vueインスタンスを生成するために、Vueクラスを使っていくが、私たち（Vue.jsを使って開発をする開発者）がVueクラスを定義することはまずない（ライブラリを書いていくというのであればその機会はあるかもしれないけど）。私たちは、Vueクラスにすでに定義されているオプションに対して値を代入していくだけ。もうひとつ忘れてはいけないルールがある。それは、インスタンスを生成する際の、コンストラクタの引数は辞書型ではないといけないということ。

この2点の基本を頭にいれたところで、さっそくVueで生成したDOMをDOM要素にマウントしていくとはどういうことかを実践しながら勉強していく。

## 導入の基本　
Vue.jsは導入コスト、学習コストが低いというのがポイントだった。以下のscriptを記述するだけでスタートできる。
`<script src="https://unpkg.com/vue@2.5.17"></script>` を<head>タグに書く。
そして私たちは、Vueクラス内のオプションにデータを代入してインスタンス（オブジェクト）を生成していくので以下を用意する。

```js
<script>
var app = new Vue({
})
</script>
```
  
DOM要素とまとめると、スタートは以下のようになる。

```html
<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<script src="https://unpkg.com/vue@2.5.17"></script>
	<title>初めてのVueJs</title>
</head>

<script>
var app = new Vue({
    // オプションにデータを代入していく
})
</script>
```


以下、`el`、`mount`、`data`までどどどっといくぞー！

DOM要素にマウントする手法が`el`。
そして`$mount`は、`el`オプションを受け取らない場合、マウントしない形で（DOM要素と関連付けすることなく）Vue インスタンスのマウンティングを手動で開始するために使用する。
`data`プロパティは、マウントして表示するためのプロパティ。


ここで、プロパティってなに?って感じなので、windowプロパティを例に考えてみる。

windowプロパティ

```
window.vm = vm

```

widowというプロパティとは、ブラウザにすでにあるグローバルオブジェクトである。
新しいwindowに紐づいた、グローバル変数 に対して、vmを代入することでグローバルオブジェクトに登録したということになる。


ちなみに、JSは、参照渡し。以下考えかた参照。

```
b = 5
a = b
a = 10

この時bは
値渡し : b = 5
参照渡し : b = 10（abをaに代入する時に、aとbが紐づいてしまう）
```

つまり、window.vmを変更すると、vmも変更される。
同じ変数を使ってしまうと、参照渡しだと上書きされてしまうから気をつけないといけない。が、そうならないように回避する方法があるらしい。（詳細はdataは関数で渡すの学習の時に）


```
console.log(vm)
```

デベロッパーツールでConsoleを表示し、上記を入力すると以下の情報が見えた。$がついているもの、いないものがある。
<img width="441" alt="output_03_01.png" src="https://qiita-image-store.s3.amazonaws.com/0/119773/f23333dc-3bcc-25f7-b706-2c0e77b185d7.png">

例えば、

```
console.log(vm.$〜〜)
```
と入力すると、アクセスすることができる。
ためしに、`console.log(vm.$el)`と入力してみると、

```
<div id="app">
  <p> hoge </p>
</div>
```

のように、consoleに表示されるのが確認できる。
$ではじまるプロパティやメソッドはVue.jsが提供しているもので、自分が必要な情報を取得することができる。値の変更を監視することもできて、デバックにも利用できる。また、_ （アンダースコア）から始まるものは基本的に触らない。


## データの変更を監視してViewの再描画やDOM要素の更新をする

例えば、デベロッパーツールのConsoleで

```
vm.items[0].name = 'hogehoge'
```

と入力してEnterを押すと、Viewに表示されていた'hoge'が'hogehoge'に変更されたのが確認できる。


### $watch メソッドで監視

```js
$watch(
    第一引数には監視対象値を返す関数 function(){}の形,
    第二引数には値が変わった場合に呼ばれるコールバック関数function(){}の形
    )
```

↓実際のコード

```js
vm.$watch(function() {
    // hogeの量
    return this.items[0].quantity
  }, function(quantity) {
      // hogeの値が更新されたらConsoleで量を表示
      console.log(quantity)
  })
```

## おわりに
今回に記事では、elオプション、dataプロパティ、mountメソッド、watchメソッドを学んだ。
次は、P43〜の内容 テンプレート構文から勉強していく。

次の記事（予定）
Vueクラスのインスタンスを作れるようになる〜コンストラクタの書き方習得編 Part2〜
・データバインディング
・データバインディング テキスト展開
・ディレクティブ