目的

• カードコンポーネントの画面表示を検知
• GTM経由でGA4にイベントを送信
• 表示データの分析

実装フロー

1. Vueコンポーネントで要素の表示を検知
2. dataLayerにイベントをプッシュ
3. GTMでイベントを捕捉
4. GA4にデータを送信

Vueコンポーネントの実装

import { ref, onMounted } from 'vue'

interface Props {
  items: Array<{
    id: string
    title: string
  }>
}

const props = defineProps<Props>()
const itemRefs = ref<any[]>([])

onMounted(() => {
  itemRefs.value.forEach((elementRef, index) => {
    if (!elementRef) return

    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        const item = props.items[index]
        // dataLayerにイベントをプッシュ
        window.dataLayer?.push({
          event: 'item_view',
          item_id: item.id,
          item_title: item.title,
          eventModel: {
            send_to: 'G-XXXXXXXX'
          }
        })
        observer.disconnect()
      }
    })

    observer.observe(elementRef.$el || elementRef)
  })
})
</script>

<template>
  <div>
    <div
      v-for="(item, index) in items"
      :key="item.id"
      :ref="el => itemRefs[index] = el"
    >
      <!-- カードの内容 -->
    </div>
  </div>
</template>

ref配列の使用

itemRefs配列を使って、複数のカードコンポーネントへの参照を管理しています。Vue3のref属性の動的な割り当てを活用しています。

Intersection Observer APIの設定

各カードごとに個別のObserverを作成しています。一度表示を検知したらdisconnect()で監視を停止し、重複計測を防止します。

dataLayerへのデータ送信

カードのIDとタイトルを送信し、eventModelを使って送信先のGA4を指定しています。

GTMの設定

続いて、Google Tag Managerの設定手順です。

1. 変数の設定

まずは、dataLayerから送信されたデータを受け取るための変数を設定します。

GTMの変数設定で以下の2つを作成します。

【Item ID変数の設定】
- 変数名: Item ID
- 種類: データレイヤー変数
- データレイヤー変数名: item_id

【Item Title変数の設定】
- 変数名: Item Title
- 種類: データレイヤー変数
- データレイヤー変数名: item_title

これらの変数は、後ほどGA4にデータを送信する際のパラメータとして使用します。

2. トリガーの設定

次に、イベントを検知するためのトリガーを設定します。

【トリガーの設定】
- トリガー名: Item View
- トリガータイプ: カスタムイベント
- イベント名: item_view

このトリガーは、dataLayerにプッシュされたitem_viewイベントを検知します。

3. タグの設定

最後に、GA4にデータを送信するためのタグを設定します。

【タグの設定】
- タグ名: GA4 - Item View
- タグタイプ: Google タグ
- 測定ID: G-XXXXXXXX

イベントパラメータ:
- item_id: {{Item ID}}
- item_title: {{Item Title}}

GA4での設定と分析

カスタムディメンションの設定

GA4でデータを分析するために、まずカスタムディメンションを設定する必要があります。

管理画面から以下のディメンションを作成します。

1. Item ID（イベントスコープ）
2. Item Title（イベントスコープ）

レポートの作成

探索レポートを使って、以下のように分析が可能です。

• ディメンション：Item Title
• 指標：イベントカウント
• フィルター：イベント名 = item_view

これにより、各カードの表示回数を確認できます。

デバッグのポイント

1. GTMのプレビューモード

GTMのプレビューモードでは以下を確認します。

• dataLayerにイベントが正しく送信されているか
• 変数が期待通りの値を取得できているか
• タグが正しいタイミングで発火しているか

2. GA4のデバッグビュー

GA4のデバッグビューでは

• イベントが正しく送信されているか
• パラメータが正しく設定されているか

を確認できます。

よくあるトラブルと解決方法

イベントが発火しない

• dataLayerの実装を確認
• コンソールでエラーがないか確認

パラメータが取得できない

• GTMの変数名が正しいか確認
• dataLayerの構造を確認

GA4にデータが反映されない

• 測定IDが正しいか確認
• 最大48時間の遅延を考慮

→ 実際に24時間くらいデータが反映されず、実装が間違っているのかと見直していましたが時間が経てば反映されてました

参考リンク

Google Analytics for developers  |  Google for Developers

developers.google.com

デベロッパー向け Google アナリティクス  |  Google Analytics  |  Google for Developers

developers.google.com

公式ページ：https://v3.nuxtjs.org/

Nuxt2との違い

Nuxt3は、Vue3をベースになっています。Nuxt2との違いとしてSSRの高速化やバンドルサイズの縮小などのパフォーマンスの向上、Composition APIの導入、TypeScript サポートなどが挙げられます。

v3.0.0-rc.10でFull SSGモードに

rc.3で開発していたのですが、SSGしてもクライアント側でデータフェッチしている挙動があり、どうにかならないかと悩んでいました。

Nuxt3のRC情報を見ていたら、SSG後にクライアント側で再フェッチしないFull SSGモードなるものがリリースされており、バージョンを上げたところ無事解決しました。

Nuxt3のコアパッケージ

Nuxt3を構成するコアパッケージは以下のようになっています。

• コアエンジン: nuxt
• バンドラー: @nuxt/vite-builder and @nuxt/webpack-builder
• コマンドライン: nuxi
• サーバーエンジン: nitro
• 開発キットt: @nuxt/kit
• Nuxt 2ブリッジ: @nuxt/bridge

nuxt/bridge

既存のNuxt 2プロジェクトからNuxt3の機能を使いたい場合はNuxt Bridge を使用するのが良さそうです。変更を最小限に抑えながら、ほとんどの新機能を試すことができます。

nitro

nitro(読み方はニトロじゃなくてナイトロ)の基盤は、rollupとh3で、高いパフォーマンスと移植性のために構築された最小限のhttpフレームワークです。特徴は以下の通りです。

クロスプラットフォームサポート

様々なプラットフォームにも対応しているエンジンで、JavaScript をサポートする様々なシステムでデプロイできます。

サーバーレスサポート

サーバーレス環境でも動作します。

API routes

unjs/h3プロジェクトを使用し、h3という軽量のhttp サーバーが使われています。

自動コード分割

設定しなくても自動的にコード分割してくれます。

ホットリロード

プログラム実行中にコードを変更できます。

ハイブリッド・モード

ページのレンダリングを細かくコントロールし、静的サイトとサーバーレスサイトでハイブリッドモードが使用可能です。

ローカル開発時のホットリロードの速度、CICD 上でのビルド実行速度が従来の WebPack とは段違いに速いと感じます。

Nitro - Next Generation Server Toolkit

Create web servers with everything you n…

nitro.unjs.io

自動インポート

Nuxt3では、CompositionAPIのsetupで使用する関数のインポートを追加する必要はなく、エンジンによって自動的にインポートされます。また、ディレクトリとファイル名で自動的にComponentもインポートされます。

components

インポートしたい Vue コンポーネントを配置するディレクトリ

composables

各コンポーネントを記入しなくても、Composables ディレクトリを使って自動的にインポートできる

ネスト化されたコンポーネント

ネスト化されたディレクトリにコンポーネントがある場合は、パス・ディレクトリのコンポーネントの名前を指定するだけで使用できます。

例えば、components/bar/foo.vue の場合、以下のようになります。

<template>
  <div>
    <BarFoo />
  </div>
</template>

アトミックデザインでディレクトリを分けてファイルを作成する際は<AtomButton>みたいな感じになりそうですね。ちょっと冗長になりそうな気もしています。

Vue.jsの特徴 Progressive Framework

Vue.jsの特徴として、Progressive Frameworkという概念に基づいて開発されています。

ビルドシステムを利用せずにVue.js単体で使うことやVuexやvue-routerを使って動的なWebアプリケーションの構築もできます。

Declative Rendering 宣言的なDOMレンダリングに関する領域

