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

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

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.default

 

Vue.jsでできること②Windowsの画面を再現

 

Vue.jsではあらゆるタイプのUIを作成することができます。このスニペットのようなクラシックなWindowsの画面を模したアプリをつくることも可能です。

 

See the Pen Vindue 98 by Miles Manners (@milesmanners) on CodePen.default

 

Vue.jsでできること③本格的なチャットアプリ

 

Vue.jsは本格的なチャットアプリを作成することも得意です。下のスニペットではアカウントを作成し実際にチャットをすることも可能です。

 

See the Pen Vue + Firebase Message App V2 by Mike Weaver (@mjweaver01) on CodePen.default

 

Vue.jsでできること④検索機能

 

以下のスニペットは、指定された単語のWikipediaページを探す検索機能です。Vue.jsをつかうことで、ユーザーにとって使いやすいUIデザインが施されています。

 

See the Pen Wikipedia Morphing Search by Rian Pauzi (@tekon92) on CodePen.default

 

Vue.jsでできること⑤ソート機能

 

以下のスニペットは「映画興行収入ランキング」のデータを、ソート&フィルタリングできるようにしたものです。項目ごとにデータをソートしたり、検索機能で特定の映画を検索したりできます。

 

See the Pen Top grossing films Vue table by Andrea Goodson (@AKGD) on CodePen.default

 

 

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.default

 

クリック時にイベントを発生させる

 

v-on:click を加えることで、クリック時にイベントを発生させることができます。

下の例ではボタンをクリックすると japanese という関数が働いて日本語のメッセージが表示されます。

 

See the Pen Vue.js First Click! by Mana (@manabox) on CodePen.default

 

スライドパネル

 

ボタンを押すと表示・非表示の切り替えができます。transition タグを使うとアニメーション用のクラスが付与されるので、CSSを使ってアニメーションを加えることができます。

 

See the Pen Vue.js Slide Panel by Mana (@manabox) on CodePen.default

 

まとめ

 

今後はこれまでjQueryで記述されていた動きをVue.jsで実装する機会も増えてくるかもしれません。とても優れたフレームワークなので、今後も需要は高まり続けるでしょう。
また学習のハードルも低くJavaScript初心者にも使いやすいフレームワークなので、興味のある方は公式サイトを一読しても良いかもしれません。

 

参考サイト

 

Vue.jsでできること8選。凄さが分かる実用例スニペット集

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