スケール練習アプリ作った話

gif

ギターを買った時にスケール練習をしたくて、タップと同時に12音階の表示が切り替わるやつを作ってたので紹介します。

コード

<template>
  <div id="NOTE" @click="countUp">
    <div class="notes">
      A
    </div>
  </div>
</template>

<script>
export default {
  name: 'FirstView',
  data () {
    return {
      notes: ['A', 'B♭', 'B', 'C', 'D♭','D', 'E♭', 'E', 'F', 'G♭', 'G', 'A♭' ]
    }
  },
  methods: {
    countUp() {
      const number = Math.floor(Math.random() * this.notes.length);
      const selectedImg = this.notes[number];
      const note =  document.querySelector(".notes")
      note.innerHTML = selectedImg;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .notes{
    font-size: 140px;
    cursor: pointer;
    height: 200px;
    line-height: 200px;   
    margin-top: 200px; 
  }
</style>

template要素内で@click="countUp"を指定することでクリックイベントを取得してますね
それをmethodsにて定義していきます。
const numberはrandom()を利用して配列の番号をランダムに生成しています。
それをnotes配列の中に入れて、innnerHTMLで吐き出してあげるといった具合です。

まとめ

今日は23時ごろまで残業してたので過去の遺産を引っ張りでしてみました笑
実装自体30分程で終えたものですが、技術を紙やハサミと同じようにパソコン1つで実装できるというのは
かなり自分にとって大きいものでした。
これからも技術の取得を目的とすることよりも、あくまで手段として技術と向き合って行ければなぁと思う今日この頃です。

ブログの投稿ログ

# コード

# まとめ

コード

まとめ