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等が採用されるのかなと思っています。公式でも「他のフレームワークとの比較」で解説されているので、一読してみるといいですね。