最近日本で人気のJavaScriptフレームワーク、Vue.jsとは何か説明します |

こんにちは、mabuiです。
2018年8月現在、JavaScriptの主要なフレームワークといえば
Anguler, React, Vueの三択ですが、
その中でも最近人気なのがVue.jsです。

エージェントの営業さんとも最近話した所、Reactの需要は落ち着いてきていて、新規で始まるプロジェクトではVue.jsの採用が増えているみたいです。

そこでこの記事ではVue.jsとは何か、メリデメ、おすすめの関連ライブラリを書いていきます。

Vue.jsとは

JavaScriptのフレームワークで、コンポーネント指向で仮装DOMを扱います。
コンポーネントとは、デザインと機能を合わせたUIパーツ一つずつの小さなまとまりで、再利用可能なコンポーネントを組み合わせることでアプリケーションを構築します。
具体的なコンポーネントとは、Vueのインスタンスです。

リアクティブ

HTML

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

</div>

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

var app = new Vue({

el: '#app',

data: {

message: 'Hello Vue!'

}

})

上記の場合、HTML側ではHello Vue!が表示されますが、
messageの値が書き換えられると、それに応じて表示も更新されます。
このように、データとDOMは全てリアクティブな関係になっています。

HTML

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>

Hover your mouse over me for a few seconds

to see my dynamically bound title!

</span>

</div>

また、v-bindといったディレクティブと呼ばれる要素を使用することで、title属性など、特定の表現を指定してリアクティブにできます。

HTML

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

<p>{{ message }}</p>

</div>

v-modelディレクティブを使用することで、フォームの入力に合わせてアプリの状態を変化させれる双方向バインディングを簡単に実行可能です。
例えば入力値をリアルタイムに画面表示ができたりします。

Vue.jsのメリット

日本語ライブラリが豊富

同じコンポーネント指向であるReactと比べて、日本語ライブラリが豊富で、学習がしやすいです。

ReactやAngularに似ている

後発のため、両方のいいところどりしている印象があります。
先ほど紹介したディレクティブの仕組みは、AngularのDirectiveと似ています。

そのほか開発のペースが早く、むやみやたらにライブラリが乱立していないのが良い所です。

Vue.jsのデメリット

Reactよりはライブラリが少なめです。
また、スマホアプリ開発はReact nativeのあるReactの方が優勢で、現状スマホアプリ作りたいならReactを選んだ方がいいです。

開発元

GoogleでAngulerを使用した開発に携わったエヴァン・ヨーによって開発されました。
元が個人開発のため、ReactのFacebookのように大企業の元で開発されているプロジェクトではないです。
ですが今現在githubではReactやAngulerを超えてスター数の多いプロジェクトになっています。

最近日本で人気のJavaScriptフレームワーク、Vue.jsとは何か説明します

Vue.jsとは

リアクティブ

Vue.jsのメリット

日本語ライブラリが豊富

ReactやAngularに似ている

Vue.jsのデメリット

開発元

おすすめ関連ライブラリ

Vue CLI

Vuex

Vue Router

Vue.js devtools

Element

Onsen UI for Vue

Nuxt.js