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

#追記(2018/7/6)
続編
[【Vue.js】スプラトゥーン2 おすすめブキ診断をパワーアップさせた【Part2】 - Qiita](https://qiita.com/Sinhalite/items/b294629f8f6edab4e657)
を書きました。

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

#完成サイト
[スプラトゥーン2 ブキ診断](http://sinhalite.html.xdomain.jp/splatoon/)

![ss.png](https://qiita-image-store.s3.amazonaws.com/0/104983/4fb48f23-3829-e6d9-a9e3-a3c3e59b9d36.png)

#ソースコード
```html: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>

```

```javascript: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を使うメリットはそこまで大きくないかもしれません。
ただシンプルで記述も分かりやすいですし、人気のある理由が分かりました。

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

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