はじめに

こんにちは！
今回は前回の記事【Nuxt.js×microCMS】診断機能実装①ユーザーの選択に応じて診断結果をmicroCMSからの取得の続き、microCMSから取得した診断結果をランダムで表示させるについてアウトプットしていきます。

対象

・診断アプリを作りたい方
・ユーザーの選択に応じて表示させるものをコントロールしたい方
・前回の記事【Nuxt.js×microCMS】診断機能実装①ユーザーの選択に応じて診断結果をmicroCMSからの取得までの内容がお済みの方

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

使用環境

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

使用ファイル,概要

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

実装

前回まではQ1~Q5の質問をYES（true）NO(false)で答え、答えがYESの場合filtersにtureの情報を入れる。
filtersの中に入っている項目のデータをmicroCMSから引っ張ってくるということを実装しました。

pages/diagnose.vue

<template>
    <div class="bg-white py-20" v-if="showQuestion">
      <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 {
  layout: "oftenuse",
  data: function () {
    return {
      ids: [],
      randomId: "",
    };
  },
  methods: {
    async diagnose() {
      //ユーザーの選択に応じて診断結果をmicroCMSから取得する
      let filters = "";

      if (this.answers.q1 === true) {
        filters += "question1[equals]true";
      }
      if (this.answers.q2 === 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 });

      //👆前回までの内容

      //👇今回の内容
      const contents = book.contents; //本の情報の配列
      const ids = contents.map((e) => {
        return e.id;  //「e」は任意だが、一般的にeが使用されている。elementの頭文字の意味合い。
      });
      // ids: [] の中に診断で選択した項目の本のIDが並んでいる状態

      //本の配列から、ランダムに１冊を選ぶ
      //ランダムに選んだ１冊から、その本のIDを取り出す
      const randomId = ids[Math.floor(Math.random() * ids.length)];

      //その本のidを/result.vueのidにパラメータとして付けて、resultページに飛ぶ
      this.$router.push(`/result?id=${randomId}`);
    },
  },
};
</script>

・データを引っ張ってきたので、　その中のidの部分だけを引っ張ってきます。
・定数contentsを定義し、bookのcontents（microCMSで作成した情報の配列）を代入します。
・定数idsを定義し、診断で回答した項目の情報が入ったcontentsを.mapメソッドを使い、idの情報だけを引っ張り出し、新たに配列を定数idsに返します。

.mapメソッドに関してはこちら

・ここから複数あるid情報の中からランダムで１つ取得し、そのIDを持つページへと飛ばす処理を行います
・定数randomIdを定義し、その中にids[Math.floor(Math.random() * ids.length)]を代入します。

記述	処理内容	参考記事
Math.floor	整数にして返す	こちら
Math.random()	0以上1未満の乱数を返す	こちら
ids.length	idsに入っている要素の配列の数を設定、取得	こちら

全体を訳すと、ids.lengthでidsの配列を数（番号）を設定、取得しMath.random()でランダムに出力。しかし小数を含む乱数を出力してしまうのでMath.floorで整数のみを対象としているということになります。

・最後にthis.$router.push(/result?id=${randomId});として飛ばしたいページへpushする処理を記述します。

動作確認

①診断を開始する

今回の回答は、

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

と回答した。

Q1:YES
Q3:YES
Q5:YES

の中から、各質問に登録した診断結果がランダムで出力される。

②診断結果表示

無事表示されました！

まとめ

今回はmicroCMSから取得した診断結果をランダムで表示させるについて記事にしました。
今回の処理は本アプリの制作の中でも複雑で難しかったのが印象的です。

今回の記事が誰かのお役に立てたら幸いです！

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

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

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

【Nuxt.js×microCMS】診断機能実装②microCMSから取得した診断結果をランダムで表示させる

はじめに

対象

使用環境

使用ファイル,概要

実装

動作確認

まとめ