診断コンテンツ作成するには？作るためのメソッドを紹介！
本日業務で診断コンテンツを作成することがありましたのでそれの備忘録をご紹介しようと思います。
本日作成したのは以下のような診断コンテンツです。
- 結果は最終的に4つのタイプに分かれる
- 二択の質問に回答して結果に導く
- 問題数は全部で5個
まあシンプルな診断コンテンツですよね。
ABCD４つのタイプがあったとして、各タイプに関する質問をしてその質問を二択のうちから回答を選んだら、回答ボタンに紐づいているタイプをカウントしていくような流れとなっています。
例を出すとするなら「A」タイプに紐づいている「a」の回答をしたら「A」をカウントしていくようなイメージです。
では前置きは置いといてサンプルを見てみましょう。
今回サンプルとして出しているのはご覧の通り、5個の質問で現れる選択肢を選ぶことでどのタイプか、というのを判定するもの。
今回はちょっとめんどくささもあったので紐づいているタイプを選択肢に書いちゃってます（笑）
なので手っ取り早く動作を確認するにはひたすら同じアルファベットの選択肢を選ぶことでちゃんとそのタイプのアルファベットが表示されるか、ということを見ていけば大丈夫なはず。
ちなみにずっと左側押していると、受け取る値は「R,R,S,A,I」となるので一番数の多いRタイプになりますね。
このコンテンツの仕組みは「配列」が重要です。
このコンテンツで使用している配列は全部で3つ。
①userAnswers…選択肢のボタンに紐づいている「クラス」を取得し、そのクラスの値をユーザーの回答として保持する配列。
②countType…各タイプが配列の中に何回出てくるかをまとめた配列。
③counts…各タイプの数「count」とタイプを識別するkey「type」の連想配列。
まあ、2と3はまとめられる感じもしますが勉強のため、ということで…
さて、この配列たちの役割はこんなところなのですが見てもらえれば分かる通りuserAnswersに入った値からそれぞれの値の中でどの値が一番多いのかを判定し、多い値のものをsort関数でインデックス0番に持っていき、そのtypeを返すという流れになっています。
仕組みに関しては以上のような形なので細かい処理は割愛して、今回「なるほど！」となった処理「Array.filter」について見ていきたいと思います。
Array.filter
Array.filterは配列の値をフィルタリングする関数です。
使い方はコードの中にもありますが下の通り。
配列.filter((変数)=>変数の処理)
この類の関数はforEachとかfor...inとかでも見かけますね。
引数の変数に配列の値が入り、その変数を使って値を一個ずつ処理できる、というものです。
phpでは配列の重複をカウントできるメソッドがあるようですがjsではそのようなメソッドがなかったので今回はfilterを使ってそれぞれの値の数を計算しています。
はじめて使いましたが配列を使う上ではかなり重宝しそうな予感…
さて今回は初めて診断コンテンツを作成しましたが、配列は初学者には取っつきにくさMAXですが、やはり便利！
ちなみに配列系で言えば、Array.reduceが最強らしいですよ。
