【人気フレームワーク】Vue.jsとは？

こんにちは、イチアール株式会社人事担当です。

近年、使い勝手の良いJavaScriptフレームワークということでVueが注目を集めていますが、本記事では、そんなVueについてご紹介していきます。

Vue 何がすごい？

Vueはシンプルでありながら機能性が豊富、自由度が高い、学習しやすい、といった点から人気のあるJavaScriptフレームワークです。JavaScriptのフレームワークは数が多く、また人気のあるフレームワークだけでも複数種類あります。

Vueも人気のフレームワークの一つなのですが、他の人気フレームワークと比較するとよく使われる機能に厳選されていて、使いやすいという点に魅力があります。一言で言うなら、シンプルイズベストと言えるでしょう。

Vue なぜ使う？

Vueを使う理由は、シンプルイズベスト、コストパフォーマンスが良い、などです。たとえば、Vueはコードが最適化されていて、読み込み時間を最小限にできます。

プラスアルファの要素としては、SEO最適化も挙げられます。VueはGoogleの検索エンジンがサイト内のコンテンツを読み取りやすいように、サーバーサイドの情報を整理します。

他にもVueの機能は多数ありますが、基本的にフレームワークは機能が多くなれば多くなるほど、使いこなすのが難しくなります。機能を減らせば学習コストは下がりますが、当然できることが減ります。

Vueは多くの人が必要とする機能に絞って提供することで、学習コストを下げています。機能性の学習コストはトレードオフの関係になっているので、Vueは多くの人にハマるバランスになっています。

Vueとreact どっち？

Reactは2013年にFacebookによって開発されたライブラリです。ReactにはDeclarativeと呼ばれる機能があり、UIのビジュアルを宣言する形でプログラミングができます。UIのビジュアルを宣言するということは、コードを見ただけで画面の様子がわかるということです。またプログラムをコンポーネントと呼ばれるパーツにして、それを使いたい箇所で繰り返し呼び出すことが可能です。

VueとReactの大きな違いとしては、Vueがフレームワークであるのに対し、Reactはライブラリであるということです。フレームワークはプログラミングする際に土台となるので、フレームワークに乗っ取ってコードを書くことになります。

ライブラリはあくまでも便利機能を集めたものなので、必要なときに必要な機能を引用するイメージです。

VueJSの開発元は？

VueJSは2014年に米国在住中国人のEvan Youが開発しました。またEvan YouがVueJSを開発した際は、Googleに在籍していました。現在はGoogleは退職しています。

Vueの種類は？

Vueには複数の種類があり、以下が挙げられます。

・CDN
・Vue-cli
・npm

CDNは、HTMLにタグを埋め込む形で使用します。お手軽版といったイメージで、CDN版と呼ばれることが多いです。比較的小規模のアプリを作る際にCDN版が使われます。

Vue-cliはVueの機能が網羅的に含まれたパックです。多くが含まれているので人によっては不要な機能も含まれる可能性がありますが、CDNに比べると規模の大きいアプリにも対応できます。

npmはVueのパッケージツールです。設定ファイルなどを自分でカスタマイズすることが可能です。

また、Vueでは必要なプラグインを追加できます。同様に、UIフレームワークのテンプレートも用意されているので、必要であれば追加で導入できます。

Vue どこに書く？

Vueは、Scriptタグでの宣言、HTML側での宣言、Scriptタグ以降の処理記述が必要です。具体的には以下のようになります。

・Scriptタグでの宣言

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

・HTML側での宣言

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

・Scriptタグ以降の処理記述

var app = new Vue({
el: '#app',
data: {
message: 'Vueの処理記述'
}
})

全体としては以下のようになります。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>sample</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script language="javascript" type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Vueの処理記述'
}
})
</script>
</body>
</html>

以上で、Vueを使用して「Vueの処理記述」という表示ができます。