Vue.js 使ってみました

JavaScriptは好きで簡単なツールなどは作ったことがあるのですが、
フレームワークをあまり使ったことがなかったので、
Vue.jsについて勉強してみました。

基本的な使い方とインストールについては、こちらの公式サイトを参考にしました。

jp.vuejs.org

Vue.jsを使うためにNode.jsとnpmも必要になるのですが、
その手順はこちらを参考にしました。

qiita.com

自分の環境

MacOS

nodebrew 0.9.8

Node 9.4.0

npm 5.6.0

やったこと

公式サイトにあるサンプルコードを真似て、自分のローカルで実際にコードを書いて実行してみました。
そのあと、合計金額を表示する簡単なプログラムを作ってみました。

Vue.js とは

・MVVM設計パターンのフレームワーク

「Model View ViewModel」の略で、
ロジック部分・見た目部分・データのやりとりの橋渡し部分に分ける設計のことです。
この設計にすることでコードの保守運用がしやすく、生産性が上がるといったメリットがあります。

・UI部分とロジック部分をわけて設計している

・データのやりとりに特化しているため、とてもシンプルに書くことができる

・HTML要素を操作する機能である「DOM操作」ができる

v-から始まる要素（ディレクティブ）をHTMLに追加することで実装できます。

・コンポーネント思考

部品を組み合わせてアプリケーションを作れるので、部品を使いまわすことができます。

基本的な書き方

下記は画面に「Hello Vue!!」と表示させるだけのプログラムです。

まず、javascriptでVueのインスタンスを作成します。

sample.js


// Vueのインスタンス作成
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!!'
}
})

Vueクラスは主に3つの要素で構成されています。

el: -> 関連付けさせるHTML要素を指定します。

data: -> elで指定した要素に渡す値です。（バインド）

methods -> elの要素が呼ばれたときに動く処理です。（上サンプルでは省略）

elで関連付けした要素に対して、値を渡したり処理をしたりします。

dataには値を複数持たせることも可能で、リストにしてHTML側でループ処理を書いて値を取り出すこともできます。

次にHTMLでVueのデータを取り出します。

sample.html


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>sample</title>
  </head>
<body>
<!-- Vueで関連付けされた要素 -->
<div id="app">
<!-- Vueのdata.messageがバインド -->
{{ message }}
</div>
<script src="vue.min.js"></script>
<script src="sample.js"></script>
</body>
</html>

{{ }}で囲っているのはMustache（マスタッシュ）というもので、Vueのデータを取り出すことができます。

双方向データバインディング

テキストボックスの値が、リアルタイムで上部の表示にも反映されます。

Vue.jsではこの双方向データバインディングを簡単に行うことができます。

条件分岐

条件分岐は v-if ディレクティブを使います。

追加でv-else-ifやv-elseも使うことができます。


<h1 v-if="ok"> OK!OK! </h1>
<h1 v-else-if> NO.NO. </h1>
<h1 v-else> I do not know... </h1>

ループ

v-for ディレクティブを使います。

Vueのdataでリストを定義しておき、HTML側で1つずつ取り出して変数に入れることで、
そのtextの値を順番に出力しています。


<li v-for="todo in todos">
{{ todo.text }}
</li>

コンポーネント

コンポーネントはVue.jsの強力な機能の1つで、再利用可能なコードを作成することができます。


Vue.component('{タグ名}', {
//オプション
})

下記サンプルでは、v-forディレクティブで groceryList から1つ値を取り出して item に入れ、
取り出した item をtodo-itemコンポーネントに渡しています。

そしてこのコンポーネントの中で値を出力させています。


<div id="app7">
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>

合計金額計算プログラム

数量を変更すると、リアルタイムで合計金額を計算をします。

合計の計算には、Vueの要素である算出プロパティcomputedを使っています。

HTMLに計算式を書くとコードが肥大化してしまうので、
メンテナンスしやすいようVueで定義することができます。


computed: {
sum: function(){
return this.a * this.b + this.c * this.d
},
tax : function(){
return Math.ceil(this.sum * 0.08)
}
}

また、入力できる数量はマイナスにならないようにしています。

これは、監視プロパティwatchを使っています。

watchの中で関数を定義すると、データに変更があるたびにこの関数が呼ばれるようになります。


watch: {
b: function(v) { if (v < 0) { this.b = 0} },
d: function(v) { if (v < 0) { this.d = 0} },
}

やってみた感想

書き方は覚える必要がありますが、データの受け渡し方などが非常にわかりやすくて使いやすいと感じました。
他のフレームワークも色々試して、良し悪しの比較をしたいと思っています。
Vue.jsについて基礎的な機能しかまだ使っていないのですが、まだ他にも色々機能がありそうなので、
公式サイトをみて理解を深めていきたいと思います。

ちなみに、Vueの要素に値を設定するとき、正しくはシングルコーテーションなのですが、
ダブルコーテーションにしていて動かないことが何度かありました。

また、HTML側でVueを呼び出すときの{{ }}の外側が普通のカッコになっていて動かなかったこともあったので、
タイポには十分に気をつけようと思います。

今回やってみた内容は、githubにあげておきました。

github.com

もぐもぐプログラミング