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

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

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

参考：microCMS公式サイトは[こちら](https://document.microcms.io/content-api/get-list-contents)

##使用環境

|使用技術  |バージョン  |
|:-:|:-:|
|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から引っ張ってくるということを実装しました。

```vuejs: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メソッドに関しては[こちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)


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

|記述  |処理内容  |参考記事|
|:-:|:-:|:-:|
|Math.floor  |整数にして返す |　[こちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/floor)　|
| Math.random()|0以上1未満の乱数を返す|[こちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random)　|
|ids.length|idsに入っている要素の配列の数を設定、取得  |[こちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/length)　|

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

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

#動作確認

①診断を開始する

![スクリーンショット 2022-01-07 6.37.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2114750/12920f54-f1ed-c2a0-8f8c-cea666811c7e.png)

今回の回答は、

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

と回答した。

Q1:YES
Q3:YES
Q5:YES

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

②診断結果表示

![スクリーンショット 2022-01-07 6.40.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2114750/df76fa5e-af2b-5d8d-dc31-582e5e98439a.png)

無事表示されました！

#まとめ

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

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

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

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

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