テンプレートにレンダリングする対象を宣言的に記載することでDOMレンダリングやユーザによる入力データの同期が可能になります。Vue.jsでは本体自体でこの領域をサポートしているため、LPのようなシンプルなWebサイトはじめ、小規模的なものはこの領域で解決できます。

Component System UIをモジュール化して再利用する必要がある領域

Vue.js本体自体にコンポーネント化する機能があるため、それによって開発効率を向上させることが可能になります。

Client-side Routing WebサイトがSPAとして必要とされるWebアプリケーションの領域

Vue.jsが提供しているルーティングライブラリのvue-routerを利用することで、これまでに作成したコンポーネントでSPAに対応することが可能になります。

Large-scale State Management コンポーネント間で状態の共有方法が必要となる領域

Vue.jsが提供している状態管理ライブラリのVuexを利用することで、既存のコンポーネントを拡張する形で状態を集中管理することが可能になります。

Build System コンポーネント管理やプロジェクト構成などの領域

Vue.jsが提供しているvue-cliやvue-loaderなどを利用することで、プロジェクトの環境構築や構成管理の手間が省略かされ、継続的な開発を持続できるようになります。

参考：

第1回　プログレッシブフレームワーク Vue.js | gihyo.jp

Vue.js（ビュージェイエス）は、インタラクティブなUIを構築するためのJav…

gihyo.jp

Vue.js Progressive Framework #Vue.js - Qiita

Vue.js の作者Evan氏によるVue.jsの紹介スライドで触れられていた「…

qiita.com

ライフサイクル

ライフサイクルフック

Vueのインスタンスは、インスタンスを生成時やDOM要素へのマウント時、データ更新時など、ある特定のタイミングでユーザが処理を行えるようにいくつかのライフサイクルフックが実行されます。

beforeCreate

インスタンスの初期化時に実行されます。dataなどのプロパティは生成前のためアクセスできません。

created

インスタンスの初期化後に実行されます。この時点でプロパティへのアクセスが可能になります。

beforeMount

マウント前に実行されます。この時点ではDOM要素にはアクセスできません。

mounted

マウント後に実行されます。この時点でDOM要素へのアクセスが可能になります。

beforeUpdate

DOM更新前に実行されます。

update

DOM更新後に実行されます。

beforeDestroy

インスタンスの破棄の前に実行されます。この時点ではプロパティへのアクセスは可能です。

destroyed

インスタンスが破棄された後に実行されます。この時点からプロパティへのアクセスはできません。

ライフサイクルフックの動きを確認する

実際にいくつかのライフサイクルフックを使って動きを確認してみました。

beforeCreate

インスタンス初期化時に実行されます。このタイミングでは、インスタンスは初期化前ですので、msgは呼ばれません。

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  beforeCreate () {
    console.log('beforeCreate：' + this.msg)
  }
}
</script>

// beforeCreate：undefined

created

インスタンス生成後に実行されるため、msgが呼び出されます。

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  created () {
    console.log('created：' + this.msg)
  }
}
</script>

// created：Welcome to Your Vue.js App

beforeMount

インスタンスが作成された後、elementへのマウントされる前で実行されます。

そのためmsgは更新されず、「Welcome to Your Vue.js App」と表示されます。

...

  <h1>{{ msg }}</h1>

...

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  beforeMount () {
    this.msg = 'Update Your Vue.js App'
  }
}
</script>

// Welcome to Your Vue.js App

mounted

elementへのマウントがされた後に実行されるため、msgが更新され「Update Your Vue.js App」と表示されます。

createdとの違いとしてmountedは、elementへのマウントが行われた後処理されます。また、mountedはSSRの場合は使えないので注意が必要です

...


  <h1>{{ msg }}</h1>

...

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted () {
    this.msg = 'Update Your Vue.js App'
  }
}
</script>

// Update Your Vue.js App

参考：

Vue インスタンス — Vue.js

Vue.js - The Progressive JavaScript Fram…

jp.vuejs.org

Understanding the Vue.js Lifecycle Hooks

Each Vue instance has many lifecycle hoo…

vueschool.io

Vuex

VuexとはVue.js アプリケーションのための 状態管理パターン + ライブラリです。

Vuexを使うことで、複雑に構成されたコンポーネントでのデータ管理の難しさを解決することができます。

Vuexという一つの入れ物にデータを入れることで、どのコンポーネントからでもVuex内に保持するデータへのアクセスが可能になります。

Actions

API等と非同期通信を行い、データを取得します。取得後はデータをコミットし、Mutationsを呼び出します。

Mutations

Actionsやコンポーネントからデータがコミットされた時に呼び出されます。唯一State内のデータを変更することが出来ます。

State

各コンポーネントで使用するデータはここに集約します。

Vuexの使いどころ

Vuexの使いどころについては以下の記事がとても参考になりました。

そもそもVuexを使うべきか、使うとしてもOrganismレベル以上のコンポーネントからのみStoreの参照、変更を許可するなど、どういったルールで運用すべきかを考慮することが大切です。

参考：

ToDoリストのストーリーを考える

Nuxt.jsで簡単なToDoリストをつくりにあたり、ユーザーストーリーを考えます。考えた結果、以下のストーリーができました。

• ユーザーはフォームと作成ボタンを見ることができる
• ユーザーはToDoタスク一覧と完了タスク一覧を見ることができる
• ユーザーはフォームにタスクを入力して作成ボタンを押すと、ToDoタスク一覧に追加されることを確認できる
• ユーザーはフォームにタスクが入力していない場合は、作成ボタンを押すことができない
• ユーザーはToDoタスクの完了ボタンを押すと、完了タスク一覧にタスクが移動されることを確認できる
• ユーザーは完了タスクのToDoに戻すボタンを押すと、ToDoタスク一覧にタスクが移動されることを確認できる

ToDoリストの画面は、TaskFormコンポーネントとTaskListコンポーネントに分けて実装します。

またタスクのデータはFirestoreに格納するようにし、REST APIでデータを操作します。

Nuxt.jsやJestのインストールやFirestoreのセットアップなどは省略しています。

「ユーザーはフォームと作成ボタンを見ることができる」のテストを書く

まず「ユーザーはフォームと作成ボタンを見ることができる」のテストを書いていきます。

TaskFormコンポーネントを作成し、タスク入力フォームと作成ボタンが存在することをチェックします。

・components/TaskForm.spec.js

import { mount } from '@vue/test-utils'
import TaskForm from '@/components/TaskForm.vue'

describe('components/TaskForm.vue', () => {
  let wrapper
  beforeEach(() => {
    wrapper = mount(TaskForm)
  })

  describe('template', () => {
    test('タスク入力フォームが存在すること', () => {
      const form = wrapper.find('input');
      expect(form.exists()).toBe(true);
    })

    test('タスク作成ボタンが存在すること', () => {
      const button = wrapper.find('input');
      expect(button.exists()).toBe(true);
   })
  })
})

テストを作成したら実際にテストを実行してみます。TDDでいうレッドのところです。

まだ実装はしていないので全部のテストが失敗しますが、期待通りの落ち方をしているかを確認します。

FAIL  components/TaskForm.spec.js
  components/TaskForm.vue
    template
      ✕ タスク入力フォームが存在すること (10 ms)
      ✕ タスク作成ボタンが存在すること (1 ms)

  ● components/TaskForm.vue > template > タスク入力フォームが存在すること

    expect(received).toBe(expected) // Object.is equality

    Expected: true
    Received: false

      16 |     test('タスク入力フォームが存在すること', () => {
      17 |       const form = wrapper.find('input');
    > 18 |       expect(form.exists()).toBe(true);
         |                             ^
      19 |     })
      20 |
      21 |     test('タスク作成ボタンが存在すること', () => {

      at Object.<anonymous> (components/TaskForm.spec.js:18:29)

  ● components/TaskForm.vue > template > タスク作成ボタンが存在すること

    expect(received).toBe(expected) // Object.is equality

    Expected: true
    Received: false

      21 |     test('タスク作成ボタンが存在すること', () => {
      22 |       const button = wrapper.find('input');
    > 23 |       expect(button.exists()).toBe(true);
         |                               ^
      24 |     })
      25 |
      26 |   })

      at Object.<anonymous> (components/TaskForm.spec.js:23:31)

