Vue.jsとは？基礎から使い方までわかりやすく解説

現在フロントエンド界隈で大注目されてるVue.jsについて解説します。

Vue.jsとは

2014年に Evan Youによって「Angularの本当に好きだった部分を抽出して、余分な概念なしに本当に軽いものを作ること」を目的に作られたJSフレームワークです。

2018年にGithubのスター数が同じくJSフレームワークであるReact.js、Angular.jsを抜きました。

Vue.jsの特徴

Vue.jsの特徴は以下です。

• 他のフレームワークと違って直感的で比較的習得しやすい
• アプリケーションの規模に合わせて使い分けが可能
• 日本語に翻訳されたドキュメントがわかりやすい

一つずつ解説します。

他のフレームワークと違って直感的で比較的習得しやすい

Angular.jsやReact.jsが大規模で複雑なアプリケーションに向いているとしたらVue.jsは小規模からの開発が可能です。

トランスパイルせずとも動かすことができるので、導入から開発までのスピードが速く挫折者が少ないのが特徴です。

また、Angular.jsやReact.jsに挫折したり手間を感じた人がVue.jsに流れてくる傾向があります。

Vue.jsの場合、基本的に中身はいつものHTMLテンプレート、CSS、JavaScriptで書けるため習得しやすいです。

jQueryとの比較

同じくJSフレームワークであるReact.jsはjQueryの問題点を解決するために作られたのが始まりですが、Vue.jsも同じようにjQueryの問題点を解決しています。
下記がjQueryとVue.jsの比較です。

jQuery

• DOMの指定が必要
• Nodeをいちいち取得して内容を変更する処理が必要
• 複雑な仕様の場合、コードが肥大化し見通しが悪くなる

Vue.js

• DOMの操作が煩雑でない
• データとDOMが自動的に繋がる
• リアクティブを簡単に構築できる

以上が、jQueryとVue.jsの比較ですが簡単に一言でまとめるとリアクティブシステムを構築する際Vue.jsの方が簡単です。

Vue.jsの使いどころ

上記でも紹介したようにリアクティブなWebアプリケーションに向いています。

• todoリスト
• APIを介したデータ取得・表示アプリケーション
• シミュレーション
• 要素の並べ替え

以上のようなアプリケーションに向いている為、自社開発系企業で使われることが多いです。

最も簡単にVue.jsを動かしてみよう

JSFiddleやcodepenで試してみましょう。
リアクティブについてピンときてない方でも、実装することで体感できます。

JSFiddleを開いて上部のラベル「Vue」をクリックします。

次のように記述します。

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

JS

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

解説

コードの解説をします。

JS

appの範囲でVueが動作します。
dataオブジェクト内のmessageプロパティに初期値Hello Worldを設定します。

HTML

テキストで表示するにはマスタッシュ（ {{ }} ）で括り、プロパティをいれます。
input要素にはv-modelディレクティブにmessageプロパティを入れます。

入力欄に文字を入力すると表示されていた初期値「Hello World」も変更されたことが分かるはずです。
これがリアクティブです。

jQueryではこれほど簡単にはいかないですよね！

Vue.jsのインストール

Vue.jsでは小規模開発ではCDNを読み込むだけで利用できますが、大規模開発の際はcliをインストールします。

CDN

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue CLIの最新版インストール

npm install -g @vue/cli

大手自社開発企業が続々導入
Vue.jsは以下の大手自社開発企業で採用されています。

• アリババ
• GitLab
• Adobe
• 食べログ
• 任天堂
• @cosme
• エキテン
• 楽天
• IBM
• LINE

多くの大手企業がVue.jsを採用しているため、今後もVue.jsの求人は高まってくると予想されます。

まとめ

この記事ではVue.jsの基礎から使い方までわかりやすく解説しました。

サンプルプログラムで紹介したようにVue.jsでは簡単な開発からスタートができるのでプログラミングを楽しみたい方におすすめです。
もし、この記事を読んでVue.jsに興味が持てたらぜひ学習してみてください。

＼　ログインしなくても検討機能が使える♪　／

Vue.jsの案件を見てみる