Vuejsでフラッシュカードを作りましょう（音声でもコントロール可能）

やりたいこと

今回、Vuejsを勉強のため、簡単なフラッシュカードのウェッブアプリを作成します。
フラッシュカードは質問と答えの面が2つあって、その二つ面を交換すために、「フリップ」があります。

実装

データを準備する

まず、HTMLとVuejsの要素を作って、連携しましょう。

<div id="flashCardApp">

const flashCardApp = new Vue({
    el: '#flashCardApp',
    data: {},
    methods: {}

dataのほうはcardsとshowedCardがあります。cardsは全部アプリのカードです。showedCardは表示されるカードになります。で、アプリ起動する時、表示されるカードは最初のカードになります。

cards = [{カード1の情報}, {カード1の情報}, {カード3の情報},...];
data: {
    cards: cards,
    showedCard: cards[0]
}

カード情報は：

id: カードのID(例: 0, 1, 2)
frontText: 質問の言葉(例: BANK, CHURCH)
backText: 言葉の意味(例:銀行, 教会)
colorClass: カードの色(責任)
flipped: どんな面が表示されるか(例: true, false)

です。

前と次のカードのボータン

表示されるカードは一つだけなので、全部のカードを見えるように、カード間に移動するボータンは必要になります。また、最後の次のカードは最初のカードです。逆に最初のカードの前は最後のカードになります。

JS側

methods: {
    previosCard: function() {
        let showedId = this.showedCard.id - 1;
        if(showedId < 0){
            showedId = cards.length - 1;
        }
        this.showedCard = cards[showedId];
    },

    nextCard: function() {
        let showedId = this.showedCard.id + 1;
        if(showedId >= cards.length){
            showedId = 0;
        }
        this.showedCard = cards[showedId]
    }
}

HTML側

<button v-on:click="previosCard" class="button-right">前</button></div>
<button v-on:click="nextCard" class="button-left">次</button>

カードのフリップのボータン

ユーザはカードのフロント面とバック面を交換するボータンを押すと、現在表示されるカードのflippedの状態を変更して、Vuejsはその状態の変更に対して自動的にカードのフロントとバック面を交換してもらいます。
js側

methods: {
    flipCard: function() {
        this.showedCard.flipped = !this.showedCard.flipped;
    }
}

html側

<transition name="flip">
    <div v-show="!showedCard.flipped" @click="flipCard" class="card-text card-front-text">
        <div class="pretext">
            単語
        </div>
        <h2>
            {{showedCard.frontText}}
        </h2>

        <button class="button-white button-clear button-large">
            フリップ
            <i class="fas fa-sync-alt"></i>
        </button>
    </div>
</transition>

<transition name="flip">
    <div v-show="showedCard.flipped" @click="flipCard" class="card-text card-back-text">
        <div class="pretext">
            意味
        </div>
        <h2>
            {{showedCard.backText}}
        </h2>

        <button class="button-white button-clear button-large">
            フリップ
            <i class="fas fa-sync-alt"></i>
        </button>
    </div>
</transition>

音声でフラッシュカードをコントロールしましょう。

annyangは、ユーザが音声コマンドでサイトを制御できるようにする小さなjavascriptライブラリです。
annyangの使い方は本当に簡単です。

if (annyang) {
  // コマンドを定義する
  const commands = {
    '次': () => { flashCardApp.nextCard(); },
    'フリップ': () => { flashCardApp.flipCard(); },
    '前': () => { flashCardApp.previosCard(); },
  };

　//入力の言語を日本語に変更する
  annyang.setLanguage("ja");
  // ↑の定義したコマンドを追加しする
  annyang.addCommands(commands);

  // マイクロからの声が聞こえ始めます
  annyang.start();
}

それで、「次」と「前」と「フリップ」のコマンドを言ってもらうと、フラッシュカードをコントロールできます。ただ、音声認識はクラウドで処理するので、少しだけディレイ感じがあります。

以上です。

結果と参考

デモ: https://codepen.io/tardigrades2/full/oNLZovL
コード: https://codepen.io/tardigrades2/pen/oNLZovL)
参考したコード: https://codepen.io/mgnmrt/pen/pKZVYg