存在していない、実装されていないなどの落ち方をしていればひとまず完了です。

「ユーザーはフォームと作成ボタンを見ることができる」を実装する

テストで書いたシナリオを元にTaskFormコンポーネントを実装してきます。今回は簡易的なHTMLでフォームとボタンを作成しました。

・components/TaskForm.vue

<template>
  <div>
    <input>
    <button>
      タスク作成
    </button>
  </div>
</template>

「ユーザーはフォームと作成ボタンを見ることができる」をテストする

実装が終わったら、再度TaskFormのテストを流してみます。TDDでいうグリーンのところです。

テストが全て通ったらこのストーリーの実装は完了です。必要に応じてリファクタリングをします。

PASS  components/TaskForm.spec.js
  components/TaskForm.vue
    template
      ✓ タスク入力フォームが存在すること (9 ms)
      ✓ タスク作成ボタンが存在すること (1 ms)

「ユーザーはToDoタスク一覧と完了タスク一覧を見ることができる」のテストを書く

次に「ユーザーはToDoタスク一覧と完了タスク一覧を見ることができる」のテストを書いていきます。

TaskListコンポーネントでToDoリストと完了リストを表示するようにします。

そのため、ToDoリストと完了リストにFirestoreに格納されているデータをfetchしてくるようにします。

・components/TaskList.spec.js

import Vuex from 'vuex'
import { mount, createLocalVue} from '@vue/test-utils'
import * as indexStore from '@/store'
import TaskList from '@/components/TaskList.vue'

const localVue = createLocalVue()
localVue.use(Vuex)

