WebデザイナーのためのVue.js事始め
Vue.jsはサクッと小さく始められるJavaScriptのフレームワークです。「びゅー」と読みます ;) これまでWebデザイナーがjQueryで作成したような動きもVue.jsでも加えられるのですが、jQueryとは違ってHTMLに条件文を加えたり、アニメーションをCSSで設定することで、JavaScript自体のコードをあまり書かなくても実装できちゃいます。jQueryからの乗り換えを考えている方はぜひ検討してみてくださいね！
Vue.jsの使い方
Vue.jsは公式のドキュメントが日本語に対応しており、こちらを読むだけで基本的な使い方は理解できるはず。じっくり読んで、ご自身でもコードを書いて動作を確認し、身につけていくといいでしょう。
最初の一歩目の例として「JavaScriptで定義したテキストをHTMLに表示させる」というスーパーシンプルなコードを書いてみます。まずはVue.jsをHTMLファイル内に読み込みます：
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
続いてJavaScriptを書いていきます。el にはVue.jsを使ってあれこれしたい部分のID記述ましょう。ここでは「app」というIDをつけました。
さらにHTMLに表示させたいテキストを格納する箱の名前を「message」とし、実際に表示させる内容を「Hello Vue.js!」とします。
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
HTMLでは先程JavaScriptで定義したID「app」を属性で付与し、テキストを表示させたい部分に {{ message }} で記述します。{{ と }} で変数を囲むのがポイント！
<div id="app">
{{ message }}
</div>
するとこんな感じでテキストが表示されます。簡単ですね！
See the Pen Vue.js First Vue! by Mana (@manabox) on CodePen.
デモの右上「Edit on CODEPEN」ボタンをクリックして別タブで表示した後、JavaScriptコードをいじってあれこれ試してみてください！
ただ、これだけじゃ「HTMLに直接テキストを書けばいいやんけ！」と、Vue.jsの恩恵をまったく感じませんね…！ということでWebサイトを魅力的に動かすための、いくつかのコードを紹介します。
クリックしたら何かが起こる系
v-on:click を加えることで、クリックした時に何かしらイベントを発生できます。以下の例ではボタンをクリックすると japanese という関数が働いて日本語メッセージを表示しています。
See the Pen Vue.js First Click! by Mana (@manabox) on CodePen.
v-on:click の代わりに v-on:mouseover を使うと、カーソルを合わせた時に何かが起こる系の動作を加えられますよ！公式サイトの「イベントハンドリング 」で詳しく解説されています。
入力したら何かが起こる系
フォームに入力したものを利用する場合は v-model が使えます。表示させるだけならとってもシンプルなコードで実装できますね。
See the Pen Vue.js New Input! by Mana (@manabox) on CodePen.
公式サイトの「フォーム入力バインディング 」で詳しく解説されています。
プラグインも多数あります
jQueryと同様、Vue.jsにも多くのプラグインが用意されています。プラグインファイルを読み込んだ後は Vue.use() で呼び出します。以下のサイトでプラグインやコンポーネントがまとめられているので、お気に入りを探してみてくださいね：
Vue.jsを使ったサンプルコード
簡単なコードで実装できるものを紹介していきます！コードはデモ画面の「HTML」「CSS」「JS」タブをクリックして表示できます。
1. ボックスを消す
指定したボタンをクリックすると、そのボタンのあるDiv全体が消えます。お知らせ表示などに使えそう。
See the Pen Vue.js Closing box by Mana (@manabox) on CodePen.
2. スライドパネル
「1. ボックスを消す」を応用させた、表示・非表示の切り替えができるパネルです。transition タグを使って動きをつけているのがポイント。これを使うと自動的にアニメーション用のクラスが付与されるので、CSSを使ってアニメーションを加えられます。公式サイトの「Enter/Leave とトランジション一覧」で説明されています。
See the Pen Vue.js Slide Panel by Mana (@manabox) on CodePen.
3. 文字数カウント
length で文字数を数えます。さらに trim を使うことで、冒頭と末尾のスペース（空白）をカウントしない仕様にできます。
See the Pen vue.js counting text number by Mana (@manabox) on CodePen.
とにかくいろんなことができるVue.js。ひとつの記事にまとめきれないので、またいずれ書いていこうと思います。個人的にはjQueryで使っていたような簡単なフロントエンド周りの動きをVue.jsで使い、大規模なアプリ開発になるとReactやAngular等が採用されるのかなと思っています。公式でも「他のフレームワークとの比較」で解説されているので、一読してみるといいですね。
