Help us understand the problem. What is going on with this article?

スプラトゥーン2 おすすめブキ診断を作ってみた(Vue.js)

More than 1 year has passed since last update.

追記(2018/7/6)

続編
【Vue.js】スプラトゥーン2 おすすめブキ診断をパワーアップさせた【Part2】 - Qiita
を書きました。

きっかけ

最近Qiitaやはてブを開くと毎日のように「Vue.js」の話題が上がっているので、キャッチアップしなければ…ということで勉強を兼ねて作ってみました。

完成サイト

スプラトゥーン2 ブキ診断

ss.png

ソースコード

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>スプラトゥーン2 武器診断</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="css/main.css" type="text/css" media="all">
  </head>
  <body>
    <div id="app">
        <h1>スプラトゥーン2 武器診断</h1>
        <h2>
          {{ message }}
        </h2>
        <div id="choice" v-if="choice">
            <a href="#" class="square_btn yes" v-on:click="clickAnswer('Yes')">はい</a>
            <a href="#" class="square_btn no" v-on:click="clickAnswer('No')">いいえ</a>
        </div>
        <div id ="retry" v-if="retry_btn">
            <a href="#" class="square_btn yes" v-on:click="retry">リトライする</a>
        </div>
    </div>
    <script src="js/main.js" ></script>
  </body>
</html>

main.js
var counter;
var quetions;
var weapons;
init();

function init(){
  counter = 0;
  quetions = [
    "エイムには自信がある",
    "キルよりも塗りのほうが好きだ",
    "かくれんぼが得意だ",
    "ガンガン前に突っ込むのが好きだ",
    "機動力が高い武器が好きだ",
    "トリッキーな武器が好きだ"
  ];
  weapons= {
    'スプラシューターコラボ':0,
    'N-ZAP85':0,
    'ジェットスイーパーカスタム':0,
    'デュアルスイーパーカスタム':0,
    'スプラマニューバーコラボ':0,
    'スプラチャージャー':0,
    'ホットブラスターカスタム':0,
    'スプラローラー':0,
    'パブロ':0,
    'バケットスロッシャーデコ':0,
    'バレルスピナー':0,
    'パラシェルター':0
  }
}

var app = new Vue({
  el: '#app',
  data: {
    choice: true,
    retry_btn: false,
    message: quetions[0]
  },
  methods: {
    clickAnswer: function (answer) {
      addPoint(answer,counter);
      counter += 1;
      if(counter > quetions.length-1){
        maxCount = 0
        maxWeapon = ""
        for(weapon in weapons) {
          if(maxCount < weapons[weapon]){
            maxCount = weapons[weapon];
            maxWeapon = weapon;
          }
        }
        this.message = "あなたには「" + maxWeapon + "」がオススメです!";
        this.choice = false;
        this.retry_btn = true;
      }else{
        this.message = quetions[counter];
      }
    },
    retry: function () {
      init();
      this.message = quetions[counter];
      this.choice = true;
      this.retry_btn = false;
    }
  }
});

function addPoint(answer,counter) {
  switch(counter){
    case 0:
      if(answer == 'Yes'){
        weapons['スプラシューターコラボ'] += 1;
        weapons['N-ZAP85'] += 1;
        weapons['ジェットスイーパーカスタム'] += 1;
        weapons['デュアルスイーパーカスタム'] += 1;
        weapons['スプラマニューバーコラボ'] += 1;
        weapons['スプラチャージャー'] += 1;
        weapons['バレルスピナー'] += 1;
      }else{
        weapons['ホットブラスターカスタム'] += 1;
        weapons['スプラローラー'] += 1;
        weapons['パブロ'] += 1;
        weapons['バケットスロッシャーデコ'] += 1;
        weapons['バレルスピナー'] += 1;
        weapons['パラシェルター'] += 1;
      }
      break;
    case 1:
      if(answer == 'Yes'){
        weapons['N-ZAP85'] += 1;
        weapons['デュアルスイーパーカスタム'] += 1;
        weapons['バレルスピナー'] += 1;
        weapons['バケットスロッシャーデコ'] += 1;
      }else{
        weapons['スプラシューターコラボ'] += 1;
        weapons['ジェットスイーパーカスタム'] += 1;
        weapons['ホットブラスターカスタム'] += 1;
        weapons['スプラローラー'] += 1;
        weapons['パブロ'] += 1;
        weapons['パラシェルター'] += 1;
        weapons['スプラマニューバーコラボ'] += 1;
        weapons['スプラチャージャー'] += 1;
      }
      break;
    case 2:
      if(answer == 'Yes'){
        weapons['スプラローラー'] += 1;
        weapons['パブロ'] += 1;
      }else{
        weapons['ジェットスイーパーカスタム'] += 1;
        weapons['バレルスピナー'] += 1;
        weapons['スプラチャージャー'] += 1;
      }
      break;
    case 3:
      if(answer == 'Yes'){
        weapons['スプラローラー'] += 1;
        weapons['パブロ'] += 1;
        weapons['バケットスロッシャーデコ'] += 1;
        weapons['ホットブラスターカスタム'] += 1;
        weapons['スプラシューターコラボ'] += 1;
        weapons['パラシェルター'] += 1;
        weapons['スプラマニューバーコラボ'] += 1;
      }else{
        weapons['N-ZAP85'] += 1;
        weapons['デュアルスイーパーカスタム'] += 1;
        weapons['ジェットスイーパーカスタム'] += 1;
        weapons['バレルスピナー'] += 1;
        weapons['スプラチャージャー'] += 1;
      }
      break;
    case 4:
      if(answer == 'Yes'){
        weapons['スプラローラー'] += 1;
        weapons['パブロ'] += 1;
        weapons['N-ZAP85'] += 1;
        weapons['スプラシューターコラボ'] += 1;
        weapons['スプラマニューバーコラボ'] += 1;
      }else{
        weapons['ホットブラスターカスタム'] += 1;
        weapons['バケットスロッシャーデコ'] += 1;
        weapons['ジェットスイーパーカスタム'] += 1;
        weapons['バレルスピナー'] += 1;
        weapons['スプラチャージャー'] += 1;
      }
      break;
    case 5:
      if(answer == 'Yes'){
        weapons['パラシェルター'] += 1;
        weapons['パブロ'] += 1;
        weapons['スプラチャージャー'] += 1;
      }else{
      }
      break;
  }
}

実装について

  • クリックで関数を実行する箇所には「v-on:click」を設定。
  • 条件によって表示を出し分けたい箇所には「v-if」を設定。
  • 連想配列でブキごとにポイントを持つ。回答を元にポイントを加算し、最大ポイントのブキをリコメンド。
  • 設問ごとにcase文で分岐。その中で「はい」「いいえ」を元に、ブキポイントを加算。あんまり設問が多くなると、長くなりすぎて良くない。

感想

このレベルの簡単なWEBアプリだと、Vue.jsを使うメリットはそこまで大きくないかもしれません。
ただシンプルで記述も分かりやすいですし、人気のある理由が分かりました。

もっと良い書き方などありましたら、ご教授いただけるとありがたいです。

(ちなみに私の診断結果は「スプラローラー」でした…。ほとんど使ってないけど…。)

Sinhalite
なんだかんだRailsが好き
https://sinhalite.me/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした