前置き

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

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

今回のチュートリアル参照箇所

はじめに - 宣言的レンダリング

Vue.jsとは？

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

※公式チュートリアルからの抜粋

プログレッシブフレームワークとは

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

はじめに

Vue.jsの導入方法は色々ありますが、CDNがお手軽です。HTMLファイルを1つ用意するだけで動きます。Webサーバも不要です。

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>

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

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

Vue関数とはnew Vue(～)の部分のことです。～の部分にはVueのインスタンスを作成する際の
オプションをJavaScriptオブジェクト形式で渡してあげる必要があります。

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

elプロパティ

  el: '#app'

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

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

dataプロパティ

  data: {
      message: 'Hello Vue!'
  }

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

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

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

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

リアクティブシステムとは

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

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

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

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

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>

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

今回はここまでです。

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

前置き