【Vue.js入門】Vue.jsを使ってインタラクティブなユーザーインターフェイスを構築する方法

こんにちは、2018年冬アニメは観たいアニメが多すぎて録画がどんどん溜まっていっています。
アートディレクターの奥田です。

今期アニメで中でもオススメなのが「ヴァイオレット・エヴァーガーデン」、「よりもい（宇宙よりも遠い場所）」「ゆるキャン△」「りゅうおうのおしごと！」このあたりでしょうか。
みなさんもぜひご覧ください。

さて、インタラクティブなユーザーインターフェイスを構築する際にフロントエンドフレームワークを使うとメンテナンス性の高い構築が可能です。
ただ、ReactやAngularなどリッチなフレームワークを導入しようと思うと学習コストも高く、一筋縄では行かない事が多いです。
そんな時、「Vue.js」を使うととても簡単にインタラクティブなユーザーインターフェイスを構築することができます。
今回はVue.jsをつかって簡単にインタラクティブなユーザーインターフェイスを構築する方法をご紹介したいと思います。

Vue.jsとは？
使い方
配列をループで表示する
フォームの値を設定する
イベントを設定する
値を評価して要素を表示したり非表示にしたりする
さいごに

Vue.jsとは？

Vue.jsはユーザーインターフェイスを構築するためのプログレッシブフレームワークです。
他のフレームワークとは異なり、Vue.jsは少しずつ適用していけるように設計されています。
そのため、他のライブラリや既存のプロジェクトに統合することも可能です。

Vue.js

Vue.js
“Vue.js”（ヴュージェイエス）は、Webアプリケーションにおけるユーザーインターフェイスを構築するための、オープンソースのJavaScriptフレームワークである。他のJavaScriptライブラリを使用するプロジェクトへの導入において、容易になるように設計されている。一方で高機能なシングルページアプリケーション（SPA）を構築することも可能である。
https://ja.wikipedia.org/wiki/Vue.js

使い方

まずはインストールします。
Vue.jsはCDNで簡単に使用することができます。

<script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script>

Vue を読み込んだ後に以下のように記述します。
elはVue.jsで管理したい要素を記述します。
data内にデータを記述します。

new Vue({
  el: '#app',
  data: {
    name: 'Mineo Okuda'
  }
});

#appを作成し、Vue側で指定したdata内の名前を {{}} で囲います。

<div id="app">
		<div class="container">My name is {{name}}.</div>
</div>

DEMOをみる

また、Vueが適用されるまでの間に{{hoge}}が見えてしまって不細工になってしまうという場合はv-htmlやv-textアトリビュートで指定することで同じ結果が得られます。
v-textはエスケープされることに注意してください。

new Vue({
	el: '#app',
	data: {
		str: 'Hello World!'
	}
});

<div v-text="str"></div>
<div v-html="str"></div>

DEMOをみる

配列をループで表示する

配列をループで表示したい場合はv-forを使います。
(value,index)とすることで配列のインデックスが取得できます。

new Vue({
	el: '#app',
	data: {
		fruits : [
			"Apple",
			"Banana",
			"Cherries",
			"Orange",
		]
	}
});

<li v-for="(fruit,index) in fruits" class="list-group-item">
	{{ index+1 + '. ' + fruit }}	
</li>

DEMOをみる

フォームの値を設定する

フォームの値はv-modelで管理することができます。

<div class="pb-2">
	<input type="text" class="form-control" placeholder="Typing here..." v-model="text_data">
</div>
<div class="pb-4" v-text="text_data"></div>

ラジオボタンの場合v-modelに同じ値を入れます。

<label class="mr-2">
	<input type="radio" v-model="radio_data" value="Apple">
	Apple
</label>
<label class="mr-2">
	<input type="radio" v-model="radio_data" value="Grape">
	Grape
</label>

<div class="pb-2">
	<p>Checked item is {{ radio_data }}.</p>
</div>

この時、空の値であったとしてもdataの中には値を宣言しておく必要があります。

new Vue({
	el: '#app',
	data: {
		text_data: "",
		radio_data : "Grape",
		select_data : ""
	}
});

DEMOをみる

イベントを設定する

v-on:を使えばイベントハンドラを登録できます。
またv-on:clickは@clickに省略することもできます。

<div class="input-group">
	<input type="text" class="form-control" placeholder="Add fruit name" v-model="add_fruit">
	<div class="input-group-append">
		<button class="btn btn-primary px-5" type="button" v-on:click="_add_fruit_name">Add</button>
	</div>
