ReactやAngularよりも手軽なフレームワークVue.jsの基本的な使い方!

みなさん、ReactやAngularといったフロントエンドフレームワークを使っていますか?

わたしは、フロントエンドエンジニアとして働いていることもあり、業務やプライベートで頻繁に利用しています。

今回は、わたしが使っている中で最も気軽にデータバインディング(jsでHTMLに表示するデータを管理すること)が実装できるVue.jsというフロントエンドフレームワークを紹介します!

Vue.jsは最も手軽にデータバインディングが出来るフレームワーク

Vue.jsのReactやAngularとの最も大きな違いは、その手軽さ!にあります。

Vue.jsなら、ReactやAngularのように初期のセットアップに時間をかけ、ゴリゴリと複雑なコードを書いていく必要がなく、手軽にデータバインディングをwebアプリに導入することができます。

そんな手軽にデータバインディングを利用できるVue.jsの簡単な使い方を以下で解説します!本当に簡単なので、ビックリしますよ!笑

※セットアップに関しては、公式サイトを参照してください。(cdnをhtmlのheadタグの中に記述するだけで以下のサンプルは動きます。)

 

Vue.jsの基本的な機能

これはデータをVue.js側に保持して、HTMLに描写する簡単なソースです。このソースを使って、1つずつVue.jsの基本的な機能を解説します。

※「わぁ!いきなりこんなに!」と焦らないで!1つずつ解説していきます。

 

Vue.jsをインスタンス化する

まず、<script>タグ内の1行目「new Vue」という記述で、Vue.jsをインスタンス化(Vue.jsを使うよ−!と宣言)します。

インスタンスする際に、HTMLのどの部分をVue.jsで管理するかを宣言します。今回の例では、htmlタグの<div id=”app”></div>で囲まれた部分をVue.jsで管理するため、「el」プロパティに「#app」を記述します。

 

データをストアする

Vue.jsやReactといったフロントエンドのフレームワークを利用する一番のメリット「データのストア」

js側でHTMLに描写するデータを保持(ストア)して、js内で状態(state)が変化したと同時にHTMLにも描写します。

Vue.jsの場合は、Vueをインスタンス化するタイミングで、「data」プロパティにストアしたいデータを記述することで、その内容を常にHTMLに反映します(jsでdata内の値を変更したら、その変更がHTMLにも即時反映される)

今回の例で言うと、「title・link・testLink」という3つの値をdataに渡しています。そして、この値がHTML側で宣言した部分に表示されます。例えば、titleだったら、<h1>タグ内で{{ title }}と記述されている部分に反映されます。

 

メソッドを登録する

Vue.jsをインスタンス化するときに、メソッドを登録しておけば、任意のタイミングでそのメソッドを実行出来ます。

メソッドでdataの値を変更すれば、ユーザーの操作に反応してデータを変更し、HTMLに即時反映することも可能になります。

今回の例でいうと、getHello()というメソッド内でdataに保存している「title」を変更します。

 

一度だけデータを描写するv-once

今回のソースのHTML側の1行目に記載されている

<h1 v-once>{{ title }}</h1>

という記述。

上記で説明してきた「data」の「title」に保持している値を描写してくれます。(表示したいdataのキーを{{ キー }}でHTML側に記述します。)

本来は、titleの値が変更された場合、このh1タグ内のtitleも変更されるのですが、ここでは「v-once」という記述がh1タグに追加されいるため、変更が発生しません。

この記述は「1度だけtitleを描写したら、それ以降、titleの値が変更されても再描写しない」という命令になっています。

そのため、一番最初に描写された「Hello World」という値が、getHello()メソッドでtitleの値を変更されても、「Hello!」に変わらなかったのです。

 

データを属性値に付与する

aタグに記述するリンク情報を、

<a href=”{{ link }}”>Link</a>

としても、正しく描写されません。

こういったHTMLの属性値にVue.jsで管理している値を代入する場合は、

<a v-bind:href=”link”>Link</a>

という風に、データをタグにbindさせます。

※「v-bind:href」は「:href」に省略できます。(<a :href=”link”>Link</a>)

 

HTMLタグをVue.jsで保持する

HTMLタグ自体をVue.jsのデータで管理したい場合もあるでしょう。(今回の例で言うと、testLink)

そういったHTMLタグを直接{{ … }}に囲んでも、エスケープされた文字列が表示されてしまいます。

これは当たり前で、XSS(クロスサイトスクリプティング)の危険性が高まるという理由から、タグ情報はエスケープして描写されるのです。

もし、どうしてもHTMLタグをVue.jsで描写したい場合は、XSSの可能性がないことを確認して、

<p v-html=”testLink”></p>

という書き方をしましょう。

 

イベントを登録する

webアプリを作る上でかかせないクリック等のイベント処理。

Vue.jsを使えば、簡単にイベントをハンドリングできます。

<button v-on:click=”clickMe”>Click Me!</button>

このように、イベントを結びつけたいDOMに「v-on:イベント名=”メソッド名”」という形でイベントとメソッドを記述するだけ。

あとは、Vue.jsをインスタンス化したときのmethods内の該当メソッドを呼び出してくれます。

※「v-on:click」は「@click」と省略できます(<button @click=”clickMe”>Click Me!</button>)

 

Vue.jsが使えれば、様々な現場で活躍できる

以上で、Vue.jsの基本的な機能の解説は終了です。とても簡単にデータ管理が出来ると思いませんか?

このようにVue.jsは非常に簡単で学習コストが低く、様々なweb制作現場で使われるようになってきています。

わたし自身もVue.jsを使用できるということで、単価の高いフリーランス案件を受けることが多く、「あー、フロントエンドエンジニアは儲かる職業だなぁ」と身をもって実感しています笑

みなさんも、Vue.jsでサクッとデータバインディングを覚えて、フロントエンドエンジニアとして活躍しましょう!

ABOUTこの記事をかいた人

新卒ノマドエンジニアとして独立し、半年で月収100万円を達成する。フリーランスのエンジニアとして活動しながら、事務所を売却(バイアウト)したり、Youtuber(最高月間視聴回数109万回、チャンネル登録者1万人)をしたり、Openrecの公式配信者としてゲーム生実況をしたり、ベンチャー企業のCOOをしたり、パラレルキャリアを歩んでいる。 2019年にミニマムライフコストを不労所得で稼げるようになったため、いまは好きなことだけ仕事にしています。