Vue.js公式チュートリアルをゆっくり読んでいく1

# 前置き
Vue.jsの勉強を始めました。[公式チュートリアル](https://jp.vuejs.org/v2/guide/index.html)の**基本的な使い方(インストール～コンポーネントの基本まで)**を読んで動かすところまではやったので、学んだことをまとめようと思ったのですが、チュートリアルの内容の再掲になるだけなので、チュートリアルの内容をもう少しゆっくり読んでいきたいと思います。

Vue.jsのバージョン：v2.6.11

# 今回のチュートリアル参照箇所
[はじめに - 宣言的レンダリング](https://jp.vuejs.org/v2/guide/index.html#%E5%AE%A3%E8%A8%80%E7%9A%84%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0)

# Vue.jsとは？
> Vue.js とは？
> Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築するための[プログレッシブフレームワーク](#プログレッシブフレームワークとは)です。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。

※[公式チュートリアル](https://jp.vuejs.org/v2/guide/index.html#Vue-js-%E3%81%A8%E3%81%AF%EF%BC%9F)からの抜粋

## プログレッシブフレームワークとは
- Vue.js作者のEvan You氏が提唱している概念
    - JavaScriptの主要なフレームワークはVue.jsの他にReact、AngularJS等があります。3つのフレームワークの比較は下記の記事が参考になります。  
      [JavaScript: フレームワーク React/Vue/Angularについて \- Qiita](https://qiita.com/gumiTECH/items/13eb7da8224bf93c67b5)  
      Reactは中～やや大規模、AngularJSは大規模開発に向いていると言われています。そのため、Webアプリケーションの規模が最初は小さかったものが徐々に大きくなることで導入したフレームワークでは合わなくなったり、逆にそこまで規模が大きくないものには大袈裟すぎるという問題がありました。そこで**どのような規模のアプリケーションにも段階的に導入することができるというフレームワーク**、というのがプログレッシブフレームワークという概念だそうです。
    - Evan You氏はGoogle製のWebアプリケーションフレームワークAngularJSの開発にも携わっていた元Googleエンジニア (Evan You氏については下記の記事が参考になります。  
      [Vueフレームワークの創始者、Evan You（エヴァン・ヨー）。アジア出身の天才肌ITエンジニアについて、生い立ちや経歴をまとめてみた \- げんごにあ（ゲンゴするエンジニア）](http://gengoneer.com/evan-you/)

# はじめに
Vue.jsの導入方法は[色々あります](https://jp.vuejs.org/v2/guide/installation.html)が、CDNがお手軽です。HTMLファイルを1つ用意するだけで動きます。Webサーバも不要です。

```html:helloVue.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue!</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="app">
    {{ message }}
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    });
</script>

</body>
</html>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112571/edc69bfc-f777-ccc4-b585-27dc5b491f5a.png)

Vueを動かす最初の一歩はVue関数を使ってVueのインスタンスを作成するところから始まります。

```javascript
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    });
</script>
```

Vue関数とは`new Vue(～)`の部分のことです。`～`の部分にはVueのインスタンスを作成する際の
オプションを[JavaScriptオブジェクト](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Basics)形式で渡してあげる必要があります。

オプションオブジェクトの内容について確認してみます。

## elプロパティ

```javascript
  el: '#app'
```

`el`プロパティはelement(要素)の略で、ここではVueインスタンスに紐付けたいHTML要素のid属性を指定しています。
下記の要素とVueインスタンスが紐づくイメージです。

```html
<div id="app">
    {{ message }}
</div>
```

## dataプロパティ

```javascript
  data: {
      message: 'Hello Vue!'
  }
```

`data`プロパティは生成するVueインスタンスに持たせたいデータオブジェクトを渡します。

実行結果を見ればわかりますが、ここで渡したデータオブジェクトのプロパティをそのまま
Vueインスタンスと紐付いたHTML要素の中で`{{ message }}`の形式で使用することができます。

```html
<div id="app">
    {{ message }} <!--渡したデータオブジェクトのmessageプロパティの値が展開される-->
</div>
```

Vueインスタンスに与えたmessageがそのままHTML要素内で展開されているだけのように見えますが、
Vueはここでデータオブジェクトの内容をリアクティブシステムに追加しています。

## リアクティブシステムとは
リアクティブシステムについてはぐぐってみると色々と深い話が出てくるので、より掘り下げて知りたい方は
そちらを見てほしいのですが、ここでは私なりの解釈だと**「こっちを変えるとあっちも変わるもの」**です。

さきほどのHello Vueをchromeのデベロッパーツールのコンソールで確認してみます。

![reactive.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112571/08d7e1c2-de30-f506-9452-ade73c5f5059.gif)

1行目の`vm`は生成したVueインスタンスの内容を確認しています。

```
> vm
  Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
```

```javascript
let vm = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});
```

2行目の`vm.message`はVueインスタンスを生成する際に渡したデータオブジェクトの
messageプロパティの内容を確認しています。

```
> vm.message
  "Hello Vue!"
```

3行目の`vm.message = 'Hello Reactive!'`でVueインスタンスが持つデータを書き換えています。
このとき、HTML上の`Hello Vue!`も`Hello Reactive!`に変化しています。

```
> vm.message = 'Hello Reactive!'
  "Hello Reactive!"
```

これが**「こっちを変えるとあっちも変わるもの」**です。
つまり、Vueインスタンスのデータを変えれば、それが即表示側にも反映されるということです。

もしこの**「こっちを変えるとあっちも変わるもの」**を自分で実装すると次のような感じでしょうか。

```helloWorld.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
</head>
<body>

<div id="app">
</div>

<script>
    function changeTheWorld(message) {
        document.querySelector('#app').textContent = message;
    }

    let defaultMessage = 'Hello World!';
    document.querySelector('#app').textContent = defaultMessage;
</script>

</body>
</html>
```

![myReactive.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112571/ca6df661-38d3-fdfd-4dd8-763bce97760d.gif)

データの変更内容をHTML側に表示するための関数を1つ作らないとできません。
これを自動的にやってくれるのがVueのリアクティブシステムです。

今回はここまでです。