みなさん、ReactやAngularといったフロントエンドフレームワークを使っていますか？
わたしは、フロントエンドエンジニアとして働いていることもあり、業務やプライベートで頻繁に利用しています。
今回は、わたしが使っている中で最も気軽にデータバインディング(jsでHTMLに表示するデータを管理すること)が実装できるVue.jsというフロントエンドフレームワークを紹介します！
Vue.jsは最も手軽にデータバインディングが出来るフレームワーク
Vue.jsのReactやAngularとの最も大きな違いは、その手軽さ！にあります。
Vue.jsなら、ReactやAngularのように初期のセットアップに時間をかけ、ゴリゴリと複雑なコードを書いていく必要がなく、手軽にデータバインディングをwebアプリに導入することができます。
そんな手軽にデータバインディングを利用できるVue.jsの簡単な使い方を以下で解説します！本当に簡単なので、ビックリしますよ！笑
※セットアップに関しては、公式サイトを参照してください。(cdnをhtmlのheadタグの中に記述するだけで以下のサンプルは動きます。)
Vue.jsの基本的な機能
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<div id="app"> <h1 v-once>{{ title }}</h1> <div><a v-bind:href="link">Google</a></div> <div>{{ getHello() }}</div> <p v-html="testLink"></p> <button v-on:click="clickMe">Click Me!</button> </div> <script> new Vue({ el: "#app", data: { title: 'Hello World', link: 'http://test.test.com', testLink: '<a href="http://test.test.com">Test</a>' }, methods: { getHello() { this.title = "Hello!"; return this.title; }, clickMe() { alert("Click Me !"); } } }) </script> |
※「わぁ！いきなりこんなに！」と焦らないで！１つずつ解説していきます。
Vue.jsをインスタンス化する
まず、<script>タグ内の1行目「new Vue」という記述で、Vue.jsをインスタンス化(Vue.jsを使うよ−！と宣言)します。
インスタンスする際に、HTMLのどの部分をVue.jsで管理するかを宣言します。今回の例では、htmlタグの<div id=”app”></div>で囲まれた部分をVue.jsで管理するため、「el」プロパティに「#app」を記述します。
|
1 2 3 4 5 6 |
<script> new Vue({ el: "#app", ... }) </script> |
データをストアする
Vue.jsやReactといったフロントエンドのフレームワークを利用する一番のメリット「データのストア」。
js側でHTMLに描写するデータを保持(ストア)して、js内で状態(state)が変化したと同時にHTMLにも描写します。
Vue.jsの場合は、Vueをインスタンス化するタイミングで、「data」プロパティにストアしたいデータを記述することで、その内容を常にHTMLに反映します(jsでdata内の値を変更したら、その変更がHTMLにも即時反映される)
|
1 2 3 4 5 6 7 8 9 10 |
<script> new Vue({ el: "#app", data: { title: 'Hello World', link: 'http://test.test.com', testLink: '<a href="http://test.test.com">Test</a>' } }) </script> |
今回の例で言うと、「title・link・testLink」という３つの値をdataに渡しています。そして、この値がHTML側で宣言した部分に表示されます。例えば、titleだったら、<h1>タグ内で{{ title }}と記述されている部分に反映されます。
メソッドを登録する
Vue.jsをインスタンス化するときに、メソッドを登録しておけば、任意のタイミングでそのメソッドを実行出来ます。
メソッドでdataの値を変更すれば、ユーザーの操作に反応してデータを変更し、HTMLに即時反映することも可能になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script> new Vue({ el: "#app", data: { title: 'Hello World', link: 'http://test.test.com', testLink: '<a href="http://test.test.com">Test</a>' }, methods: { getHello() { this.title = "Hello!"; return this.title; } } }) </script> |
今回の例でいうと、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でサクッとデータバインディングを覚えて、フロントエンドエンジニアとして活躍しましょう！
