Vueを扱えるようになりたいけどJavaScript書いたことがなかったので、JavaScriptとVueを同時に勉強する。 #JavaScript

自己紹介

エンジニア歴二ヶ月の新人で、Vueを使ったプロジェクトに入れてもらったのだが足を引っ張りまくっているのでフロント側を勉強したい。
筆者のスキルとしてはPythonは少し書けるが、フロントはHTML/CSSをドットインストールでやった程度。
JavaScript書いたことないとタイトルに記載しているが、実際は業務でちょっと触っている。ドットインストールでもちょっとやった。でもほとんどコード読めてないので許して。

はじめに

Vueを学ぶならまずJavaScriptを勉強する必要があるとみなが言っています。
確かにその通りだと思いますが、そこで疑問が湧きました。
「JavaScriptの勉強って、どこまでやればいいの？」
プログラミング言語の勉強は青天井だと思っていて、ここまでやればいいというのは存在しないと考えています。基本文法を覚えただけでは勉強したとは言えないでしょう。

私はJavaScriptマスターになりたいのではなく、Vueを扱えるようになりたかったのです。JavaScriptだけ勉強してもVueは扱えるようにはならないので同時に勉強することにしました。

新しく言語を学ぶ時はまずじゃんけん制作が一番だと考えているので、Vueで処理の部分をメインに作成し、Vueの理解がある程度深まったところをゴールとします。
当然、JavaScriptが書けないのでVueではもちろん書けません。まずJavaScriptで普通に書き、それをVueに変換させていく事で双方の理解を深めたいと思います。

準備

Vueの環境構築は割愛します。過去に記事を作成しているので誰かの参考になれば嬉しいです。
初心者向け！Vue.jsの開発環境の構築

処理を書いてく前にファイルやルーティングの準備をしましょう。
src/components/game.vueを作成します。

game.vue

<template>
  <div>
    <p>じゃんけん！</p>
  </div>
</template>
<script>
</script>

src/router/index.jsをいじってルーティング設定します。

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Game from '@/components/game'  // add

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    // add↓
    {
      path: '/game',
      name: 'Game',
      component: Game
    }
  ]
})

これでlocalhost:8080/gameが表示できるようになりました。

JavaScriptでまずは書く。

Vueファイルの中のscript部分に記述していきますが、一旦Vueの事は忘れます。console.log()で出力を確認しながら進めていく事にしました。

私はセミコロン省略派ですが、どの部分でセミコロンを省略しているかはしっかりと理解した上で省略を使いましょう。

まずは対戦相手(cpu)から作っていきましょう。
ぐー、ちょき、ぱーの三つを数字で表す。
そして0〜2の数字をランダムに表示させたいので、Math.floor(Math.random() * 3)を使います。

game.vue

<script>
// 0 = ぐー, 1 = ちょき, 2 = ぱー
const aite = Math.floor(Math.random() * 3)
console.log(aite)
</script>

これでconsoleを確認してみましょう。

ランダムに0~2の数字が出力されているのが確認できました。
数字が出るだけでは寂しいので、次はif文を使って表示を分けてみます。

game.vue

<script>
// 0 = ぐー, 1 = ちょき, 2 = ぱー
const aite = Math.floor(Math.random() * 3)
if (aite === 0) {
  console.log('ぐー')
} else if (aite === 1) {
  console.log('ちょき')
} else {
  console.log('ぱー')
}
</script>

ifではなくswicthで書くとこうなります。

game.vue

<script>
// 0 = ぐー, 1 = ちょき, 2 = ぱー
const aite = Math.floor(Math.random() * 3)
switch (aite) {
  case 0:
    console.log('ぐー')
    break
  case 1:
    console.log('ちょき')
    break
  case 2:
    console.log('ぱー')
    break
}
</script>

今回は0,1,2の三択なのでswitch文の方がスッキリして見える為こちらを使用していきます。
結果はこんな感じです。

これで相手部分の実装ができました。
次は自分が出す手の部分を書いていきます。
やりたいのは、ぐーちょきぱーそれぞれのボタンを配置して、それのクリックでconsole.logにぐーちょきぱーを出力させたいです。
htmlにボタンを配置します。

game.vue

<template>
  <div>
    <p>じゃんけん！</p>
    <button id="btn1">グー</button>    // add
    <button id="btn2">チョキ</button>  // add
    <button id="btn3">パー</button>    // add
  </div>
</template>

次にボタンをクリックした時の処理をscript内の、さっきのswitch文の下に書きます。

game.vue

window.onload = function () {
  const guu = document.getElementById('btn1')
  const tyoki = document.getElementById('btn2')
  const paa = document.getElementById('btn3')
  guu.onclick = function () {
    console.log('グー')
  }
  tyoki.onclick = function () {
    console.log('チョキ')
  }
  paa.onclick = function () {
    console.log('パー')
  }
}

画面にボタン表示が加わり、ボタンをクリックするとコンソールにクリックしたグーチョキパーが表示されます。
これで自分側の手も実装できました。

最後に勝敗の部分について実装していきましょう。
じゃんけんにはアルゴリズムが存在するので、それを使います。
じゃんけんアルゴリズムをちょっと応用
(自分の手 - 相手の手 + 3) % 3 これですね。
最終的にこれをまたswitch文で判定するだけでやることほぼ一緒なので割愛します(丸投げ)

switch (((自分の手 - 相手の手 + 3) % 3)) {
case 0:
  引き分け
  break
case 1:
  負け
  break
case 2:
  勝ち
  break
}

Vueに変換していく

JavaScriptに関してはこの辺りで一旦やめて、ここまで書いた記述をVueに変換+αしていきます。
まずはscript内をVue用に変えます。

game.vue