describe('components/TaskList.vue', () => {
  let wrapper
  let store
  let todoTask
  let doneTask
  beforeEach(() => {
    store = new Vuex.Store(indexStore)
    todoTask = { id: '1', content: 'content_1', status: 'todo' }
    doneTask = { id: '2', content: 'content_2', status: 'done' }
    wrapper = mount(TaskList, {
      store: store,
      localVue
    })
    store.replaceState({ tasks: [todoTask, doneTask] })
  })

  describe('template', () => {
    test('todoリストが表示されること', () => {
      const li = wrapper.find('li.todo')
      expect(li.find('span').text()).toBe(todoTask.content)
      expect(li.find('button).text()).toBe('完了')
    })

    test('完了リストが表示されること', () => {
      const li = wrapper.find('li.done')
      expect(li.find('span').text()).toBe(doneTask.content)
      expect(li.find('button).text()).toBe('ToDoに戻す')
    })
  })

  describe('script', () => {
    describe('computed', () => {
      describe('todos', () => {
        test('storeからtodoTasksが取得できること', () => {
          expect(wrapper.vm.todoTasks).toEqual(expect.arrayContaining([todoTask]))
        })
        test('storeからdoneTasksが取得できること', () => {
          expect(wrapper.vm.doneTasks).toEqual(expect.arrayContaining([doneTask]))
        })
      })
    })
  })
})

タスクリストの状態管理をするストアのテストを書きます。

ステータスの状態によってToDoタスクと完了タスクを出し分けるようにします。

Storeではaxiosを使って外部サービスにHTTPリクエストしているためaxiosをモック化してテストしています。

async/awaitでaxiosの非同期処理を実現し、結果をgettersから取り出し比較します。

参考：https://github.com/nuxt-community/axios-module/issues/105

・store/index.spec.js

import Vuex from 'vuex'
import * as index from '@/store'
import { createLocalVue } from '@vue/test-utils'
import _ from 'lodash'
import axios from 'axios'

const localVue = createLocalVue()
localVue.use(Vuex)

let mockAxiosGetResult
jest.mock('axios', () => ({
  get: jest.fn(() => Promise.resolve(mockAxiosGetResult))
}))

let action
const testedAction = (context = {}, payload = {}) => {
  return index.actions[action].bind({ $axios: axios })(context, payload)
}

describe('store/index.js', () => {
  let store
  let todoTask, doneTask
  beforeEach(() => {
    store = new Vuex.Store(_.cloneDeep(index))
    todoTask = { id: '1', content: 'content_1', status: 'todo' }
    doneTask = { id: '2', content: 'content_2', status: 'done' }
  })

  describe('getters', () => {
    let tasks
    let todoTasks
    let doneTasks
    beforeEach(() => {
      tasks = [todoTask, doneTask]
      todoTasks = [todoTask]
      doneTasks = [doneTask]
      store.replaceState({
        tasks,
        todoTasks,
        doneTasks
      })
    })

    describe('todoTasks', () => {
      test('statusがtodoのtaskが取得できること', () => {
        expect(store.getters['todoTasks']).toContainEqual(todoTask)
        expect(store.getters['todoTasks']).not.toContainEqual(doneTask)
      })
    })
    describe('doneTasks', () => {
      test('statusがdoneのtaskが取得できること', () => {
        expect(store.getters['doneTasks']).not.toContainEqual(todoTask)
        expect(store.getters['doneTasks']).toContainEqual(doneTask)
      })
    })
    describe('tasks', () => {
      test('すべてのtasksが取得できること', () => {
        expect(store.getters['tasks']).toEqual(
          expect.arrayContaining(tasks)
        )
      })
    })
  })

  describe('actions', () => {
    let commit
    beforeEach(() => {
      commit = store.commit
    })

    describe('fetchTasks', () => {
      test('tasksが取得できること', async () => {
        action = 'fetchTasks'
        mockAxiosGetResult = {
          data: {
            documents: [
              {
                name: `tasks/${todoTask.id}`,
                fields: {
                  content: { stringValue: todoTask.content },
                  status: { stringValue: todoTask.status }
                }
              },
              {
                name: `tasks/${doneTask.id}`,
                fields: {
                  content: { stringValue: doneTask.content },
                  status: { stringValue: doneTask.status }
                }
              }
            ]
          }
        }

        await testedAction({ commit })
        expect(store.getters['tasks']).toEqual([todoTask, doneTask])
      })
    })
  })
})

テスト結果を省略していますが、ここでまたテストを実行し期待通りに落ちているかを確認します。

「ユーザーはToDoタスク一覧と完了タスク一覧を見ることができる」を実装する

テストが書いたシナリオを元にTaskListコンポーネントとindexページ、indexストアを実装してきます。

TaskListコンポーネントではToDoリストと完了リストがあり、indexページではTaskListコンポーネントとTaskFormコンポーネントを呼び出してタスクをストアから呼び出すようにします。

indexストアではFirestoreからデータを取ってきてToDoタスクと完了タスクに状態管理するようにします。

・components/TaskList.vue

<template>
  <div>
    <p>ToDoリスト</p>
    <ul>
      <li
        v-for="todoTask in todoTasks"
        :key="todoTask.id"
        class="todo"
      >
        <span>{{ todoTask.content }}</span>
      </li>
    </ul>
    <hr>
    <p>完了リスト</p>
    <ul>
      <li
        v-for="doneTask in doneTasks"
        :key="doneTask.id"
        class="done"
      >
        <span>{{ doneTask.content }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import _ from 'lodash'

export default {
  computed: {
    ...mapGetters(['todoTasks']),
    ...mapGetters(['doneTasks'])
  }
}
</script>

・pages/index.vue

<template>
  <section>
    <TaskForm/>
    <TaskList/>
  </section>
</template>

<script>
import TaskForm from '@/components/TaskForm.vue'
import TaskList from '@/components/TaskList.vue'

export default {
  async asyncData({ store }) {
    await store.dispatch('fetchTasks')
  },
  components: {
    TaskForm,
    TaskList
  }
}
</script>

・store/index.spec.js

import _ from 'lodash'

export const state = () => ({
  tasks: []
})

export const getters = {
  tasks: state => state.tasks,
  todoTasks: state => state.tasks.filter(task => task.status === 'todo'),
  doneTasks: state => state.tasks.filter(task => task.status === 'done')
}

export const mutations = {
  updateTasks(state, tasks) {
    state.tasks = tasks
  }
}

export const actions = {
  async fetchTasks({ commit }) {
    await this.$axios.get(`/tasks`, {
      baseURL: process.env._AXIOS_BASE_URL_
    })
      .then(res => {
      let tasks = []
      if (_.has(res.data, 'documents')) {
        tasks = res.data.documents.map(doc => {
          return {
            id: _.last(doc.name.split('/')),
            content: doc.fields.content.stringValue,
            status: doc.fields.status.stringValue
          }
        })
      }
      commit('updateTasks', tasks)
    })
  }
}

「ユーザーはToDoタスク一覧と完了タスク一覧を見ることができる」をテストする

実装が終わったら再度テストを流します。テストが全て通ればこのストーリーは完了です。

PASS  components/TaskList.spec.js
  components/TaskList.vue
    template
      ✓ todoリストが表示されること (13 ms)
      ✓ 完了リストが表示されること (2 ms)
    script
      computed
        todos
          ✓ storeからtodoTasksが取得できること (2 ms)
          ✓ storeからdoneTasksが取得できること (1 ms)

PASS  store/index.spec.js
  store/index.js
    getters
      todoTasks
        ✓ statusがtodoのtaskが取得できること (3 ms)
      doneTasks
        ✓ statusがdoneのtaskが取得できること (1 ms)
      tasks
        ✓ すべてのtasksが取得できること (1 ms)
    actions
      fetchTasks
        ✓ tasksが取得できること

「ユーザーはフォームにタスクを入力して作成ボタンを押すと、ToDoタスク一覧に追加されることを確認できる」のテストを書く

先ほどTaskFormコンポーネントに作成したフォームに入力して作成ボタンを押すとToDoタスク一覧に追加されることが確認できるテストを書きます。

・components/TaskForm.spec.js

import Vuex from 'vuex'
import { mount, createLocalVue } from '@vue/test-utils'
import * as store from '@/store'
import TaskForm from '@/components/TaskForm.vue'

const localVue = createLocalVue()
localVue.use(Vuex)

describe('components/TaskForm.vue', () => {
  let wrapper
  beforeEach(() => {
    wrapper = mount(TaskForm, {
      store: store,
      localVue
    })
  })

  describe('template', () => {
    
...

    describe('タスク入力がある場合', () => {
      beforeEach(() => {
        const mock = jest.fn()
        wrapper.vm.addTask = mock
        wrapper.find('input').setValue('content')
      })

      test('dataに入力が反映されること', () => {
        expect(wrapper.vm.taskForm.content).toBe('content')
      })

      test('タスク作成ボタンを押下するとaddTaskが呼ばれること', () => {
        wrapper.find('button').trigger('click')
        
        expect(wrapper.vm.addTask).toHaveBeenCalled()
      })
    })
  })

  describe('script', () => {
    describe('data', () => {
      test('dataの構造が正しいこと', () => {
        expect(wrapper.vm.$data).toHaveProperty('taskForm.content')
      })
    })
  })
})

ストアのテストでは作成ボタンが押下された際にFirestoreに入力されたタスクのデータが保存されることを確認します。

・store/index.spec.js

import Vuex from 'vuex'
import * as index from '@/store'
import { createLocalVue } from '@vue/test-utils'
import _ from 'lodash'
import axios from 'axios'

const localVue = createLocalVue()
localVue.use(Vuex)

let mockAxiosGetResult
jest.mock('axios', () => ({
  
...

  post: jest.fn(() => Promise.resolve(mockAxiosGetResult))
}))

let action
const testedAction = (context = {}, payload = {}) => {
  return index.actions[action].bind({ $axios: axios })(context, payload)
}

describe('store/index.js', () => {

...

  describe('actions', () => {
    let commit
    beforeEach(() => {
      commit = store.commit
    })

...

    describe('createTask', () => {
      test('taskが追加されること', async () => {
        mockAxiosGetResult = {
          data: {
            name: `tasks/${todoTask.id}`,
            fields: {
              content: { stringValue: todoTask.content },
              status: { stringValue: todoTask.status }
            }
          }
        }
        action = 'createTask'
        await testedAction({ commit })
        expect(store.getters['todoTasks']).toContainEqual(todoTask)
      })
    })
  })
})

「ユーザーはフォームにタスクを入力して作成ボタンを押すと、ToDoタスク一覧に追加されることを確認できる」を実装する

タスク作成ボタンが押されるとaddTaskが呼び出されるように実装していきます。

addTaskメソッドはストアのcreateTaskを呼び出し、タスクが状態管理されるようにします。

・components/TaskForm.vue

<template>
  <div>
    <input
      v-model="taskForm.content"
    >
    <button
      @click="addTask">
      タスク作成
    </button>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  data() {
    return {
      taskForm: { content: '' }
    }
  },
  methods: {
    async addTask() {
        await this.$store.dispatch('createTask', _.cloneDeep(this.taskForm))
        this.taskForm.content = ''
    }
  }
}
</script>

addTaskから呼びだされるcreateTaskの実装をストアに書いていきます。

・store/index.js

import _ from 'lodash'

export const state = () => ({
  tasks: []
})

export const getters = {
  tasks: state => state.tasks,

...

}

export const mutations = {

  ...

  addTask(state, newTask) {
    state.tasks.push(newTask)
  }

...

}

export const actions = {
  async createTask({ commit }, payload) {
    const req = {
      fields: {
        content: {
          stringValue: payload.content
        },
        status: {
          stringValue: 'todo'
        }
      }
    }
    await this.$axios.post('/tasks', req, {
      baseURL: process.env._AXIOS_BASE_URL_
    }).then(res => {
      const newTask = {
        id: _.last(res.data.name.split('/')),
        content: res.data.fields.content.stringValue,
        status: res.data.fields.status.stringValue
      }
      commit('addTask', newTask)
    })
  }
 }

「ユーザーはフォームにタスクを入力して作成ボタンを押すと、ToDoタスク一覧に追加されることを確認できる」をテストする

実装が終わったら再度テストを流します。テストが全て通ればこのストーリーは完了です。

PASS  components/TaskForm.spec.js
  components/TaskForm.vue
    template
      ✓ タスク入力フォームが存在すること (11 ms)
      ✓ タスク作成ボタンが存在すること (6 ms)
      タスク入力がある場合
        ✓ dataに入力が反映されること (3 ms)
        ✓ タスク作成ボタンを押下するとaddTaskが呼ばれること (2 ms)
    script
      data
        ✓ dataの構造が正しいこと (1 ms)

PASS  store/index.spec.js
  store/index.js
    getters
      todoTasks
        ✓ statusがtodoのtaskが取得できること (3 ms)
      doneTasks
        ✓ statusがdoneのtaskが取得できること (1 ms)
      tasks
        ✓ すべてのtasksが取得できること (1 ms)
    actions
      fetchTasks
        ✓ tasksが取得できること (1 ms)
      createTask
        ✓ taskが追加されること (1 ms)

「ユーザーはフォームにタスクが入力していない場合は、作成ボタンを押すことができない」のテストを書く

フォームにタスクが入力していない場合は、作成ボタンを押すことができないことを確認できるテストを書いていきます。

・components/TaskForm.spec.js

import Vuex from 'vuex'
import { mount, createLocalVue } from '@vue/test-utils'
import * as store from '@/store'
import TaskForm from '@/components/TaskForm.vue'

const localVue = createLocalVue()
localVue.use(Vuex)

describe('components/TaskForm.vue', () => {
  let wrapper
  beforeEach(() => {
    wrapper = mount(TaskForm, {
      store: store,
      localVue
    })
  })


  describe('template', () => {

    ...

    describe('タスク入力がない場合', () => {
      beforeEach(() => {
        const mock = jest.fn()
        wrapper.vm.addTask = mock
        wrapper.find('input').setValue('')
      })

      test('dataに入力が反映されること', () => {
        expect(wrapper.vm.taskForm.content).toBe('')
      })

      test('タスク作成ボタンを押下するとaddTaskが呼ばれないこと', () => {
        wrapper.find('button').trigger('click')
        
        expect(wrapper.vm.addTask).not.toHaveBeenCalled()
      })
    })
  
  })

 ...

})

「ユーザーはフォームにタスクが入力していない場合は、作成ボタンを押すことができない」を実装する

ボタンにdisabled属性を付与し、computedでフォームの入力を監視してボタンの活性非活性を制御するように実装しました。

・components/TaskForm.vue

<template>
  <div>
    <input
      v-model="taskForm.content"
    >
    <button
      :disabled="activateSubmit"
      @click="addTask">
      タスク作成
    </button>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  
...

  computed: {
    activateSubmit () {
      return this.taskForm.content == ''
    }
  },
  
...

}
</script>

「ユーザーはフォームにタスクが入力していない場合は、作成ボタンを押すことができない」をテストする

実装が終わったら再度テストを流します。テストが全て通ればこのストーリーは完了です。

PASS  components/TaskForm.spec.js
  components/TaskForm.vue
    template
      ✓ タスク入力フォームが存在すること (9 ms)
      ✓ タスク作成ボタンが存在すること (1 ms)
      タスク入力がある場合
        ✓ dataに入力が反映されること (2 ms)
        ✓ タスク作成ボタンを押下するとaddTaskが呼ばれること (2 ms)
      タスク入力がない場合
        ✓ dataに入力が反映されること (1 ms)
        ✓ タスク作成ボタンを押下するとaddTaskが呼ばれないこと (1 ms)
    script
      data
        ✓ dataの構造が正しいこと (1 ms)

「ユーザーはToDoタスクの完了ボタンを押すと、完了タスク一覧にタスクが移動されることを確認できる」のテストを書く

ToDoタスクの完了ボタンを押すと、完了タスク一覧にタスクが移動されることを確認できるテストを書いていきます。

・components/TaskList.spec.js

import Vuex from 'vuex'
import { mount, createLocalVue } from '@vue/test-utils'
import * as indexStore from '@/store'
import TaskList from '@/components/TaskList.vue'

const localVue = createLocalVue()
localVue.use(Vuex)

describe('components/TaskList.vue', () => {
  let wrapper
  let store
  let todoTask
  let doneTask
  beforeEach(() => {
    store = new Vuex.Store(indexStore)
    todoTask = { id: '1', content: 'content_1', status: 'todo' }
    doneTask = { id: '2', content: 'content_2', status: 'done' }
    wrapper = mount(TaskList, {
      store: store,
      localVue
    })
    store.replaceState({ tasks: [todoTask, doneTask] })
  })

  describe('template', () => {
   
...

    describe('todoリストの完了をクリックする場合', () => {
      test('doneTaskが指定の引数で呼び出されること', () => {
        const mock = jest.fn(todoTask => todoTask)
        wrapper.vm.doneTask = mock
     
        wrapper.find('li.todo button').trigger('click')
        expect(wrapper.vm.doneTask).toHaveBeenCalled()
        expect(wrapper.vm.doneTask.mock.results[0].value).toBe(todoTask)
      })
    })
  })

  ...

})

ストアではタスクのステータスが更新されることが確認できるテストを書いていきます。

・store/index.spec.js

import Vuex from 'vuex'
import * as index from '@/store'
import { createLocalVue } from '@vue/test-utils'
import _ from 'lodash'
import axios from 'axios'

const localVue = createLocalVue()
localVue.use(Vuex)

let mockAxiosGetResult
jest.mock('axios', () => ({
  
...

  patch: jest.fn(() => Promise.resolve(mockAxiosGetResult))
}))

let action
const testedAction = (context = {}, payload = {}) => {
  return index.actions[action].bind({ $axios: axios })(context, payload)
}

describe('store/index.js', () => {
  let store
  let todoTask, doneTask
  beforeEach(() => {
    store = new Vuex.Store(_.cloneDeep(index))
    todoTask = { id: '1', content: 'content_1', status: 'todo' }
    doneTask = { id: '2', content: 'content_2', status: 'done' }
  })


...

  describe('actions', () => {
    let commit
    beforeEach(() => {
      commit = store.commit
    })

   ...

    describe('updateTask', () => {
      beforeEach(() => {
        store.replaceState({
          tasks: [todoTask]
        })
      })

      test('taskが更新されること', async () => {
        mockAxiosGetResult = {
          data: {
            name: `tasks/${todoTask.id}`,
            fields: {
              content: { stringValue: 'updatedContent' },
              status: { stringValue: 'done' }
            }
          }
        }
        action = 'updateTask'
        await testedAction({ commit })
        expect(store.getters['doneTasks']).toContainEqual({
          id: todoTask.id,
          content: 'updatedContent',
          status: 'done'
        })
      })
    })
  })
})

「ユーザーはToDoタスクの完了ボタンを押すと、完了タスク一覧にタスクが移動されることを確認できる」を実装する

ToDoタスクの完了ボタンを押すと、ストアのupdateTaskを呼び出しステータスを完了にすることで完了タスク一覧に移動されるように実装します。

・components/TaskList.vue

<template>
  <div>
    <p>ToDoタスク</p>
    <ul>
      <li
        v-for="todoTask in todoTasks"
        :key="todoTask.id"
        class="todo"
      >
        <span>{{ todoTask.content }}</span>
        <button 
          @click="doneTask(todoTask)">
          完了
        </button>
      </li>
    </ul>
    <hr>
    <p>完了タスク</p>
    <ul>
      <li
        v-for="doneTask in doneTasks"
        :key="doneTask.id"
        class="done"
      >
        <span>{{ doneTask.content }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import _ from 'lodash'

export default {
  
...

  methods: {
    async doneTask(task) {
      const payload = _.cloneDeep(task)
      payload.status = 'done'
      await this.$store.dispatch('updateTask', payload)
    }
  }
}
</script>

・store/index.js

import _ from 'lodash'

export const state = () => ({
  tasks: []
})

export const getters = {
  tasks: state => state.tasks,

  ...

}

export const mutations = {
  
...

  updateTask(state, newTask) {
    const task = state.tasks.find(task => task.id === newTask.id)
    if (task) {
      task.content = newTask.content
      task.status = newTask.status
    }
  }
}

export const actions = {
 
...

  async updateTask({ commit }, payload) {
    const req = {
      fields: {
        content: {
          stringValue: payload.content
        },
        status: {
          stringValue: payload.status
        }
      }
    }
    await this.$axios.patch(`/tasks/${payload.id}`, req, {
      baseURL: process.env._AXIOS_BASE_URL_
    }).then(res => {
      const updateTask = {
        id: _.last(res.data.name.split('/')),
        content: res.data.fields.content.stringValue,
        status: res.data.fields.status.stringValue
      }
      commit('updateTask', updateTask)
    })
  }
}

「ユーザーはToDoタスクの完了ボタンを押すと、完了タスク一覧にタスクが移動されることを確認できる」のテストをする

実装が終わったら再度テストを流します。テストが全て通ればこのストーリーは完了です。

PASS  components/TaskList.spec.js
  components/TaskList.vue
    template
      ✓ todoリストが表示されること (17 ms)
      ✓ 完了リストが表示されること (2 ms)
      todoリストの完了をクリックする場合
        ✓ doneTaskが指定の引数で呼び出されること (3 ms)
    script
      computed
        todos
          ✓ storeからtodoTasksが取得できること (1 ms)
          ✓ storeからdoneTasksが取得できること (2 ms)

PASS  store/index.spec.js
  store/index.js
    getters
      todoTasks
        ✓ statusがtodoのtaskが取得できること (3 ms)
      doneTasks
        ✓ statusがdoneのtaskが取得できること (1 ms)
      tasks
        ✓ すべてのtasksが取得できること
    actions
      fetchTasks
        ✓ tasksが取得できること (1 ms)
      createTask
        ✓ taskが追加されること
      updateTask
        ✓ taskが更新されること

「ユーザーは完了タスクのToDoに戻すボタンを押すと、ToDoタスク一覧にタスクが移動されることを確認できる」のテストを書く

完了タスクのToDoに戻すボタンを押すと、ToDoタスク一覧にタスクが移動されることを確認できることが確認できるテストを書いていきます。

ストアのタスクステータス更新のテストは先程のストーリーで確認済みなため、新しくストアのテストは書いていません。

・components/TaskList.spec.js

import Vuex from 'vuex'
import { mount, createLocalVue } from '@vue/test-utils'
import * as indexStore from '@/store'
import TaskList from '@/components/TaskList.vue'

const localVue = createLocalVue()
localVue.use(Vuex)

describe('components/TaskList.vue', () => {
  let wrapper
  let store
  let todoTask
  let doneTask
  beforeEach(() => {
    store = new Vuex.Store(indexStore)
    todoTask = { id: '1', content: 'content_1', status: 'todo' }
    doneTask = { id: '2', content: 'content_2', status: 'done' }
    wrapper = mount(TaskList, {
      store: store,
      localVue
    })
    store.replaceState({ tasks: [todoTask, doneTask] })
  })

  describe('template', () => {
   
...

   describe('完了リストのToDoに戻すをクリックする場合', () => {
      test('returnTaskが指定の引数で呼び出されること', () => {
        const mock = jest.fn(doneTask => doneTask)
        wrapper.vm.returnTask = mock
     
        wrapper.find('li.done button').trigger('click')
        expect(wrapper.vm.returnTask).toHaveBeenCalled()
        expect(wrapper.vm.returnTask.mock.results[0].value).toBe(doneTask)
      })
    })
 })

  ...

})

「ユーザーは完了タスクのToDoに戻すボタンを押すと、ToDoタスク一覧にタスクが移動されることを確認できる」を実装する

完了タスクのToDoに戻すボタンを押すと、ストアのupdateTaskを呼び出しステータスをToDoにすることでToDoタスク一覧に移動されるように実装します。

・components/TaskList.vue

<template>
  <div>
    <p>ToDoタスク</p>
    <ul>
      <li
        v-for="todoTask in todoTasks"
        :key="todoTask.id"
        class="todo"
      >
        <span>{{ todoTask.content }}</span>
        <button 
          @click="doneTask(todoTask)">
          完了
        </button>
      </li>
    </ul>
    <hr>
    <p>完了タスク</p>
    <ul>
      <li
        v-for="doneTask in doneTasks"
        :key="doneTask.id"
        class="done"
      >
        <span>{{ doneTask.content }}</span>
        <button 
          @click="returnTask(doneTask)">
          ToDoに戻す
        </button>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import _ from 'lodash'

export default {

...

  methods: {

    ...

    async returnTask(task) {
      const payload = _.cloneDeep(task)
      payload.status = 'todo'
      await this.$store.dispatch('updateTask', payload)
    }
  }
}
</script>

「ユーザーは完了タスクのToDoに戻すボタンを押すと、ToDoタスク一覧にタスクが移動されることを確認できる」のテストをする

実装が終わったら再度テストを流します。テストが全て通ればこのストーリーは完了です。

PASS  components/TaskList.spec.js
  components/TaskList.vue
    template
      ✓ todoリストが表示されること (12 ms)
      ✓ 完了リストが表示されること (3 ms)
      todoリストの完了をクリックする場合
        ✓ doneTaskが指定の引数で呼び出されること (3 ms)
      完了リストのToDoに戻すをクリックする場合
        ✓ returnTaskが指定の引数で呼び出されること (2 ms)
    script
      computed
        todos
          ✓ storeからtodoTasksが取得できること (1 ms)
          ✓ storeからdoneTasksが取得できること (5 ms)

全部のテストを流す

全部の実装が終わったら、全てのテストを流します。package.jsonのscriptに”test”: “jest –config jest.config.js”を追加し、以下のコマンドで実行します。

$ npm run test

PASS components/TaskForm.spec.js
PASS components/TaskList.spec.js
PASS store/index.spec.js

全てのテストが通ったら完了です。

ルートを拡張する

nuxt.config.jsのrouterプロパティにextendRoutesオプションを追加することで、Nuxt.js によって作成されたルートを拡張することができます。今回は本一覧ページにページネーションを拡張するので以下のような実装になります。

・nuxt.config.js

...

  router: {
    extendRoutes (routes, resolve) {
      routes.push({
        path: '/books/page/:p',
        component: resolve(__dirname, 'pages/books/index.vue'),
        name: 'books-pager'
      })
    }
  },

...

ちなみに/libraries/1(ライブラリID)/books/page/1のように間にID(例ではライブラリID)を挟んでルートを拡張したい場合は以下のような感じになります。page構成はpages/libraries/_libraries/reviews.vueでファイルを作成します。

...

  router: {
    extendRoutes (routes, resolve) {
      routes.push({
        path: '/libraries/:libraries/books/page/:p',
        component: resolve(__dirname, 'pages/libraries/_libraries/books.vue'),
        name: 'libraries-books-pager'
      })
    }
  },

...

・extendRoutesオプション

Nuxt 2 - router プロパティ

router プロパティを使って Nuxt ルーターをカスタマイズできます。

ja.nuxtjs.org

generateのタイミングでページネーションに必要なデータを渡す

ページネーション用にルートを拡張したら、必要なページの生成とページごとのデータをpayloadで渡していきます。例として本のデータと総件数をもとにページの生成をしています。

10のところは1ページあたりに表示するデータ数で、とりあえずそのまま書いてますがconfigファイルを用意して設定しておきましょう。総件数を10で割った余りが0とそうではない場合で条件分岐し、その回数分ループするようにしています。これは例えば総件数が20件の場合は10で割った余りが0であり、20 / 10で2回分ループします。総件数が21件の場合は10で割った余りが0でないため(20 / 10) + 1となり3回分ループします。1ページに表示できる件数は10件までであるため、このようなロジックになります。

...

  const books = … // 取得処理省略
  const booksTotalCount = ... // 取得処理省略

  const loops = booksTotalCount % 10 === 0
    ? booksTotalCount / 10
    : parseInt(booksTotalCount / 10) + 1

  return [...Array(loops)].map((_, index) => ({
    route: `/books/page/${index + 1}`,
    payload: {
      books,
      totalCount: booksTotalCount
    }
  }))

...

generateで渡されたデータをそれぞれのページで受け取る

ページネーションのページごとにpayloadで渡されたデータから表示分のデータと総件数をstoreにセットします。mapGettersでstoreからデータを取り出してPagerコンポーネントにデータを渡しています(Pagerコンポーネントの実装部分は省略)。payloadで渡されない場合は別途APIから取得するようにしています。

・pages/books/index.vue

…

  <Pager
    v-if="totalCount"
    :page-number="param"
    :per-page="perPage"
    :total-count="totalCount"
    :base-path="'/books'"
  />

…

<script>
import { mapGetters } from 'vuex'
export default {
  async asyncData ({ store, payload, params }) {
    const perPage = 10
    const param = Number(params.p) || 1
    const offset = perPage * (param - 1)
    if (payload) {
      store.commit('books/setBooks', { books: payload.books.slice(offset, offset + perPage) })
      store.commit('books/setTotalCount', { totalCount: payload.totalCount })
    } else {
      await Promise.all([
      store.dispatch('books/fetchBooks', { limit: perPage, offset }),
    ])
  }
  return {
    param,
    perPage
    }
  },
  computed: {
    ...mapGetters('books', ['books']),
    ...mapGetters('books', ['totalCount'])
  }
};
</script>

公式：https://www.npmjs.com/package/vue-json-to-csv

vue-json-to-csvのインストールと初期設定

まず、vue-json-to-csvをインストールします。

$ npm i vue-json-to-csv

vue-json-to-csvを使用するためにplugins配下にvue-json-to-csv.jsファイルを生成して、componentで使えるようにしておきます。

・plugins/vue-json-to-csv.js

import Vue from 'vue'
import VueJsonToCsv from 'vue-json-to-csv'

Vue.component('VueJsonToCsv', VueJsonToCsv)

nuxt.config.jsのpluginsに作成したファイルのパスを追記します。

・nuxt.config.js

...

  plugins: [
    { src: '@/plugins/vue-json-to-csv.js' }
  ],

...

vue-json-to-csvでCSVダウンロードを実装

実際にCSVダウンロードしてみます。コンポーネントとして使えるようにしたVueJsonToCsvを使ってbuttonタグを囲います

VueJsonToCsvのjson-dataはCSVのデータとして出力され、labelsはCSVの列名として出力され、csv-titleはCSVファイル名になります。

他にもオプションがあり、詳しくは公式サイトを参照してください。

公式：https://www.npmjs.com/package/vue-json-to-csv

・pages/books.vue

<VueJsonToCsv
  :json-data="books"
  :labels="labels"
  :csv-title="title"
>
  <button @click="download">
    CSVダウンロード
  </button>
</VueJsonToCsv>

今回は例として、CSVダウンロードをクリックするとdownloadメソッドによって、computedで取得していたbookDatasからbooksにCSVで必要なデータを渡しています。

labelsは列名としてnameを本のタイトル、authorを著者として表示されるようにしています。

CSVファイル名は、moment.jsを使って「本のCSVデータ_現在日時」となるようにしています。

・pages/books.vue

...

data () {
  return {
    title: '本のCSVデータ_' + moment().format('YYYY年MM月DD日HH:mm'),
    labels: {
      name: { title: '本のタイトル' },
      author: { title: '著者' }
    },
    books: []
  }
},
computed: {
  ...mapGetters(books, [bookDatas])
},
methods: {
  download () {
    this.bookDatas.forEach((book) => {
      this.books.push({
        name: book.name,
        author: book.author
      })
    })
  }
}

...

vuex-persistedstateのインストール・設定

vuex-persistedstateを使ってWebStorageにVuexのステート情報を保存する方法でやっていきます。package.jsonにvuex-persistedstateを追記し、mpm installコマンドでインストールします。

・package.json

...

  "dependencies": {
    "vuex-persistedstate": "^2.7.0"
  },

...

インストールしたらpluginsディレクトリ配下にpersistedstate.jsファイルを作成し、以下のように永続化させる情報を設定していきます。

keyはWebStorageにキーとなる文字列を入力し、pathsはVuexのステート情報を保存しているファイル名を入力します。

WebStorageにはlocalStorageとsessionStorageがあります。localStorageはブラウザを閉じてもデータを保持されますが、sessionStorageはブラウザを閉じるとデータは破棄されます。今回はsessionStorageを使用して実装していきます。

・persistedstate.js

import createPersistedState from 'vuex-persistedstate'

export default ({ store, isHMR }) => {
  if (isHMR) { return }

  if (process.client) {
    window.onNuxtReady((nuxt) => {
      createPersistedState(
        {
          key: 'sample',
          paths: ['favorite'],
          storage: window.sessionStorage
        }
      )(store)
    })
  }
}

nuxt.config.jsのpluginsに先ほど作成したファイルパスを追記し、設定完了です。

・nuxt.config.js

...

  plugins: [
    // Doc: https://github.com/robinvdvleuten/vuex-persistedstate
    { src: '@/plugins/persistedstate', mode: 'client' }
  ],

...

お気に入りストアを作成する

実際にWebStorageと連携し保存するストアを書いていきます。

今回はお気に入りのIDを保存することで、そのIDに紐づくデータを後から取得できるようにします。

後で呼び出されるようにお気に入り登録した際にIDを格納する処理と削除する処理も書いておきます。

・store/favorite.js

export const state = () => ({
  /**
  * お気に入り情報
  * @typedef {object} favorite
  * @property {array} id サンプルID
  */
  favorite: {
    id: []
  }
})

export const getters = {
  /**
  * お気に入り情報を取得する
  * @return {object}
  */
  favorite: state => state.favorite,
  /**
  * お気に入り情報のサンプルIDを取得する
  * @return {array}
  */
  id: state => state.favorite.id
}

export const mutations = {
  /**
  * お気に入り登録するサンプルIDを格納する
  * すでに格納されていた場合はエラー
  * 25件以上の場合はエラー
  * @param state
  * @param {array} id
  */
  addFavoriteId (state, { id }) {
    if (state.favorite.id.includes(id)) {
      alert('既に登録済みです')
      return
    }
    if (state.favorite.id.length >= 25) {
      alert('お気に入りに登録できるのは25件までです')
      return
    }

    state.favorite.id.push(id)
  },
  /**
  * お気に入り登録するサンプルIDを解除する
  * すでに解除されていた場合はエラー
  * @param state
  * @param {array} id
  */
  releaseFavoriteId (state, { id }) {
    if (!state.favorite.id.includes(id)) {
      alert('既に解除済みです')
      return
    }

    state.favorite.id.splice(state.favorite.id.indexOf(id), 1)
  },
  /**
  * お気に入りを情報をクリアする（=初期状態のデータを格納する）
  * @param state
  */
  clearFavorite (state) {
    state.favorite = {
      id: []
    }
  }
}

お気に入り登録する

お気に入り登録したいページに登録・解除の処理を実装していきます。

まずmapGettersからWebStorageに格納されているお気に入り情報を取得します。既にお気に入り登録されているかどうかの条件判定をし、登録・解除のボタンをそれぞれ出し分けます。

お気に入り登録した情報を表示したい場合は、mapGettersからfavoriteを呼び出しidに紐づいたデータをAPIから取得する感じになります。情報量が少ない場合は、APIからデータを呼び出さずにfavoriteにプロパティを追加してWebStorage(容量5MB)に持っておいても良いと思います。

・pages/sample/index.vue

...

  <button
    v-if="favorite.id.includes(sample.id)"
    @click="releaseFavoriteId(sample.id)"
  >
    お気に入り解除
  </button>
  <button
    v-else
    @click="addFavoriteId(sample.id)"
  >
    お気に入り登録
  </button>

...

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(samples, [samples]),
    ...mapGetters('favorite', ['favorite'])
  },
  methods: {
    addFavoriteId (id) {
      this.$store.commit('favorite/addFavoriteId', { id })
    },
    releaseFavoriteId (id) {
      this.$store.commit('favorite/releaseFavoriteId', { id })
    }
  }
}
</script>

vue-simple-suggestのインストール・設定

サジェスト機能を実装するためにvue-simple-suggestをインストールします。

$ npm install --save vue-simple-suggest

vue-simple-suggestを使用するためにplugins配下にvue-simple-suggest.jsファイルを生成して、componentで使えるようにしておきます。

・plugins/vue-simple-suggest.js

import Vue from 'vue'
import VueSimpleSuggest from 'vue-simple-suggest'

Vue.component('VueSimpleSuggest', VueSimpleSuggest)

nuxt.config.jsのpluginsに作成したファイルのパスを追記します。

・nuxt.config.js

...

  plugins: [
    // Doc: https://github.com/KazanExpress/vue-simple-suggest
    { src: '@/plugins/vue-simple-suggest.js' }
  ],

...

vue-simple-suggestでサジェスト機能を実装

実際にvue-simple-suggestでサジェスト機能を実装していきます。まずはサジェストを表示するための検索機能のHTMLを書いていきます。

今回はinputに入力するとサジェスト候補に一致したキーワードがinputの下に表示されるように実装します。

入力するクエリによって表示するサジェストをフィルタリングするためにfilter-by-queryオプションをtrueにしています。表示させるサジェストの最大候補数なども変更できるので、詳しくはこちらの公式を参考にしてください。

参考：https://github.com/KazanExpress/vue-simple-suggest#emitted-events

入力候補はdivタグ内のspanタグのsuggestionに表示されます。クリックするとinputに表示されます。

・components/search.vue

<template>
  <form @submit.prevent="submitHandler">
    <client-only>
      <VueSimpleSuggest
        v-model="searchQuery"
        :list="getSuggestionLists"
        :filter-by-query="true"
      >
        <input
          v-model="searchQuery"
          :name="'searchQuery'"
        >
        <div slot="suggestion-item" slot-scope="{ suggestion }">
          <span>{{ suggestion }}</span>
        </div>
      </VueSimpleSuggest>
    </client-only>
  </form>
</template>

getSuggestionListsでサジェスト候補のリストを取得しています。

あらかじめstoreにセットされたデータを使います。今回は都道府県ごとの観光カテゴリをサジェストで表示させます。

・components/search.vue

...

  data () {
    return {
      searchQuery: ''
    }
  },
  computed: {
    ...mapGetters('prefectures', ['prefectures']),
    ...mapGetters('categories', ['categories'])
  },
  methods: {
    async getSuggestionLists () {
      const suggestionLists = []
      await this.prefectures.forEach((prefecure) => {
        suggestionLists.push(prefecure.name)

        this.categories.forEach((category) => {
          suggestionLists.push(prefecure.name + ' ' + category.name)
        })
      }

      return suggestionLists
    }
  }

...

実際に動かしてみると、以下のようにサジェストが表示されていることが確認できます。

バージョン2系からバージョン3系への仕様変更

2019/8のバージョン3系への更新によって大規模な仕様変更が生じたため、それまでv-validate ディレクティブを用いていましたが、バージョン3系ではValidationProviderを使うようになっています。

ex) バージョン2系

<input name="name" type="text" v-validate="'required'">

ex) バージョン3系

<ValidationProvider rules="required" v-slot="{ errors }">
    <input type="text" v-model="name">
</ValidationProvider>

vee-validateのインストール

今回はバージョン2系をインストールします。

$ npm i vee-validate@2.2.15 -save

vee-validateの設定

pluginsディレクトリ配下にvee-validate.jsファイルを作成します。vee-validate/dist/locale/jaを読み込むことで、エラーメッセージの日本語化をします。

・plugins/vee-validate.js

import Vue from 'vue'
import VeeValidate, { Validator } from 'vee-validate'
import ja from 'vee-validate/dist/locale/ja'

Vue.use(VeeValidate)
Validator.localize('ja', ja)

nuxt.config.jsのpluginsにvee-validateを追加します。

・nuxt.config.js

plugins: [
...
    { src: '~/plugins/vee-validate', ssr: true }
...
],

ちなみにssrをfalseにすると、以下のエラーが発生します。

バリデート自体はSSR時に必要ないのだが、tmplateがレンダリングしようとするため、errorsのhasが読み込めないということになります。

ERROR [Vue warn]: Error in render: "TypeError: Cannot read property 'has' of undefined"

vee-validateによるバリデート

実際にバリデート処理を実装してみます。バリデートしたいinputタグにv-validateを追加し、バリデーションルールを指定します。

バリデーションルールに反していた場合、v-show=”errors.has(‘name’)”がtrueとなり、エラーメッセージが表示されます。

<form @submit.prevent="register">
    <input
        :name="'name'"
        :placeholder="'名前'"
        v-validate="'required'"
        data-vv-as="名前"
    />
    <div class="form-control-feedback" v-show="errors.has('name')">
        <p class="alert alert-danger">{{ errors.first('name') }}</p>
    </div>
    <button type="submit">登録</button>
</form>

登録ボタンを押した際にバリデートをかけるには以下のように実装します。バリデーションルールに則っていた場合のみ、登録処理を実行すことができます。

methods: {
    register () {
        this.$validator.validateAll().then((result) => {
            if (result) {
                this.$store.dispatch(test/register, { name: this.name })
            }
        })
    }
}

・ex) バリデート使用例

