#はじめに
グランブルファンタジーというゲーム内のイベントである古戦場にて、目的の貢献度を貯めるためにはどれくらいのトリガーが必要か？を計算するツールを作りました。
作り自体は簡単なため、初めてVue.jsを勉強&アウトプットするにはいい題材でした。

実際に動かしたもの
http://ayama.main.jp/battlefieldRun.html

コード
https://github.com/guranytou/battlefieldRuns

#一番困った部分

battlefieldRun.html

        <fieldset class="inputFieldset">
          <div id="app">
            <div>
              <span>目標累計貢献度</span>
              <input type="text" v-model="input" id="contributionInput"></input>
            </div>
            <div id="trigerDigest">
              <div><span>肉の消化方法</span></div>
              <div>
                <input type="radio" class="hellRadio" name="hellRadio" id="hell95" value="Hell95" v-model="trigerDigest"/>
                <label class="hellRadioLabel" for="hell95">95HELL</label>
                <input type="radio" class="hellRadio" name="hellRadio" id="hell100" value="Hell100" v-model="trigerDigest"/>
                <label class="hellRadioLabel" for="hell100">100HELL</label>
                <input type="radio" class="hellRadio" name="hellRadio" id="hell150" value="Hell150" v-model="trigerDigest"/>
                <label class="hellRadioLabel" for="hell150">150HELL</label>
                <input type="radio" class="hellRadio" name="hellRadio" id="both" value="both" v-model="trigerDigest"/>
                <label class="hellRadioLabel" for="both">95&100HELL</label>
              </div>
            <div>
              <span>必要なトリガー数：</span><span>{{ output }}</span>
            </div>
          </div>
        </fieldset>

battlefieldRun.js

(function () {
   var triger = new Vue({
     el: '#app',
     data: {
       input: 0,
       trigerDigest: 'false'
     },
     computed: {
       output: function(){
           const Hell95NeedTriger = 10;
           const Hell100NeedTriger = 20;
           const Hell150NeedTriger = 20;
           const ExTriger = 4;
           const Hell95Contribution = 51500 * (Hell95NeedTriger / ExTriger) + 910000;
           const Hell100Contribution = 51500 * (Hell100NeedTriger / ExTriger) + 2680000;
           const Hell150Contribution = 51500 * (Hell150NeedTriger / ExTriger) + 3600000;
           let ans = 0;

           const ThisInput = String(this.input);
           const InputContribution = removeComma(ThisInput);

           function removeComma(value) {
             var num = value.replace(/,/g, "");

             return parseInt(num);
           }

           if(this.trigerDigest === 'Hell95'){
            // 計算式
            ans = Math.floor(InputContribution / Hell95Contribution * Hell95NeedTriger);
            return ans.toLocaleString()
           }else if(this.trigerDigest === 'Hell100'){
            // 計算式
             ans = Math.floor(InputContribution / Hell100Contribution * Hell100NeedTriger);
             return ans.toLocaleString()
           }else if(this.trigerDigest === 'Hell150'){
             ans = Math.floor(InputContribution / Hell150Contribution * Hell150NeedTriger);
             return ans.toLocaleString()
           }else if(this.trigerDigest === 'both'){
            // 計算式
             ans = Math.floor((InputContribution / 2 / Hell95Contribution * Hell95NeedTriger) +  (InputContribution / 2 / Hell100Contribution * Hell100NeedTriger));
             return ans.toLocaleString()
           }else{
             return 0;
            }
         }
     }
   })
}());

#振り返り
・カンマをinput/outputにいれるのに地味に困った
→ここは本題ではなかったので、今回はinputに外部のJQueryを利用、outputにはtoLocaleString()を利用した
・computedとmethodsのどちらを利用すればいいのか分からなくて困った
→入れたらすぐに発火するものが作りたかったのでcomputedを採用。またcomputedとmethodsの違いの勉強が出来てよかった
・必要な部分だけさらっと勉強して書き始めたので、まだまだVue.jsへの理解が足りないように感じた
→座学もちゃんと増やす。簡単な題材のアウトプット（FizzBuzz、ToDoリスト作成etc）をする。

・疑問点：Computed内でif文の分岐をしている例文が見当たらなかったが、他の書き方があったりするのだろうか