はじめに
Nuxt.jsは、Webページのユーザーインタフェース（UI）フレームワークであるVue.jsに、Webページの作成に必要なUI以外の機能を追加して、まとめて提供するフレームワークです。そのため、Nuxt.jsの機能を使いこなすためには、まずVue.jsの利用方法を知っておく必要があります。
Vue.jsでは、データとWebページの表示を関連付けるデータバインディングやイベント処理、条件分岐や繰り返しなど、動的なWebページを作成するための機能が提供されます。本記事では、こういったVue.jsの基本的な利用方法を説明します。
対象読者
- Nuxt.jsを何から始めていいかわからない方
- Vue.js未経験の方
- ひとまずVue.jsやNuxt.jsで動的なWebページを作ってみたい方
必要な環境
本記事のサンプルコードは、以下の環境で動作を確認しています。
-
Windows 10 64bit版
- Node.js v10.16.2 64bit版
- Nuxt.js 2.8.1
- Vue.js 2.6.10
- Microsoft Edge 44.18362.1.0
サンプルコードは、Nuxt.jsのCLIツール（create-nuxt-app）で生成したプロジェクトをもとに実装しています。CLIツールの利用法やプロジェクト構成などの詳細は、前回記事を参照してください。
サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、「npm run dev」コマンドを実行して、Webブラウザーで「http://localhost:3000/」を開きます。
Webページとデータを関連付けるVue.jsのデータバインディング（1）
動的なWebページでは、ユーザーの入力をデータに反映したり、データをWebページに表示したりする処理が必要となります。Vue.jsではこういった処理を、Webページとデータを関連付ける「データバインディング」で実現します。
データバインディングの基本
Vue.jsでデータバインディングを行う基本的な方法を、図1のサンプルで説明します。テキストボックスに入力されたURLを、ハイパーリンクの文言とリンク先に反映します。
図1のWebページを実装したファイルの内容を、リスト1に示します。
<template>
<div class="container">
<h1>基本的なデータバインディング</h1>
<input v-model="url" placeholder="URL"> <!--（1）-->
<a v-bind:href="url" target="_blank"> <!--（2）-->
{{ url }}へのリンク <!--（3）-->
</a>
</div>
</template>
<script>
export default {
data() {
return {
url: 'https://codezine.jp/' // （4）
}
}
}
</script>
（以下略）
ロジックを記述する<script>で、URLの文字列を格納するurl変数（4）を定義します。表示内容のテンプレートを記述する<template>では、（1）～（3）の3種類の方法でurl変数を参照しています。（1）の「v-model」はテキストボックスのような入力部品の内容、（2）の「v-bind」はhrefなどのタグ属性、（3）の{{ }}（2重の中カッコ）はWebページの表示内容に、変数内容を関連付け（データバインディング）します。このうちv-modelは、入力部品の内容と変数の内容を双方向に同期する、いわゆる双方向データバインディングを実現します。
v-modelやv-bindのように「v-」から始まってHTMLタグに設定するVue.jsの属性を「ディレクティブ」と呼びます。以下では、v-modelとv-bindディレクティブについて補足説明していきます。