バリデーションルール

主なバリデーションのルールとして以下のルールがあります。

• required : 入力必須
• email : メールアドレス形式
• numeric : 半角数値のみ
• min : 最小入力文字数
• max : 最大入力文字数

詳しくはこちらの公式ページに全てのバリデーションルールが記載されています。

参考：Validation Rules

以上、vee-validateというライブラリでNuxt.jsにバリデーションを実装する方法でした。

事前準備

まずは「vue-infinite-loading」プラグインをインストールします。

$ npm install vue-infinite-loading --save

pluginsディレクトリ配下にinfiniteloading.jsファイルを作成し、以下を追加します。

・infiniteloading.js

import Vue from 'vue'
import InfiniteLoading from 'vue-infinite-loading'

Vue.use(InfiniteLoading)

nuxt.config.jsのpluginsに「InfiniteLoading」を追加します。これで準備完了です。
・nuxt.config.js

...

plugins: [
    { src: '~/plugins/infiniteloading', ssr: false }
]

...

無限スクロール実装

無限スクロールしたい検索結果の下に以下のコードを追加します。スクロールされるとinfiniteメソッドが呼び出されます。

検索結果が取得できなくなった場合はデフォルトだと「No more data :)」になっています。

変更したい場合は<span slot=”no-more”></span>と<span slot=”no-results”></span>の中に文言を追加することで変更できます。