</div>

methodsにイベントを設定できます。

new Vue({
	el: '#app',
	data: {
		add_fruit: "",
		fruits : [
			"Apple",
			"Banana",
			"Cherries",
			"Orange",
		]
	},
	methods : {
		_add_fruit_name : function(){
			this.fruits.push(this.add_fruit);
			this.add_fruit = "";
		}
	}
});

入力した値を配列に追加した例です。
このようにVue.jsではインタラクティブなフォームをとても簡単に実装できます。

DEMOをみる

また、引数を取得することでループ内のインデックスを取得し、変更することができます。

<li v-for="(fruit, index)  in fruits" class="list-group-item list-group-fruit">
	{{ fruit }}	
	<button type="button" class="close" v-on:click="_remove_fruit_name(index)">
		<span aria-hidden="true">&times;</span>
	</button>
</li>

new Vue({
	el: '#app',
	data: {
		add_fruit: "",
		fruits : [
			"Apple",
			"Banana",
			"Cherries",
			"Orange",
		]
	},
	methods : {
		_add_fruit_name : function(){
			// 先頭に追加
			this.fruits.unshift(this.add_fruit);
			// 末尾に追加
			//this.fruits.push(this.add_fruit);
			this.add_fruit = "";
		},
		_remove_fruit_name : function(i){
			this.fruits.splice(i,1);
		}
	}
});

リストの削除を実装した例です。
リスト内の「ｘ」をクリックするとリストを削除できます。

DEMOをみる

値を評価して要素を表示したり非表示にしたりする

値を評価して要素を表示したい場合にはv-ifやv-showを使用します。
v-ifは値がfalseであった場合、ソース上に要素自体が存在せず、v-showは要素が非表示になっています。

例えば目的の都道府県を選択する仕様では、エリアを選択してから都道府県を選択させたい場合などにとても便利です。
必ずエリアを選択しないと都道府県がでてこないようにすることができます。

<div class="form-group row justify-content-center">
	<label class="col-sm-2 col-form-label">Area</label>
	<div class="col-sm-4">
		<select class="form-control" v-model="selected_area" v-on:change="_set_area">
			<option value="">エリアを選択</option>
			<option v-for="(area, index) in areas" v-bind:value="index">{{area}}</option>
		</select>
	</div>
</div>
<div class="form-group row justify-content-center" v-if="selected_prefs.length > 0">
	<label class="col-sm-2 col-form-label">Prefecture</label>
	<div class="col-sm-4">
		<select class="form-control" v-model="selected_pref">
			<option value="">都道府県を選択</option>
			<option v-for="(prefs, index) in selected_prefs">{{prefs}}</option>
		</select>
	</div>
</div>

new Vue({
	el: '#app',
	data: {
		selected_area: "",
		selected_pref : "",
		selected_prefs: [],
		areas : [
			"北海道・東北",
			"関東",
			"中部",
			"近畿",
			"中国・四国",
			"九州・沖縄"
		],
		pref : [
			[
				"北海道",
				"青森県",
				"岩手県",
				"宮城県",
				"秋田県",
				"山形県",
				"福島県"
			],
			[
				"茨城県",
				"栃木県",
				"群馬県",
				"埼玉県",
				"東京都",
				"千葉県",
				"神奈川県"
			],
			[
				"新潟県",
				"長野県",
				"山梨県",
				"富山県",
				"石川県",
				"福井県",
				"岐阜県",
				"静岡県",
				"愛知県",
			],
			[
				"滋賀県",
				"京都府",
				"大阪府",
				"奈良県",
				"兵庫県",
				"和歌山県",
				"三重県"
			],
			[
				"鳥取県",
				"島根県",
				"岡山県",
				"広島県",
				"山口県",
				"徳島県",
				"香川県",
				"愛媛県",
				"高知県"
			],
			[
				"福岡県",
				"佐賀県",
				"長崎県",
				"熊本県",
				"大分県",
				"宮崎県",
				"鹿児島県",
				"沖縄県"
			]
		]
	},
	methods : {
		_set_area : function(){
			this.selected_pref = "";
			this.selected_prefs = this.pref[this.selected_area];
		}
	}
});

DEMOをみる

さいごに

いかがだったでしょうか？
Vue.jsを使えばとても簡単にインタラクティブなコンテンツを構築できます。
さらにcss in jsを使ってコンポーネント化ができたりと柔軟です。
皆様も是非制作にご活用ください。

ウィルスタイル株式会社 / Will Style Inc.

Blog スタッフブログ