Vue.jsについて学習してみた＜基礎編＞

はじめに

こんにちは。新卒２年目のaa_cryingです。
最近興味本位でVue.jsについて学習を始めましたので、今回はVue.jsの基礎的な部分について紹介したいと思います。

はじめに
Vue.jsとは
プログレッシブフレームワークとは
Vue.jsの代表的な機能
おわりに
参考にした記事

Vue.jsとは

Vue.jsとは、ユーザーインターフェイス(UI)を構築するためのJavaScriptのプログレッシブフレームワークです。
そこで、まずはプログレッシブフレームワークとは何かについて説明したいと思います。

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

プログレッシブフレームワーク ( Progressive Framework ) とは、Vue.js作者のEvan You氏が提唱する概念です。
JavaScriptにはVue.jsの他にjQuery、React.js、Angular.jsなど様々なフレームワークが存在します。実際のプロジェクトではスタート時にこれらの中からフレームワークを選択し、開発を進めることになります。しかし、アプリケーションの開発を進めていくと、様々な要件に対応するためにアプリケーションの規模も大きくなっていきます。そうすると、最初に導入したフレームワークが合わなくなり、乗り換えるために新しいフレームワークを模索しなければなりません。
ところがVue.jsは、サポートするツールやライブラリといったエコシステムの存在によって、アプリケーションの要求に柔軟に対応することができます。このように、どのような規模、段階のアプリケーションにも対応できるというのがプログレッシブフレームワークの概念になります。

Vue.jsの代表的な機能

ここではVue.jsの代表的な機能である以下3つの機能について説明していきます。

リアクティブなデータバインディング
コンポーネント化
高速なレンダリング

まずは簡単なコードの例を見ていただければと思います。

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
    <div id="binding"></div>
    <div id="components-button">
        <p><count-button></count-button></p>
        <p><count-button></count-button></p>
        <p><count-button></count-button></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script>
      //データバインディングの例
      new Vue({
        el: '#binding',
        template: `
          <div>
            <p><input v-model="message"></p>
            <p>{{message}}</p>
          </div>
        `,
        data: {
          message: 'Hello World!'
        }
      })
      //componentの例
      Vue.component('count-button', {
          template:
            '<button v-on:click="increase">{{ count }} 回押しました</button>',
        data: function () {
          return {
            count: 0
          }
        },
        methods: {
          increase: function() {
            this.count++;
          }
        }
      })
      new Vue({ el: '#components-button'})
    </script>
</body>
</html>

ブラウザで表示すると以下のようになります。

f:id:tech-rakus:20190613154311g:plain — ブラウザでの実行

Vue.jsを簡単に導入するにはcdn.jsdelivr.netからソースを参照する方法があります。
その際は以下のように記述します。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

vue@2.6.10と記載するとバージョンを指定して使用することが出来ます。

また、Vue.jsでは、以下のように記述することで、VueインスタンスとHTML要素との紐づけが可能です。

new Vue({
    //<div id="binding"></div>と紐づけ
    el: '#binding',
    // ...略...
})

リアクティブなデータバインディング

el: '#binding'の部分ではデータの更新とDOMの更新を同期的に行っています。
input要素にv-modelというディレクティブを使用していますが、これによりリアクティブな入力データの同期を可能にしています。
v-model は、内部的には input 要素に応じて異なるプロパティを使用し、異なるイベントを送り出すという動きをしています。そのため、v-modelではform要素にあるvalue等の初期値を無視してしまうので、JavaScript側の data オプションの中で初期値を指定する必要があります。

data: {
  message: 'Hello World!'
}

今回はHello World!を初期値としているため、初期表示ではそのように出力されています。

コンポーネント

Vue.componentの部分では、<count-button>というコンポーネントを定義しています。コンポーネントとは、名前付きの再利用可能なVueインスタンスになります。 new Vueで作成されたルートVueインスタンス内 (今回はcomponent-button) でカスタム要素として使用できます。このように再利用できるのはとても便利です。

count-buttonの中で、v-on:clickという記述があると思います。

<button v-on:click="increase">{{ count }} 回押しました</button>

こちらはVue.js特有のv-onというディレクティブで、DOMイベント発火時の JavaScript の実行が可能になります。今回の場合は、ボタンをclickすることでincreaseという関数を呼んでいます。
increaseという関数はcountをインクリメントするという内容になっており、
クリックすると○回押しましたの数字がインクリメントされていきます。

また、Vue.jsではイベント修飾子というものを提供しており、それを用いてイベントを制限することもできます。例えば、以下のように記載するとボタンが1回しか押せなくなります。

<button v-on:click.once="increase">{{ count }} 回押しました</button>

f:id:tech-rakus:20190613153918g:plain — .onceを付けた結果

他にも様々なイベント修飾子がありますので、詳細は下記リンクを参照してください。
Vue.js公式 - イベントハンドリング

高速なレンダリング

Vue.jsではVirtual DOMを採用しているため、高速なレンダリング (表示処理) を可能としています。
Virtual DOMとは、その名の通り仮想のDOMになります。実際のDOMと同じ構造の仮想DOMを用意し、仮想DOMに対して処理を行います。そして、その結果生まれた差分だけを実際のDOMに反映します。この仕組みを用いることで、高速なレンダリングを可能にしています。

おわりに

今回はVue.jsの基礎的な部分について紹介させていただきました。
Vue.jsには今回紹介できなかった便利な機能が沢山ありますので、
次回はもっと掘り下げて紹介していければと思います。

参考にした記事

Vue.js公式ガイド

エンジニア中途採用サイト
ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております！
ご興味ありましたら是非ご確認をお願いします。

https://career-recruit.rakus.co.jp/career_engineer/
カジュアル面談お申込みフォーム
どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
以下フォームよりお申込みください。
forms.gle
イベント情報
会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com