CodeZine(コードジン)

特集ページ一覧

Vue.jsの基本記法をおさらいしつつ、Nuxt 3ならではの「useAsyncData」「useFetch」機能を試してみよう

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

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

 本連載では、Webページのユーザーインタフェース(UI)構築に「Vue 3」を利用したフレームワーク「Nuxt 3」の活用方法を紹介します。前回は、Nuxt 3の概要、Nuxt 3プロジェクトの生成・実行、Nuxt 2のプロジェクトでNuxt 3の機能を利用するNuxt Bridgeを紹介しました。今回は、Vue.jsの基本記法を簡単に確認した後、Nuxt 3で利用できる「useAsyncData」「useFetch」機能を紹介します。

目次

はじめに

 Nuxt.jsは、Webページのユーザーインタフェース(UI)を構築できるVue.jsとともに、様々な追加機能をまとめて提供するフレームワークです。現在次期バージョン「Nuxt 3」が開発中で、2022年4月にリリース候補(RC)版がリリースされました。

 前回は導入編として、Nuxt 3の概要を説明するとともに、Nuxt 3プロジェクトを生成・実行する方法や、Nuxt 2のプロジェクトでNuxt 3の機能を利用するNuxt Bridgeについて説明しました。今回は最初に、Nuxt 3を利用するのに欠かせないComposition APIやディレクティブといったVue.jsの基本文法を軽く説明します。次に、前回大まかに説明したNuxt 3プロジェクトの構造をもう少し細かく紹介するとともに、Vue.js単体では提供されないNuxt 3ならではの機能として、Webページに表示するデータを非同期で取得する「useAsyncData」「useFetch」の利用法を説明します。

対象読者

  • Nuxt.jsでVue.jsの最新機能を使いたい方
  • これを機会に最新のNuxt.jsで利用法を学びたい方
  • Vue.jsにはないNuxt.jsならではの機能に興味がある方

必要な環境

 本記事のサンプルコードは、以下の環境で動作を確認しています。

  • Windows 10 64bit版
    • Node.js 16.15.0 64bit版
    • Nuxt.js 3.0.0(リリース候補版)
    • Microsoft Edge 101.0.1210.39

 サンプルコードはNuxt 3のCLIツールで生成したものです(生成方法は前回記事を参照)。このサンプルコードを開発モードで実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、「npm run dev」コマンドを実行して、Webブラウザーで「http://localhost:3000/」を開きます。

Nuxt 3の利用に欠かせない! Vue.jsの基本をおさらい

 Nuxt 3を活用するには、ベースとなっているVue.js(Vue 3)の基本的な利用法を把握する必要があります。そこでまず、図1のサンプルを利用して、Vue.jsの基本的な利用方法を大まかにおさらいしていきます。

図1 Vue.jsの基本機能を利用したサンプル(p001-vue-basic)
図1 Vue.jsの基本機能を利用したサンプル(p001-vue-basic)

ページコンポーネントの構造

 Webページの表示に対応するapp.vueファイルは、リスト1の構造を持っています。<template>部にWebページの外見をHTMLタグで記述し、<script>部にはWebページのデータや、振る舞いを表すメソッドをJavaScriptで記述します。

[リスト1]ページコンポーネントの構成(p001-vue-basic/app.vue)
<template>
...Webページの外見を表すHTMLタグ...
</template>
<script lang="ts">
...データやメソッドなどのJavaScript...
</script>

Composition APIでWebページのデータや振る舞いを記述

 <script>部の記述方法には、Vue 2までで利用されていた方法(Options API)のほか、Vue 3から正式サポートされた「Composition API」という方法があり、本連載ではComposition APIを利用していきます。図1のページの<script>部をComposition APIで実装したものはリスト2となります。

