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

CodeZine / 2019年9月2日 11時0分

 本連載では、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に示します。
<template>  <div >   <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ディレクティブについて補足説明していきます。

WINGSプロジェクト  吉川 英一[著]

【関連記事】
JavaScriptのコードを難読化! Webアプリのリバースエンジニアリングを防ぐ「PreEmptive Protection for JavaScript」
JavaScriptだけでWeb開発を行えるNode.jsの入門書が登場!『入門Node.jsプログラミング』
Reactの基本を学ぼう~コンポーネントの仕組みと作り方
改良の継続と次世代への進化に注目! 「Angular」バージョン8の新機能
大規模Webサービスの改善に向けたR&Dの取り組み――SPAのボイラープレート開発とFastlyの活用

■記事全文へ

この記事に関連するニュース

トピックスRSS

ランキング