Vue.jsの基本構文を復習する(特にcomputed)

本記事の目的

エンジニア歴1.5ヵ月で、まだまだわからないことだらけですが、「基礎から学ぶVue.js」（本）と「超Vue JS 2 完全パック - もう他の教材は買わなくてOK」（Udemy）の教材を使って学んだことをまとめていきます。個人のメモ用として、書いているので不足情報があります。ご了承ください。

Vue.jsとは：ビュージェイエスとは

2014年にリリースされたJavaScriptのフレームワークである。
JavaScriptのデータと実際に使用する場所を紐づける役割と、データに変更があればDOMを更新する役割を果たす。これを「データバインディング」と呼ぶ。

基本的な構文の紹介

さっそくコードをみてこう

sample.html

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

sample.js

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js!'
    },
    computed: {
        computedMessage: function () {
            return this.message + '!'
        }
    },
    created: function () {
    },
    methods: {
        myMethod: function () {
        }

new Vue()：ビューインスタンスの作成

始めに、Vueインスタンスを作成することで、Vue.jsがアプリケーションに処理して起動する「合図」をだすことができる。

el：エレメントプロパティ

マウントする要素アプリケーションを紐づける要素のセレクタ。elはelementの略語。
elプロパティによって、sample.htmlファイルにある"id =app"とsample.jsファイルにある"el:'#app'"を紐づけることで、sample.js側で記載した命令をhtml側で実行することができる。
※ちなみに「マウント」とは、コンピュータに接続したメディアをコンピュータに認識させ、使える状態にすることを指す。

data：データ

アプリケーションで使用するデータを記す場所。つまり、sample.html側で記載している{{message}}の中身を表している。
動的なものを表現することができず、あくまでも初期値を表現するものである。

（補足情報）なぜelやdataで操作ができるのか?

elやdataは、Vue.jsのAPIと呼ばれるもので、Vue.jsを扱う上での規格のようなものです。用意されているAPIを使って、さまざまな処理を記述します。new Vue({})の直下にあるものはAPIと思ってだいたい間違いないです。
Vue.js初学者によるVue.jsのコトハジメ

※ちなみに、APIとは?
【初心者向け】APIとは何か。APIについて基本的な知識をまとめています。

computed：コンピューテッドプロパティ

算出プロパティとも呼ばれる。dataと似ているが、動的なプロパティを表現することができる。
算出プロパティとは任意に処理を含めることができるデータ。式をcomputedに記載することで、テンプレートの可読性を高めることができる。
要は、dataは初期値のような静的な値を設定する場所なので、条件に応じて値が変更するような設定を書いてはいけない。書くならcomputedに記載しなければならない、ということ。
条件に応じて変わる値とは、下記のコードのように「3以上押下したら、表示される字を変える」のような条件式のこと。

「動的なプロパティ、可読性を高めるってなによ？」と思った場合、下記のコードを見てほしい。これは、「+1というボタンを押すと、counterで表されている数字が+1ずつ増えていく。」というコードである。まずは、computedを使用しないで、書くと下記のようになる。

sample.html

<script src="~~~script読み込みURL~~~"></script>
    <div>
        <p>{{ counter }}</p>
        <button @click="counter += 1">+1</button>
        <p>{{ counter > 3 ? '3より上' : '3以下'}}</p> 
　　　　 <!-- ↑条件に応じて値が変わる式を記載する -->
    </div>

sample.js

new Vue({
    el: '#app',
    data: {
        counter: 0 //←あくまでも初期値を設定する箇所
   }
})

computedを使わずとも、コードはかけてしまうが、プロジェクトの規模が大きくなるほど上記のように、{{}}内に記載する情報が多くなってしまう。では、computedを使用すると、どうなるか？

sample2.html

<script src="~~~script読み込みURL~~~"></script>
    <div>
        <p>{{ counter }}</p>
        <button @click="counter += 1">+1</button>
        <p>{{ lessThanThree }}</p> 
    </div>

sample2.js

new Vue({
    el: '#app',
    data: {
        counter: 0
   }
    computed: {
        lessThanThree: function(){
        return this.counter > 3 ? '3より上' : '3以下' //←ここに記載する
        }
    }
})

このように、comutedに記載していくと、sample.htmlの肥大化を防ぎ、コードを読みやすくすることができる。

※ちなみにcomputedとmethodの違いは？
実行されるタイミングが違う。methodはhtml内のtemplateがどこか1点でも変わるたびにVueで読み込まれて、関数が実行されてしまうが、computedプロパティは参照先（message）の値が変わったときのみ実行される。これは、算出プロパティが「リアクティブなデータに依存して結果を表示させる、キャッシュ機能を持つ」からである。

created：クリエイテッド

ライフサイクルフックのうちのひとつ。ライフスタイルフックとは、「スタート」から「エンド」まで一定のサイクルを表すもの。「フック」という仕組みを使って、特定のタイミングで処理を呼び出すことができる。あらかじめ、使用できる関数が決められているので用途に応じて使い分ける。ちなみに、createdは「インスタンスが作成され、リアクティブの初期化がされる前」に実行される関数。ほかには、beforeCreate（インスタンスが作成され、リアクティブの初期化がされる前）関数などがある。

methods：メソッド

このアプリケーションで使用するメソッドを記載する。

参照ページ

https://creative-tweet.net/blog/2018/04/beginning-vuejs.html
https://jp.vuejs.org/v2/guide/instance.html