「Nuxt.js」の基本、「Vue.js」の利用方法を知ろう

JavaScriptフレームワーク「Vue.js」と「Nuxt.js」の活用 第2回

　本連載では、Webページのユーザーインタフェース（UI）フレームワーク「Vue.js」と、Vue.jsを利用してWebページを作成できるフレームワーク「Nuxt.js」の活用方法を、サンプルとともに紹介します。前回はVue.jsとNuxt.jsの概要を説明しました。今回はNuxt.jsでUI構築に利用するVue.jsについて、基本的な利用方法を説明します。

はじめに

　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：基本的なデータバインディングのサンプル（p001-binding-basic）

　図1のWebページを実装したファイルの内容を、リスト1に示します。

［リスト1］基本的なデータバインディングの記述（p001-binding-basic/pages/index.vue）

<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ディレクティブについて補足説明していきます。