spinnerは変更することで読み込み中のローディングをカスタマイズできます。

■カスタマイズ

1. default
2. circle
3. bubbles
4. spiral
5. waveDots

...

<form @submit.prevent="search" method="post" action="?">
    <label>
        <input v-model="name" type="text" placeholder="ここで検索">
    </label>
</form>

...

<infinite-loading
    ref="infiniteLoading"
    spinner="waveDots"
    @infinite="infinite">
        <span slot="no-more">検索結果は以上です</span>
        <span slot="no-results">検索結果はありません</span>
</infinite-loading>

...

infiniteメソッドが呼び出されると、APIを通してデータを取得してきます(API側の取得処理は割愛)。setTimeoutで3秒間指定した後、実行しています。

offsetを++していることで取得する次に取得すべきデータを判定しています。

取得データがある場合は、this.$refs.infiniteLoading.stateChanger.loaded()を呼び出し、取得データがなくなると、this.$refs.infiniteLoading.stateChanger.complete()メソッドを呼び出します。

また今回は検索機能もあるため、検索を実行した場合はthis.$refs.infiniteLoading.stateChanger.reset()でローディング結果をリセットして再度データを1から取得してきます。

import InfiniteLoading from 'vue-infinite-loading'

export default {

    ...

    components { InfiniteLoading },
        data () {
            return {
                name: '',
                searchParam: { name: '', offset: 0, per: 5 }
            }
        },
        methods: {
            search () {
                this.$refs.infiniteLoading.stateChanger.reset()
                this.searchParam.name = this.name
                this.searchParam.offset = 1
                this.$store.dispatch('test/searchTests', { searchParam: this.searchParam })
            },
            infinite () {
                setTimeout(() => {
                    this.searchParam.name = this.name
                    this.searchParam.offset += 1
                    this.$store.dispatch('test/searchInfiniteTests', { searchParam: this.searchParam }).then((result) => {
                    if (result.length >= this.searchParam.per) {
                        this.$refs.infiniteLoading.stateChanger.loaded()
                    } else {
                        this.$refs.infiniteLoading.stateChanger.complete()
                    }
                })
            }, 3000)
        }
    }
...

}

以上、Nuxt.jsで「vue-infinite-loading」を使って、検索結果を無限スクロールする方法でした。