Vue.jsはクライアントサイドで使われるJavaScriptのフレームワークです。近年注目を集めているフレームワークですが、 これまでWebデザイナーがjQueryを使って実装した動きをVue.jsでも実現できるほか、HTMLに条件文を記述しアニメーションをCSSで設定することでJavaScriptの記述を最小限に抑えることができます。今回は、Vue.jsでできることと、Web制作で実際に使えるVue.jsのかんたんな解説をしたいと思います。
Vue.jsでできること
学習コストが低く、個人開発から大規模開発まで適しているなどの理由から近年最もよく使われているJavaScriptのフレームワークのひとつに、Vue.jsがあります。
Vue.jsを使うことで複雑なUIを比較的簡単に構築することができ、HTML、CSSやJavaScriptの基礎知識があれば学習コストもかかりません。
ではVue.jsを使ってどんなものが作れるのか、以下の5つの例を見ていきましょう。
Vue.jsでできること①グラフの作成
チャートやグラフは、Vue.jsが得意とするコンテンツです。このグラフではVue.jsを使ってデータを扱い、なめらかなアニメーションを作り出しています。
See the Pen vue-highcharts demo – Access `chart` instance via refs by Zhenye Wei (@weizhenye) on CodePen.
Vue.jsでできること②Windowsの画面を再現
Vue.jsではあらゆるタイプのUIを作成することができます。このスニペットのようなクラシックなWindowsの画面を模したアプリをつくることも可能です。
See the Pen Vindue 98 by Miles Manners (@milesmanners) on CodePen.
Vue.jsでできること③本格的なチャットアプリ
Vue.jsは本格的なチャットアプリを作成することも得意です。下のスニペットではアカウントを作成し実際にチャットをすることも可能です。
See the Pen Vue + Firebase Message App V2 by Mike Weaver (@mjweaver01) on CodePen.
Vue.jsでできること④検索機能
以下のスニペットは、指定された単語のWikipediaページを探す検索機能です。Vue.jsをつかうことで、ユーザーにとって使いやすいUIデザインが施されています。
See the Pen Wikipedia Morphing Search by Rian Pauzi (@tekon92) on CodePen.
Vue.jsでできること⑤ソート機能
以下のスニペットは「映画興行収入ランキング」のデータを、ソート＆フィルタリングできるようにしたものです。項目ごとにデータをソートしたり、検索機能で特定の映画を検索したりできます。
See the Pen Top grossing films Vue table by Andrea Goodson (@AKGD) on CodePen.
Vue.jsを使ったサンプルコード
Vue.js は 公式マニュアルの日本語翻訳率も充実しているので、こちらを確認して開発するのが良いでしょう。
Vue.jsを読み込む
まずはVue.jsを読み込みましょう。
Vue.jsを読み込むには、node.jsの環境を構築して読み込む方法とCDNを読み込む方法がありますが、今回は最も簡単なCDNで読み込みをしましょう。
HTMLの部分にVue.jsの読み込みを記述します。
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Vue.jsを記述する
次にVue.jsを記述します。el: の部分にVue.jsを適用したい部分のidを指定します。またHTMLに表示させたい内容をmessageの中に記述し、HTMLで{{ message }}を呼び出すとテキストが表示されます。
See the Pen Vue.js First Vue! by Mana (@manabox) on CodePen.
クリック時にイベントを発生させる
v-on:click を加えることで、クリック時にイベントを発生させることができます。
下の例ではボタンをクリックすると japanese という関数が働いて日本語のメッセージが表示されます。
See the Pen Vue.js First Click! by Mana (@manabox) on CodePen.
スライドパネル
ボタンを押すと表示・非表示の切り替えができます。transition タグを使うとアニメーション用のクラスが付与されるので、CSSを使ってアニメーションを加えることができます。
See the Pen Vue.js Slide Panel by Mana (@manabox) on CodePen.
まとめ
今後はこれまでjQueryで記述されていた動きをVue.jsで実装する機会も増えてくるかもしれません。とても優れたフレームワークなので、今後も需要は高まり続けるでしょう。
また学習のハードルも低くJavaScript初心者にも使いやすいフレームワークなので、興味のある方は公式サイトを一読しても良いかもしれません。
参考サイト
