HTML5テクニカルノート

Vue.js入門 01: Vue.jsを始める

ID: FN1702003
Technique: HTML5 / JavaScript
Library: Vue.js 2.1.10

Vue.jsは、ユーザーインタフェースをつくるためのプログレッシブフレームワークです(図001)。画面の表示(View)に絞った操作を扱います。jQueryでは手間がかかるようなインターフェイスも、簡単にわかりやすく組み立てられます。本稿では、Vue.jsのインストールおよび設定を行い、とりあえずごく簡単に画面のインタラクティブな操作をしてみます。

[注記] 本稿はVue.js 2.6とECMAScript 2015(ES6)にもとづく「Vue.js + ES6入門 01: Vue.jsを始める」に改訂しました。

図001■Vue.jsのサイト

01 Vue.jsのインストールと設定

Vue.jsサイトのトップページにある[はじめる]ボタン(前掲図001)で「はじめに」のページに移ります。そして、左カラムの「インストール」をクリックすると、インストールページが開きます(図002)。直接読み込みの開発や本番(プロダクション)のバージョンがダウンロードできるほか、GitHubでも手に入ります。最新版をすぐに使いたいとき、手っ取り早いのはCDNです。 jsDelivrが推奨されています。つぎの<script>要素をHTMLドキュメントにコピーすればよいでしょう。


<script src="https://cdn.jsdelivr.net/npm/vue"></script>

図002■Vue.jsのインストールページ

「Vue.js入門」シリーズでは、HTMLドキュメントのスタイルを設定するために、CSSフレームワークのBootstrapも加えることにします(Vue.jsを使うために必要なわけではありません)。Bootstrapサイトのダウンロードページ(「Getting started」)から、やはりCDNの記述をコピーします(図003)。オプションのbootstrap-theme.min.cssは使いません。

図003■Bootstrapサイトのダウンロードページ

BootstrapのCSSとJavaScriptファイル、およびVue.jsのJavaScriptファイルを、HTMLドキュメントの<head>要素につぎのように定めましょう。BootstrapにはjQueryが要るので、jQueryのCDNライブラリも<script>要素に加えておきます。これで準備が整いました。

<head>要素


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

02 見出しと入力フィールドを加える

Vue.jsでアプリケーションとして動かすHTMLドキュメントの<body>要素の中身を書きます。つぎのように、見出しふたつと入力用の<input>要素をひとつ加えましょう(図004)。それらの要素は、Bootstrapのcontainerクラスを定めた<div>要素で包みました。ここに、Vue.jsのコードを書いてゆきます。

<body>要素


<div id="app" class="container">
	<h2>Test</h2>
	<h3>Hello!</h3>
	<p>
		<input type="text" placeholder="enter a name here" />
	</p>
</div>

図004■見出しと入力フィールドが加えられたページ

03 データを要素に表示する

<body>要素に加えた<script>要素で、Vueクラスのインスタンスをつぎのように生成します。引数のオブジェクトのelプロパティは、アプリケーションとして扱うノードの要素のセレクタです。dataに与えたプロパティ(yourName)の値は、ノードから二重波かっこ{{}}で参照できます。アプリケーションのデータが、ページの要素のテキストとして示せるのです(図005)。<body>要素に加えたHTMLコードと<script>要素の記述は、以下のコード001にまとめました。


<div id="app" class="container">
	<h2>Test</h2>
	<h3>Hello {{yourName}}!</h3>

</div>
<script>
var app = new Vue({
	el: '#app',
	data: {
		yourName: 'Vue.js'
	}
});
</script>

図005■アプリケーションのデータがページに示された

コード001■アプリケーションのデータをページにテキストで示す

<body>要素


<div id="app" class="container">
	<h2>Test</h2>
	<h3>Hello {{yourName}}!</h3>
	<p>
		<input type="text" placeholder="enter a name here" />
	</p>
</div>
<script>
var app = new Vue({
	el: '#app',
	data: {
		yourName: 'Vue.js'
	}
});
</script>

04 データと要素の値をバインディングする

v-modelディレクティブを使うと、入力とアプリケーションの状態(プロパティ)を互いに結びつけられます(双方向バインディング)。以下のコード002は、<input>要素に入力したテキストをページに表示します。併せて、コードを試せるようにサンプル001に掲げました。

図006■フィールドに入力したテキストがページに示された

コード002■<input>要素の値をバインディングしてページに表示する


<div id="app" class="container">
	<h2>Test</h2>
	<h3>Hello {{yourName}}!</h3>
	<p>
		<input type="text" v-model="yourName" placeholder="enter a name here" />
	</p>
</div>
<script>
var app = new Vue({
	el: '#app',
	data: {
		yourName: ''
	}
});
</script>

サンプル001■<input>要素の値をバインディングしてページに表示する

See the Pen Vue.js: Handling User Input by Fumio Nonaka (@FumioNonaka) on CodePen.

05 JavaScriptコードを<head>要素に書く

Vue.jsはHTMLの要素(DOM)を操作します。JavaScriptコードは要素を参照して処理しなければなりませんので、前掲コード001および002は<script>要素を</body>タグのすぐ上に置きました。幸い今回の作例は、jQueryを使っています。スクリプトをつぎのように書き替えれば、<head>要素に移しても、コードはドキュメントの準備が整ってから実行されます。


$(function() {
	var app = new Vue({
		el: '#app',
		data: {
			yourName: ''
		}
	});
})

作成者: 野中文雄
更新日: 2017年11月23日 CDNをVue.jsサイトの推奨に合わせて、unpkgからjsdelivrに変更。
作成日: 2016年2月15日