サイトトップ

Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

Vue.js + ES6: コンポーネントをラップする


Vue.js公式サイトの「ラッパーコンポーネントの例」は、カスタムコンポーネントの中にjQueryプラグインSelect2をラップして用いています。本稿では、この作例を下敷きにして、コードをより簡潔に書き改めました。また、応用例も加えてあります。なお、使う構文はECMAScript 2015 (ECMAScript 6)です。

01 コンポーネントでjQueryプラグインSelect2のドロップダウンリストを使う

Select2はjQueryのプラグインで、<select>要素のドロップダウンリストにさまざまな表現や機能が加えられます。HTMLドキュメントには、Vue.jsに加えて、jQueryとSelect2のライブラリおよびSelect2のCSSファイルもCDNから読み込んでおきます。なお、Select2の基本的な使い方については「jQuery: プラグインSelect2で<select>要素のドロップダウンリストを操作する」をお読みください。


<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.15/dist/vue.js"></script>

Vue.jsのアプリケーションを組み込むのは<div>要素で、id属性(demo)を与えておきます。

<body>要素

<div id="demo"></div>

VueアプリケーションのJavaScriptコードはつぎのとおりです。以下のテンプレートを定め、DOMの読み込みが済んだら(DOMContentLoadedイベント)対象の要素にvm.$mount()メソッドでアプリケーションを組み込みます。テンプレートには、このあと定めるコンポーネント(select2)の要素が加えてあります。

JavaScriptコード

const vm = new Vue({
	template: '#demo-template'
});
document.addEventListener('DOMContentLoaded', (event) =>
	vm.$mount('#demo')
);

テンプレート

<script type="text/x-template" id="demo-template">
	<div>
		<select2>
		</select2>
	</div>
</script>

コンポーネント(select2)のJavaScriptコードとテンプレートは以下のとおりです。vm.$elプロパティはVueインスタンスのルートとなるDOM要素を参照します。そのjQueryセレクタに対してselect2()メソッドを呼び出すことによりSelect2が初期化されるのです(「Basic usage」参照)。

JavaScriptコード

Vue.component('select2', {
	template: '#select2-template',
	mounted() {
		$(this.$el)
		.select2();
	}
});

テンプレート

<script type="text/x-template" id="select2-template">
	<select>
		<option value="0">Vue.js</option>
		<option value="1" selected>React.js</option>
		<option value="2">Angular</option>
	</select>
</script>

これで、Select2のスタイルのドロップダウンリストがページに加わります(図001)。もっとも、アプリケーションとコンポーネントの間でとくにデータのやり取りはありません。ドロップダウンリストとしてのふるまいを見せるだけです。

図001■Select2のドロップダウンリスト

図001

02 Select2で項目データからドロップダウンリストをつくる

Select2は、項目のデータから動的にリストがつくれます。データの配列(options)を定めるのはアプリケーションのdataプロパティで、要素とする項目データはオブジェクトです。 プロパティのidは値、textが項目名としてリストに示されます。データをコンポーネントに渡すには、テンプレートでその要素(select2)にv-bindディレクティブ(省略記法:)でバインディングしなければなりません。

JavaScriptコード

const vm = new Vue({
	template: '#demo-template',
	data: {
		options: [
			{id: 0, text: 'Vue.js'},
			{id: 1, text: 'React.js'},
			{id: 2, text: 'Angular'}
		]
	}
});

テンプレート

<select2 :options="options">
</select2>

コンポーネントの側は、親からバインディングされたデータはpropsプロパティに加えて受け取ります。このとき公式「スタイルガイド」にしたがえば、プロパティのデータ型はきちんと定めなければなりません(「プロパティの定義」参照)。select2()メソッドの引数オブジェクトにdataプロパティとして項目データを与えれば、ドロップダウンリストに加えられるのです。

JavaScriptコード

Vue.component('select2', {
	props: {
		options: Array
	},

	mounted() {
		$(this.$el)
		.select2({data: this.options});
	}
});

テンプレート

<select>
	<!--<option value="0">Vue.js</option>
	<option value="1" selected>React.js</option>
	<option value="2">Angular</option>-->
