Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本連載では、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:基本的なデータバインディングのサンプル(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ディレクティブについて補足説明していきます。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:JavaScriptフレームワーク「Vue.js」と「Nuxt.js」の活用
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5