[リスト2]Composition APIによる実装例(p001-vue-basic/app.vue)
<script lang="ts">
export default defineComponent({ // ...(1)
  setup() { // ...(2)
    // 変数(reactive記述で画面から変更できるようにする) ...(3)
    const param = reactive({
      name: '吉川英一',
      url: 'https://wings.msn.to/'
    })
    // 変数(読み取り専用、画面から変更しない) ...(4)
    const phones = [
      {
        model: 'Galaxy S22',
        vendor: 'Samsung'
      },
(略)
    ]
    // 算出プロパティ ...(5)
    const nameWithSuffix = computed(() => {
      return param.name + 'さん'
    })
    // メソッド ...(6)
    const onClickButton = () => {
      alert(`${nameWithSuffix.value}、こんにちは`)
    }
    // 変数・算出プロパティ・メソッドを返却 ...(7)
    return {
      param,
      phones,
      nameWithSuffix,
      onClickButton
    }
  }
})
</script>

 実装はdefineComponentメソッド(1)内のsetupメソッド(2)に行います。変数(3)は、前回記事ではrefメソッドを利用した方法を紹介しましたが、今回はもう一つの方法である、reactiveメソッド内に複数の変数を定義する方法で記述しました。refまたはreactiveを利用して記述した変数は、リアクティブな変数となり、画面からの操作で変更できるようになります。画面から変更しない変数(4)は、refまたはreactiveを利用せず、直接記述できます。

 (5)は名前に「さん」をつける算出プロパティ、(6)はalertで挨拶を表示するメソッドです。最後に(7)で変数・算出プロパティ・メソッドを返却すると、<template>部で参照できるようになります。

 <script setup>記述を利用すると、リスト2はリスト3の通り簡略化できます。

[リスト3]<script setup>によるComposition API実装の簡略化(p001a-vue-basic-2/app.vue)
<script setup lang="ts">
// 変数(reactive記述で画面から変更できるようにする)
const param = reactive({
  name: '吉川英一',
  url: 'https://wings.msn.to/'
})
// 変数(読み取り専用、画面から変更しない)
const phones = [
  {
    model: 'Galaxy S22',
    vendor: 'Samsung'
  },
(略)
]
// 算出プロパティ
const nameWithSuffix = computed(() => {
  return param.name + 'さん'
})
// メソッド
const onClickButton = () => {
  alert(`${nameWithSuffix.value}、こんにちは`)
}
</script>

 <script setup>タグ内に、リスト2でsetupメソッド内に記述した実装(return文以外)をそのまま記述すると、リスト2と同じ動作をするようになります。

ディレクティブでWebページにデータや振る舞いを反映

 <script>部に記述したデータや振る舞いは、HTMLにVue.js独自の記述を組み合わせて<template>部に記述することで画面に反映します。リスト2(またはリスト3)の<script>部に対応した<template>部は、リスト4の通りとなります。

[リスト4]<template>部の記述例(p001-vue-basic/app.vue)
<h3>基本ディレクティブ1:変数値の設定と反映</h3>
<div>
  <a v-bind:href="param.url" target="_blank"> <!--(1)-->
    {{ param.name }} <!--(2)-->
  </a>
</div>
<div>
  名前:<input type="text" v-model="param.name"> <!--(3)-->
</div>
<div>
  URL:<input type="text" v-model="param.url"> <!--(4)-->
</div>
<h3>基本ディレクティブ2:操作イベントへの対応</h3>
<div>
  <button v-on:click="onClickButton">ボタン</button> <!--(5)-->
</div>
<h3>基本ディレクティブ3:繰り返しと条件分岐</h3>
<ul>
  <li v-for="phone in phones" v-bind:id="phone.model"> <!--(6)-->
    <span v-if="phone.vendor == 'Samsung'" style="color:blue"> <!--(7a)-->
      {{ phone.model }} ({{ phone.vendor }})
    </span>
    <span v-else-if="phone.vendor == 'Apple'" style="color:red"> <!--(7b)-->
      {{ phone.model }} ({{ phone.vendor }})
    </span>
    <span v-else style="color:green"> <!--(7c)-->
      {{ phone.model }} ({{ phone.vendor }})
    </span>
  </li>
</ul>

 変数値をWebページに反映するには、(2)の通り「{{ }}」で変数名を囲んで記述します。入力フォームで変数値を設定できるようにするには、(3)(4)の通り、入力フォームにv-model属性で変数名を指定します。(1)のv-bind:hrefは、HTMLタグのhref属性に変数値を反映します(単に「:href」とも記述できます)。(5)のv-on:clickはボタンのclickイベントに対応するメソッドを指定します(「@click」とも記述できます)。(6)のv-for、(7a)~(7c)のv-if・v-else-if・v-elseはそれぞれ、繰り返しと条件分岐を表し、ここではphones配列の各要素を、vendorプロパティの値により色分けして表示するようにしています。Vue.jsで利用するこの「v-***」属性を「ディレクティブ」と呼びます。これらVue.jsのテンプレート記法は、別記事で詳しく説明しているので参考にしてください。


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

バックナンバー

連載:JavaScriptフレームワーク「Vue 3」と「Nuxt 3」の活用

著者プロフィール

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

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

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

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

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5