<script>
export default {
  name: 'Game',
  data () {
    return {
    }
  },
  methods: {
  }
}
</script>

こんな感じです。主にdata内と、methods内に書き込んでいく形になります。
まずはボタン部分から変えていきましょう
ついでにconsole.logに表示させていたものを画面ページ上に表示させるようにも変えていきます。

game.vue

<template>
  <div>
    <p>じゃんけん！</p>
    <button id="btn1">グー</button>
    <button id="btn2">チョキ</button>
    <button id="btn3">パー</button>
  </div>
</template>
<script>
window.onload = function () {
  const guu = document.getElementById('btn1')
  const tyoki = document.getElementById('btn2')
  const paa = document.getElementById('btn3')
  guu.onclick = function () {
    console.log('グー')
  }
  tyoki.onclick = function () {
    console.log('チョキ')
  }
  paa.onclick = function () {
    console.log('パー')
  }
}
</script>

この部分を

game.vue

<template>
  <div>
    <p>じゃんけん！</p>
    <button @click='guu'>グー</button>
    <button @click='tyoki'>チョキ</button>
    <button @click='paa'>パー</button>
    <p>わたしは{{ watashi }}</p>
  </div>
</template>
<script>
export default {
  name: 'Game',
  data () {
    return {
      watashi: ''
    }
  },
  methods: {
    guu () {
      this.watashi = 'グー'
    },
    tyoki () {
      this.watashi = 'チョキ'
    },
    paa () {
      this.watashi = 'パー'
    }
  }
}
</script>

こうですね。表示はこんな感じ。

ボタンをクリックするとclickイベントが走りメソッド内の処理が行われます。data内のwatashiに結果が入って{{ watashi }}で表示させている
って流れになります。
非常にスッキリしていて好きです。
次は相手の手の部分を変えていきます。

const aite = Math.floor(Math.random() * 3)
switch (aite) {
  case 0:
    console.log('ぐー')
    break
  case 1:
    console.log('ちょき')
    break
  case 2:
    console.log('ぱー')
    break
}

ここを

game.vue

<template>
  <div>
    <p>じゃんけん！</p>
    <button @click='guu'>グー</button>
    <button @click='tyoki'>チョキ</button>
    <button @click='paa'>パー</button>
    <p>わたしは{{ watashi }}</p>
    <p>あいては{{ aite }}</p>  // add
  </div>
</template>
<script>
export default {
  name: 'Game',
  data () {
    return {
      watashi: '',
      aite: ''  // add
    }
  },
  methods: {
    guu () {
      this.watashi = 'グー'
      this.aite_no_te()
    },
    tyoki () {
      this.watashi = 'チョキ'
      this.aite_no_te()
    },
    paa () {
      this.watashi = 'パー'
      this.aite_no_te()
    },
    // add↓
    aite_no_te () {
      switch (Math.floor(Math.random() * 3)) {
        case 0:
          this.aite = 'グー'
          break
        case 1:
          this.aite = 'チョキ'
          break
        case 2:
          this.aite = 'パー'
          break
      }
    }
  }
}
</script>

こうします。表示はこんな感じ。

ボタンがクリックされた時に相手の手を決めるaite_no_te関数が走って、{{ aite }}で表示させています。
出力はこうなってます。
段々Vueの雰囲気が掴めてきました。
最後に、先ほど割愛した勝敗の処理を今回はしっかり書いていきましょう。

game.vue

<template>
  <div>
    <p>じゃんけん！</p>
    <button @click='guu'>グー</button>
    <button @click='tyoki'>チョキ</button>
    <button @click='paa'>パー</button>
    <p>わたしは{{ watashi }}</p>
    <p>あいては{{ aite }}</p>
    <p>この勝負…{{ result }}</p>  // add
  </div>
</template>
<script>
export default {
  name: 'Game',
  data () {
    return {
      watashi: '',
      watashi_hand: '',  // add
      aite: '',
      aite_hand: '',  // add
      result: ''  // add
    }
  },
  methods: {
    guu () {
      this.watashi = 'グー'
      this.watashi_hand = 0  // add
      this.aite_no_te()
      this.syouhai() // add
    },
    tyoki () {
      this.watashi = 'チョキ'
      this.watashi_hand = 1  // add
      this.aite_no_te()
      this.syouhai()  // add
    },
    paa () {
      this.watashi = 'パー'
      this.watashi_hand = 2  // add
      this.aite_no_te()
      this.syouhai()  // add
    },
    aite_no_te () {
      switch (Math.floor(Math.random() * 3)) {
        case 0:
          this.aite = 'グー'
          this.aite_hand = 0
          break
        case 1:
          this.aite = 'チョキ'
          this.aite_hand = 1
          break
        case 2:
          this.aite = 'パー'
          this.aite_hand = 2
          break
      }
    },
    // add↓
    syouhai () {
      switch (((this.watashi_hand - this.aite_hand + 3) % 3)) {
        case 0:
          this.result = '引き分けっ'
          break
        case 1:
          this.result = 'あなたの負け…'
          break
        case 2:
          this.result = 'あなたの勝ち！'
          break
      }
    }
  }
}
</script>

こうですね。表示はこんな感じ。

やってる事はこれまでと同じです。これでじゃんけんが楽しめるところまでできました。

さいごに

あとは見た目部分を実装するだけなので、今回はこの辺りで終わりとします。
JavaScriptやVueに関しても最初に比べたら理解が深まりました。やはり最初は手を動かさないとダメですね。
同じコードを何回も書いてて、綺麗なコード書けてる自信がないのでもっと良い書き方教えてください！
ここまで読んでくださってありがとうございました。

2019/11/05追記続編となる記事を書きました！Vue.jsでじゃんけんアプリ作りました