Vue.jsについての解説

2018年10月08日

Vue.jsとは

Vue.jsとは、javasriptを使ってサイトを構築するときに役に立つフレームワークです。

もともと、javascriptでサイトを構築する場合には、jqueryが便利でよく使われていて、様々な表現をするのに定番となっていました。

しかし、サイト構築にjavascriputが使われるうち、より大規模に使用したり複雑な処理を行う場合、jqueryで行う場合に処理が遅かったり、または実装する際に複雑になったりする問題が起きてきました。

そこで、Jqueryに替わるjavascriptのフレームワークとして、angular.jsや、React.js、Vue.jsなどがよく使用されるようになってきました。

これらのフレームワークは、javascriptを使ってより複雑なサイトを構築したり表現をするのに有力な選択肢となります。

中でもVue.jsは、一番熱い？フレームワークとなっています。

Google Trendsで検索回数を調べてみても、Reactやangularよりもより多く検索されているようで、Githubでのスターの数も多いようです。

開発は、もともとGoogleでangular.jsを開発していた中国人の方がされているようです。

使い方

Vue.jsの読み込み

ヘッダに以下を記述でインストールできます。

読み込むスクリプトは、jqueryなどと同様に、完全版やmin、runtime版など様々なビルドがあります。

軽量化したいのであれば、なるべく必要最小限のものを読み込んだほうが容量が少なくなります。

記述の仕方

通常のjavascriptであれば、まずは普通にhtmlを記述して、javascriptの処理をヘッダ内、あるいはヘッダ内で読み込む外部のjsファイルに記述します。

htmlはidやクラスでコーディングし、それをjsで操作するといったイメージです。

Vue.jsの場合は、Vue.jsの独特の記法でhtmlの関連する箇所を記述していきます。

また、javascirptも、Vue.jsの独特の記法があります。

まずは、使うにあたって、これらを覚える必要があります。

ただ、htmlはhtmlとして書いて、javascirptの処理は外部から読み込むと、この流れは同じです。

ただし、記法は独特です。

Vue.jsのサンプル

公式サイトで様々なVue.jsを使った実装のサンプルを見ることができます。

https://vuejsexamples.com/

記述例

id=”app”を最初に定義して、その中にmessageと呼ばれる変数があります。

スクリプト内でVueモデルを定義して、ID=appのmessageに’Hello Vue!’を代入します。

これ自体は単純な処理なのでVue.jsを使うまでもありませんが、スクリプトを変更することで、メッセージも変更できます。

Hover your mouse over me for a few seconds to see my dynamically bound title!

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})

メッセージにマウスオーバーすると、日付が含まれた吹き出しが表示されます。
最初の構文と比較すると、メッセージそのものを変数で表示しているわけではないですが、app-2と定義されたVueオブジェクトに対して、
で囲まれたテキストをbindと呼ばれる構文を使うことで、タイトル要素を与えています。
このv-vindのようなVue.js独特の記述を「ディレクティブ」と呼びます。

通常であればほげほげのように記述しますが、Vue.jsを使うことで、title属性を日付などの動的な要素として定義できています。

Now you see me

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

上記の例では「Now you see me」というテキストが表示されるだけですが、v-ifディレクティブを使うことで、trueを代入することで、表示されています。
seen = falseに変更することで非表示になります。

{{ todo.text }}

上記の例では、Vueオブジェクトに対してv-forディレクティブを適用することで、
for文のように処理を実装しています。

上記の例では、Vueオブジェクトに対してメッセージを定義していますが、
関数を定義していて、Vueオブジェクトのメッセージの文字列を分割して逆さまにして結合するという、
ボタンをクリックすることで文字列を逆順にする処理を実装しています。

上記の例では、Vueオブジェクトにテキストメッセージを表示していますが、
その下の入力エリアにv-modelディレクティブを定義することで、入力した内容がメッセージに対してすぐに反映されるようにいなっています。

コンポーネント

上記の例では、Vueオブジェクトに対して「todo-item」というコンポーネントを定義しています。
ここでは、サイトに表示した「todo-item」の要素に対して「this is todo」というリストが表示されるだけです。

コンポーネントとは、サイトの中で使うパーツのかたまりのようなものです。
コンポーネントを定義して、そのコンポーネントの中に、htmlの記述とデータ要素を記述します。

あとは、サイト上から定義したコンポーネントを呼び出すことができますが、同じ要素を繰り返し使用する場合はコンポーネントとして定義しておくことで繰り返し使用でき記述が簡潔になる他、修正も容易になります。

コンポーネント内で、さらに別のコンポーネントを呼び出すことが可能です。

cliツール

vue.jsは、cliツールを使うことで、必要なファイルセット一式がセットになってプロジェクトが作成され、フレームワークのようにウェブアプリを開発することができます。

npmコマンドでcliツールをインストール

npm i -g @vue/cli

vue create プロジェクト名

上記コマンドで、以降必要な設定画完了後、プロジェクト名のフォルダ以下に、必要なファイル一式がダウンロードされる。

ちなみに、上記をコマンドラインでなく、ウェブページ上のGUIで行うこともできます。

vue ui

上記コマンドを実行することで、Webサーバが立ち上がってそこでプロジェクトの作成を行うことも可能です。