【Vue.js】Vue.jsってどんなものか実際に触ってみた

JavaScript

「基礎から学ぶ Vue.js」という本を使って、Vue.jsについて学んでいこうと思います。

本記事では、「Vue.js」ってどんなフレームワークなのか？という紹介と軽いサンプルプログラムを書いています。

学習に使ったVueのバージョンは「2.5.13」です。

Vue.jsとはどんなフレームワークなのか

スポンサーリンク

Vue.jsは2014年にリリースされた比較的新しいJavaScriptのフレームワークです。2016年後半にリリースされたバージョン2で、仮装DOMを採用したことによりレンダリングパフォーマンスが飛躍的に向上し話題になったそうです。

ここ数年JavaScriptフレームワークも数多く開発されていますが、その中でもVue.jsは「学習コストの低さ」「スケールの柔軟性」「公式ドキュメントの充実」という点が、多くの開発者に支持され人気なのだそうです。

「公式ドキュメントの充実」については、日本語に対応した公式ドキュメントがあるため、読みやすく、これから始めるぞ！という時の障壁が低くなります。

データを中心とする「データ駆動」のアプリケーション設計

Vue.jsのコンセプトとして、画面を描画する構造の本体はDOMではなくJavaScriptのデータにあることだそうです。
これはまずデータが存在し、データの状態によって描画が更新されたり、アクションが自動的に起こったり、振る舞いが変わったりするということのようです。

つまり、まずはlist: ['りんご', 'ばなな', 'いちご']というデータがあり、

var app = new Vue({
  el: '#app',
  data: {
    list: ['りんご', 'ばなな', 'いちご']
  }
})

それを表示するためにDOMが存在する

<ol>
  <li v-for="item in list">{{ item }}</li>
</ol>

という考え方のようです。

コンポーネント指向の画面構築

Vue.jsで取り扱っている「コンポーネント」は機能ごとにJavaScriptとテンプレート(Vue.jsでDOMを構築する手段)を1つのセットにして、他の機能とは分離して開発できるようにしています。

画面を開発しているとよくあるのが、「この機能他でも使っている。。。」「全く同じコードが他でも書いてある。。。」です。
これが起こると、メンテナンスも大変ですし、開発時もそれぞれにテストを実施しないといけなくなるので、コストが増大します。
HTML、CSS、JavaScriptがセットになって、再利用可能なコンポーネントとして登録できるのは、この問題の解決にも繋がります。

Vue.jsの基本機能

Vue.jsの基本機能を実際にコーディングしてみて、体験してみました。
参考資料に記載されていたコードですが、読むだけでなく、実際に書いてみると使いやすくて驚きました。

サンプルコードを書く前にベースとなるファイルが必要となります。

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Vue.js App</title>
        <link href="css/main.css" rel="stylesheet">
    </head>
    <body>
        <div id="app">
          <!-- この#appの内側にテンプレートを書き込んでいく -->
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>

main.js

var app = new Vue({
  el: '#app'
})

テキストのバインディング

テキストのデータを画面に表示する方法です。テキストだけでなく数値も同様のやり方で画面に描画できます。

バインディングするための記述方法は{{ }}で囲むです。{{ }}でdataで定義した変数に入っている値を表示することができます。

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
<p>{{ message }}</p>

繰り返しの描画

リストのデータを全て表示したい時はv-forディレクティブを使います。

var app = new Vue({
  el: '#app',
  data: {
    list: ['りんご', 'ばなな', 'いちご']
  }
})

v-for="item in list"のlistが一覧の全データ、itemがlist内の各要素を表しています。

<ol>
  <li v-for="item in list">{{ item }}</li>
</ol>

イベントの利用

イベント処理はonClick、onFocusです。
イベントハンドラはv-onディレクティブで登録できます。

v-onディレクティブにイベントが発生した時に呼び出すメソッドを指定し、メソッド内でイベントが発生した時の処理を記述するようです。

var app = new Vue({
    el: '#app',
    methods: {
        handleClick: function(event) {
            alert(event.target);
        }
    }
})
<button v-on:click="handleClick">Click</button>

フォームの入力と同期

データとフォームの入力項目をバインドするにはv-modelディレクティブを使用します。

var app = new Vue({
    el: '#app',
    data: {
        message: '初期値'
    }
})
<p>{{ message }}</p>
<input v-model="message">

条件分岐

ある条件を満たす場合には表示させ、条件を満たさない場合は表示させないという画面を作成する時は、対象のタグにv-ifディレクティブを使って、条件分岐させるようにすると実現できるようです。

var app = new Vue({
    el: '#app',
    data: {
        show: true
    }
})
<p v-if="show">条件分岐</p>

ディベロッパーツール(F12)のコンソールでapp.show=falseと入力すると画面から「条件分岐」が表示されなくなります。

まとめ

スポンサーリンク

JavaScriptフレームワークはjQueryとBootstrapしか触ったことがなく、携わった案件でたまたまVueを知る機会がありました。
その時は勉強する時間がとれず、勢いとこんな感じだろう・・・という感覚で乗り切っていました。

今回その時に購入した書籍を使って勉強し、勉強した内容をアウトプットしてみることで知識として定着を図ろうと思ってブログに書いてみました。

しっかりと学んで設計もできるようになりたいなと思います。

JavaScript

Posted by たくみん