</select>

03 指定項目を予め選んでおく

コンポーネントのテンプレートで項目を定めていたときは、<option>要素のselected属性で予め選択する項目を決めていました。同じことをjQueryのコードでやってみましょう。選ぶ項目番号(selected)は、アプリケーションのdataプロパティに与えておきます。そして、テンプレートでコンポーネント(select2)のv-modelディレクティブに定めるのは、ユーザーのドロップダウンリストの操作により値が変えられるように(双方向バインディング)するためです。

JavaScriptコード

const vm = new Vue({

	data: {
		selected: 1,

		]
	}
});

テンプレート

<select2 :options="options" v-model="selected">

コンポーネントがアプリケーションのデータを受け取るには、propsに加えなければなりません。このとき、v-modelディレクティブの値はプロパティをvalueとするのがデフォルトです(「model」参照)。そして、jQueryセレクタに.val()メソッドで値を渡せば、要素のvalueプロパティが書き替わります。さらに、trigger()メソッドの呼び出しにより、v-modelディレクティブでバインディングされた値がコンポーネントに反映されるのです。

JavaScriptコード

Vue.component('select2', {
	props: {

		value: Number
	},

	mounted() {
		$(this.$el)

		.val(this.value)
		.trigger('change');
	}
});

これで、ドロップダウンリストの項目はデータから動的に定め、予め選んでおく項目も決められました。ここまでのJavaScriptコードとテンプレートはつぎのコード001のとおりです。実際の動きは、jsdo.itに掲げた以下のサンプル001でお確かめください。

コード001■データから動的に加えたドロップダウンリストに初期選択の項目を定める

JavaSciptコード

Vue.component('select2', {
	props: {
		options: Array,
		value: Number
	},
	template: '#select2-template',
	mounted() {
		$(this.$el)
		.select2({data: this.options})
		.val(this.value)
		.trigger('change');
	}
});
const vm = new Vue({
	template: '#demo-template',
	data: {
		selected: 1,
		options: [
			{id: 0, text: 'Vue.js'},
			{id: 1, text: 'React.js'},
			{id: 2, text: 'Angular'}
		]
	}
});
document.addEventListener('DOMContentLoaded', (event) =>
	vm.$mount('#demo')
);

テンプレート

<script type="text/x-template" id="demo-template">
	<div>
		<select2 :options="options" v-model="selected">
		</select2>
	</div>
</script>
<script type="text/x-template" id="select2-template">
	<select>
	</select>
</script>

サンプル001■Vue.js + ES6: Wrapper component using jQuery plugin Select2 base

04 選ばれた項目の値を示す

ドロップダウンリストから選ばれた項目の番号は、ページに表示しましょう。まずは、アプリケーションのテンプレートに、項目番号(selected)をデータバインディングで差し込みます。

テンプレート

<div>
	<p>Selected: {{selected}}</p>
	<select2 :options="options" v-model="selected">
	</select2>
</div>

つぎに、ドロップダウンリストの選択項目が変わったとき、コンポーネントの側からデータを改めます。ただし、親であるアプリケーションの値はじかにはいじれません。vm.$emit()メソッドinputイベントによりデータを送るのです(「カスタムイベントを使用したフォーム入力コンポーネント」)。これで、ドロップダウンリストから選んだ項目の番号がページに示されます(図002)。JavaScriptコードとテンプレートは、以下のコード002にまとめました。また、動作が確かめられるように、サンプル002をjsdo.itに掲げます。

JavaSciptコード

Vue.component('select2', {

	mounted() {
		$(this.$el)

		.on('change', (event) => 
			this.$emit('input', parseInt(event.target.value, 10))
		)
		.trigger('change');
	}
});

図002■ドロップダウンリストから選んだ項目の番号が示される

図002

コード002■ドロップダウンリストから選んだ項目の番号をページに示す

JavaSciptコード

Vue.component('select2', {
	props: {
		options: Array,
		value: Number
	},
	template: '#select2-template',
	mounted() {
		$(this.$el)
		.select2({data: this.options})
		.val(this.value)
		.on('change', (event) => 
			this.$emit('input', parseInt(event.target.value, 10))
		)
		.trigger('change');
	}
});
const vm = new Vue({
	template: '#demo-template',
	data: {
		selected: 1,
		options: [
			{id: 0, text: 'Vue.js'},
			{id: 1, text: 'React.js'},
			{id: 2, text: 'Angular'}
		]
	}
});
document.addEventListener('DOMContentLoaded', (event) =>
	vm.$mount('#demo')
);

テンプレート

<script type="text/x-template" id="demo-template">
	<div>
		<p>Selected: {{selected}}</p>
		<select2 :options="options" v-model="selected">
		</select2>
	</div>
</script>
<script type="text/x-template" id="select2-template">
	<select>
	</select>
</script>

サンプル002■Vue.js + ES6: Wrapper component using jQuery plugin Select2

05 項目が複数選べるリストにする

応用例として、ドロップダウンリストから項目が複数選べるようにしましょう。コンボーネントのテンプレートで、<select>要素にmultiple属性を加えます。これでドロップダウンリストの動きだけは複数撰択リストになるものの、選ばれる番号のデータが複数扱えるようにはなっていません。

テンプレート

<script type="text/x-template" id="select2-template">
	<select multiple>
	</select>
</script>

そこで、アプリケーションのdataに定める撰択番号データは配列に変えます。そして、テンプレートに示す番号は、配列をカンマ区切りの文字列にすればよいでしょう。

JavaScriptコード

const vm = new Vue({

	data: {
		selected: [],  // 1,

	}
});

テンプレート

<!--<p>Selected: {{selected}}</p>-->
<p>Selected: {{selected.join(', ')}}</p>

コンポーネントも、propsに定めた項目データを受け取るプロパティは型をArrayに変えなければなりません。そして、選ばれた項目オブジェクトの配列は、<select>要素のjQueryセレクタに対してメソッドselect2('data')を呼び出せば得られます(「Using the data method」参照)。オブジェクトの配列から番号を取り出して新たな配列にするのはArray.prototype.map()メソッドです。なお、jQueryセレクタの参照は定数(select)に納めました。

JavaScriptコード

Vue.component('select2', {
	props: {

		value: Array  // Number
	},

	mounted() {
		const select = $(this.$el);
		// $(this.$el)
		select

		.on('change', (event) => {
			const selecions = select.select2('data')
			.map((element) => parseInt(element.id, 10));
			// this.$emit('input', parseInt(event.target.value, 10))
			this.$emit('input', selecions);
		})

	}
});

これで複数項目の選べるドロップダウンリストで、撰択番号が示されるようになりました(図003)。JavaScriptコードとテンプレートは以下のコード003のとおりです。

図003■ドロップダウンリストから選んだ複数の項目番号が示される

図003

コード003■複数項目の選べるドロップダウンリストで撰択番号をページに示す

JavaSciptコード

Vue.component('select2', {
	props: {
		options: Array,
		value: Array
	},
	template: '#select2-template',
	mounted() {
		const select = $(this.$el);
		select
		.select2({data: this.options})
		.val(this.value)
		.on('change', (event) => {
			const selecions = select.select2('data')
			.map((element) => parseInt(element.id, 10));
			this.$emit('input', selecions);
		})
		.trigger('change');
	}
});
const vm = new Vue({
	template: '#demo-template',
	data: {
		selected: [],
		options: [
			{id: 0, text: 'Vue.js'},
			{id: 1, text: 'React.js'},
			{id: 2, text: 'Angular'}
		]
	}
});
document.addEventListener('DOMContentLoaded', (event) =>
	vm.$mount('#demo')
);

テンプレート

<script type="text/x-template" id="demo-template">
	<div>
		<p>Selected: {{selected.join(', ')}}</p>
		<select2 :options="options" v-model="selected">
		</select2>
	</div>
</script>
<script type="text/x-template" id="select2-template">
	<select multiple>
	</select>
</script>

サンプル003■Vue.js + ES6: Wrapper component of multi-select dropdown list with Select2


作成者: 野中文雄
作成日: 2018年3月15日


Copyright © 2001-2018 Fumio Nonaka.  All rights reserved.