WebデザイナーのためのVue.js事始め

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>

するとこんな感じでテキストが表示されます。簡単ですね！

デモの右上「Edit on CODEPEN」ボタンをクリックして別タブで表示した後、JavaScript コードをいじってあれこれ試してみてください！

ただ、これだけじゃ「HTML に直接テキストを書けばいいやんけ！」と、Vue.js の恩恵をまったく感じませんね…！ということで Web サイトを魅力的に動かすための、いくつかのコードを紹介します。

クリックしたら何かが起こる系

v-on:click を加えることで、クリックした時に何かしらイベントを発生できます。以下の例ではボタンをクリックすると japanese という関数が働いて日本語メッセージを表示しています。

v-on:click の代わりに v-on:mouseover を使うと、カーソルを合わせた時に何かが起こる系の動作を加えられますよ！公式サイトの「イベントハンドリング 」で詳しく解説されています。

入力したら何かが起こる系

フォームに入力したものを利用する場合は v-model が使えます。表示させるだけならとってもシンプルなコードで実装できますね。

公式サイトの「フォーム入力バインディング 」で詳しく解説されています。

プラグインも多数あります

jQuery と同様、Vue.js にも多くのプラグインが用意されています。プラグインファイルを読み込んだ後は Vue.use() で呼び出します。以下のサイトでプラグインやコンポーネントがまとめられているので、お気に入りを探してみてくださいね：

• プラグイン
• Awesome Vue.js
• Vue.js Script

Vue.js を使ったサンプルコード

簡単なコードで実装できるものを紹介していきます！コードはデモ画面の「HTML」「CSS」「JS」タブをクリックして表示できます。

1. ボックスを消す

指定したボタンをクリックすると、そのボタンのある Div 全体が消えます。お知らせ表示などに使えそう。

2. スライドパネル

「1. ボックスを消す」を応用させた、表示・非表示の切り替えができるパネルです。transition タグを使って動きをつけているのがポイント。これを使うと自動的にアニメーション用のクラスが付与されるので、CSS を使ってアニメーションを加えられます。公式サイトの「Enter/Leave とトランジション一覧」で説明されています。

3. 文字数カウント

length で文字数を数えます。さらに trim を使うことで、冒頭と末尾のスペース（空白）をカウントしない仕様にできます。

とにかくいろんなことができる Vue.js。ひとつの記事にまとめきれないので、またいずれ書いていこうと思います。個人的には jQuery で使っていたような簡単なフロントエンド周りの動きを Vue.js で使い、大規模なアプリ開発になると React や Angular 等が採用されるのかなと思っています。公式でも「他のフレームワークとの比較」で解説されているので、一読してみるといいですね。