【Nuxt.js×microCMS】診断機能実装①ユーザーの選択に応じて診断結果をmicroCMSから取得する

#はじめに
こんにちは！
今回は【Nuxt.js×microCMS】診断機能実装①ユーザーの選択に応じて診断結果をmicroCMSからの取得についてアウトプットしていきます！

今回の内容は以前記事にまとめた【Nuxt.js】ボタンを押したらデータ値をとる＆色が変わる方法の内容の続きにあたる実装内容になっております！

#対象
・診断アプリを作りたい方
・ユーザーの選択に応じて表示させるものをコントロールしたい方
・【Nuxt.js】ボタンを押したらデータ値をとる＆色が変わる方法までの内容がお済みの方

参考：microCMS公式サイトはこちら

##使用環境

使用技術	バージョン
nuxt.js	2.15.7
nuxt-microcms-module	2.0.0
@nuxtjs/tailwindcss	4.2.0

##使用ファイル,概要

ファイル名	概要
pages/diagnose.vue	診断ページ

#実装事前説明

【Nuxt.js】ボタンを押したらデータ値をとる＆色が変わる方法ではQ1の実装しか記事にしていませんが、今回はQ１~Q5まであります。

#実装
【Nuxt.js】ボタンを押したらデータ値をとる＆色が変わる方法ではYESボタン、NOボタンを押すとtrue、falseがデータのQ1〜Q5に入るというところまで実装しました。

pages/diagnose.vue(script)

<template>
    <div class="bg-white py-20">
      <button
        @click="diagnose"
        class="
          text-2xl
          border-4 border-green-200
          rounded-full
          py-4
          px-20
          hover:bg-green-100
          duration-1000
        "
      >
        診断結果へ
      </button>
    </div>

</template>

<script>
export default {
  methods: {
    async diagnose() {
      //ユーザーの選択に応じて診断結果をmicroCMSから取得する
      let filters = "";
      //もしQ1がtrueだった時変数filtersに"question1[equals]true"を代入する
      //"question1[equals]true"はjavascriptの書き方で固定されている。
      if (this.answers.q1 === true) {
        filters += "question1[equals]true";
      }
      if (this.answers.q2 === true) {
        //もしfiltersの中身が空じゃない時（前の質問で一つでもYES[true]だった時）👉前の質問が全てNO[false]だった時は発動しない
        //[or]が追加される。つまりfiltersの中は、"question1[equals]true[or]question2[equals]true"という状態。
        if (filters != "") {
          filters += "[or]";
        }
        filters += "question2[equals]true";
      }
      if (this.answers.q3 === true) {
        if (filters != "") {
          filters += "[or]";
        }
        filters += "question3[equals]true";
      }
      if (this.answers.q4 === true) {
        if (filters != "") {
          filters += "[or]";
        }
        filters += "question4[equals]true";
      }
      if (this.answers.q5 === true) {
        if (filters != "") {
          filters += "[or]";
        }
        filters += "question5[equals]true";
      }
      const book = await this.$microcms.get({
        endpoint: "books",
        queries: {
          filters: filters,
        },
      });
      console.log({ book });
    },
  },
};
</script>

methodsの中にasync diagnose処理を記述。
いったん変数filtersの中身は空にしておく。
＊今回の診断結果表示は、trueの時だけ表示させるものを取得したいのでその記述だけおこなっています。

#動作確認

Q1:YES
Q2:NO
Q3:YES
Q4:NO
Q5:YES

という回答を行った。
＊一つの質問に対して２つの表示パターンをmicrocmsで設定しているので、全部で１０パターンの診断結果パターンがある。Q 1,Q 3,Q5が今回YESと回答したので６パターンの診断結果をがicroCMSから取得されているはずです。

診断結果をmicroCMSから取得されていることが確認できました！

#まとめ
今回はユーザーの選択に応じて診断結果をmicroCMSから取得について記事にしました。
次回は、今回取得した診断結果をランダムで表示する実装についてまとめていきます！

今後も引き続きQiitにポートフォリオ制作での学びをアウトプットしていきます！

今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

最後までご愛読ありがとうございました！