【Vue.js初心者】始めたらまずやること

こんにちは、コンスキです。

今回から、Vue.jsの記述方法の説明をしていきます。

Vue.jsを始めるために、まずhtmlにscriptタグを使ってVue.jsを導入します。Vueの最新のバージョンがコンテンツを配布してくれているCDNにあるので、「https://unpkg.com/vue」というURLをsrc属性に書きましょう。

下のスクリプトを写してブラウザに表示してみてください。

<!DOCTYPE html>
<title>Vue.jsの導入</title>
<script src="https://unpkg.com/vue"></script>

<script>
  if(typeof Vue !== 'undefined') {
    alert('Vue.jsが読み込まれています。');
  }  
</script>

Vue.jsがしっかりと読み込まれていれば、「Vue.jsが読み込まれています。」というアラートが表示されると思います。

次にVueコンストラクタを使ってVueインスタンスを作成する必要があります。

<!DOCTYPE html>
<title>Vue.jsの導入</title>
<script src="https://unpkg.com/vue"></script>

<script>
  var vm = new Vue({     //ここでVueインスタンス作成して変数appに代入する
    //コンストラクタに渡すデータや動作などの設定
  })
</script>

「Vueコンストラクタ」って何？と思うかもしれません。簡単に言うと、これから使っていくデータや動作を設定するための関数です。

Vueコンストラクタにデータや動作を渡す
　　　　　　↓
Vueの処理がされる
　　　　　　↓
画面にデータや動作が反映される

こんな感じです。

「コンストラクタ」といえばオブジェクトやクラスを作成する際に一緒に作るものでした。オブジェクトやクラスを初期化するための関数です。

Vueコンストラクタも同じようにVueインスタンスをつくるときに複数のプロパティ（設定値）を引数に与えることで初期化します。

初期化するものは例えば、下のようなものがあります。

初期化するプロパティ名	設定する内容
data	使用するデータ（この後の例で出てくる「こんにちは Vue.js」）
el	Vueを使用する要素(この後の例に出てくる「app」)
filters	データを修飾するフィルター
methods	イベントが発生した時の動作
computed	データを使って計算した値

Vueインスタンスを作成することができたら、Vueを使用する要素を設定します。今回はdiv要素に対してVueを適用します。適用する要素にはVueインスタンスのelプロパティと同じ値のidをつけます。これでdiv要素の中にあるものに関してはVueインスタンスで初期化するプロパティが適用されます。

<!DOCTYPE html>
<title>Vue.jsの導入</title>
<script src="https://unpkg.com/vue"></script>
<div id="app">  　　　　　　　　　　　　//Vue.jsが使われる要素

　　//この中でのみVueを使うことができる
</div>
<script>
  var vm = new Vue({  
    el: '#app'　　　　　　　　　//ここのid="app"の最初に「#」を付けたもの

  })
</script>

次はいよいよ画面の操作をしてみましょう。
画面の操作といってもdataプロパティに設定した文字を画面に表示するだけです。

例として、データバインディングというものを使ってdataプロパティに設定した「こんにちは Vue.js」の文字列を画面に表示してみましょう。

<!DOCTYPE html>
<title>Vue.jsの導入</title>
<script src="https://unpkg.com/vue"></script>
<div id="app">

  {{ message }}
</div>
<script>
  var vm = new Vue({     

    el: '#app'
    data: {
      message: 'こんにちは Vue.js'
  })
</script>

データバインディングではdataプロパティのデータと、Vueを適用している要素内の「{{」と「}}」で囲まれている値とを結合（binding）します。

上の例ではdataプロパティの「message」とVueが適用されているdiv内の「message 」が結合されて一心同体となっています。

ちなみに「{{}}」のことをマスタッシュタグといいます。「{」を右に90度回させたときになんだか口ひげ(Mustache）に似ていることからこの名前がついたそうです。

でも、本当に一心同体になっているのか、messageの値を英語に変えて確認してみましょう。（日本語だと、文字コードを設定していないため文字化けする可能性があります）

今回はVue.jsの本当の基礎の基礎しか触れられていませんが、その理由は私の理解がまだまだだからです（汗）

これからも精進してまいりますのでどうかよろしくお願いします。読んでくれてありがとうございました。

おまけ

Vue.jsを練習するうえでは、コードを書いてはブラウザで確認する、という作業が何回も続くと思います。そこで、JSfiddleというサイトがありますので是非使ってみてください。

このサイトは、HTMLとJavascript、CSSを同時に編集できるうえに同じウィンドウでブラウザでの表示を確認することができるので、ウィンドウを切り替える手間を省くことができます。

登録しなくてもURLを作成することでコードを保存しておくこともできます。似たようなスクリプトを書くときは、テンプレートを自分で作って使いまわすとVue.jsの勉強時間を有効に使えるのではないかと思います。