追記(2018/7/6)
続編
【Vue.js】スプラトゥーン2 おすすめブキ診断をパワーアップさせた【Part2】 - Qiita
を書きました。
きっかけ
最近Qiitaやはてブを開くと毎日のように「Vue.js」の話題が上がっているので、キャッチアップしなければ…ということで勉強を兼ねて作ってみました。
完成サイト
ソースコード
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を使うメリットはそこまで大きくないかもしれません。
ただシンプルで記述も分かりやすいですし、人気のある理由が分かりました。
もっと良い書き方などありましたら、ご教授いただけるとありがたいです。
（ちなみに私の診断結果は「スプラローラー」でした…。ほとんど使ってないけど…。）