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

シェアする

コメント

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)