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

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

Nuxt 3ならではの機能、「useAsyncData」「useFetch」の利用法

　Nuxt 3には、Vue.jsをベースにして、さまざまな独自機能が追加されています。以降は、これらNuxt 3ならではの機能を中心に説明していきます。本記事では、Webページに表示するデータを動的に取得するのに便利な「useAsyncData」「useFetch」を紹介します。

　図4のサンプルでは、Web APIからデータ（スマートフォンのリスト）を取得して画面に表示します。データ再取得の都度、リストの順番が変わります。

図4　Web APIからデータを取得して表示するサンプル（p004-useasyncdata）

Web APIをNuxt 3で実装

　まず、データを提供するWeb APIを実装します。表1のNo.9に示したserverフォルダーをプロジェクトに追加し、配下にapi/phones.tsファイルを、リスト6の通り実装します。

［リスト6］Web APIの実装（p004-useasyncdata/server/api/phones.ts）

export default defineEventHandler((event) => { // ...（1）
  const phones = [ // ...（2）
    {
      model: 'Galaxy S22',
      vendor: 'Samsung'
    },
（略））
  ];
  const shuffled = phones  // 配列をシャッフル ...（3）
    .map(value => ({ value, num: Math.random() })) // ...（3a）
    .sort((a, b) => a.num - b.num) // ...（3b）
    .map(({ value }) => value) // ...（3c）
  return shuffled; // シャッフルした配列を返却 ...（4）
})

　（1）のdefineEventHandlerメソッドの引数に、Web APIの処理を表す関数を指定します。関数内では（2）のphones変数で配列を記述後、（3）でシャッフルします。シャッフルの処理は、（3a）で配列の各要素にランダム値を設定し、（3b）で配列要素をランダム値でソート、（3c）でランダム値を除去します。最後に（4）でシャッフルした配列を返却します。この実装をserver/api配下に配置することで、Nuxt 3では「http://localhost:3000/api/phones」というAPIでデータを参照できます（図5）。

図5　Web API単体の実行結果（p004-useasyncdata）

Web APIからのデータ取得処理をuseAsyncDataで実装

　次に、Web APIからデータを取得して、画面に表示するWebページを、リスト7の通り実装します。

［リスト7］useAsyncDataでWeb APIからデータを取得する実装（p004-useasyncdata/app.vue）

<script setup lang="ts">
  const returnVal = await useAsyncData( // ...（1）
    "webAPIKey",
    () => {
      return $fetch('/api/phones') // ...（2）
    })
  const phones = returnVal.data // ...（3）
  const refresh = returnVal.refresh // ...（4）
</script>

　（1）でuseAsyncDataを実行しています。第1引数には処理を一意に識別するキー、第2引数には処理内容を指定します。ここでは（2）の$fetchメソッドで、リスト6で実装したWeb APIを実行しています。なお、$fetchは、HTTP通信を行うfetch関数に、レスポンスのJSON文字列をJavaScriptオブジェクトに自動で変換する機能などを追加したohmyfetchの関数で、Nuxtプロジェクト内のどこからでもグローバルに利用できます。

　（1）で取得するuseAsyncDataの戻り値returnValは、表2のプロパティを含みます。

表2　useAsyncData戻り値のプロパティ

No.	名前	内容
1	data	取得されたデータ
2	pending	データ取得中かを表すboolean値
3	refresh	データ再取得時に実行する関数
4	error	データ取得失敗時に設定されるエラーオブジェクト

　ここではリスト7（3）でreturnVal.dataプロパティをphones変数に、（4）でreturnVal.refreshプロパティをrefresh変数にそれぞれ代入しています。<template>部ではphones変数の各要素をリスト表示します（<template>部の記述内容はリスト5の「基本ディレクティブ３」とほぼ同一です）。

　また、リスト8の通り、refresh関数をボタンクリック時に実行させると、データの再取得ができます。リスト6（3）でデータをシャッフルしているため、ボタンクリック（データ取得）の都度、リストの順番が変わります。

［リスト8］refresh関数を実行するボタンの記述（p004-useasyncdata/app.vue）

<button @click="refresh()">データ再取得</button>

useFetchで記述を簡略化

　useFetchを利用すると、$fetchでWeb APIにアクセスするuseAsyncDataの処理を、よりシンプルに記述できます。リスト7（1）の実装をuseFetchで書き換えると、リスト9の通りとなります。

［リスト9］useFetchでWeb APIからデータを取得する実装（p005-usefetch/app.vue）

const returnVal = await useFetch('/api/phones')

　useFetchメソッドの引数にWeb APIのURLを指定するだけで、リスト7（1）のuseAsyncDataと同じ処理になります。

まとめ

　本記事では、JavaScriptフレームワークNuxt 3を利用した実装を理解するため、Vue.jsの基本記法を大まかに説明しました。また、Nuxt 3プロジェクトの構造を説明するとともに、非同期でデータを取得できるNuxt 3の独自機能であるuseAsyncData、useFetchを説明しました。

　次回は、ルーティング機能やHTML要素にアクセスするコンポーネントなど、Nuxt 3ならではの機能をさらに紹介していきます。

参考資料

• Nuxt 3
• Vue.js