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

# やりたいこと
今回、Vuejsを勉強のため、簡単な[フラッシュカードのウェッブアプリ](https://codepen.io/tardigrades2/full/oNLZovL)を作成します。
フラッシュカードは質問と答えの面が2つあって、その二つ面を交換すために、「フリップ」があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521590/48628df9-ab66-e17b-05ee-f8648d9edb55.png)


# 実装

## データを準備する

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

```html
<div id="flashCardApp">
```

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

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

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

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

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

JS側

```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側

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

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

```js
methods: {
    flipCard: function() {
        this.showedCard.flipped = !this.showedCard.flipped;
    }
}
```
html側

```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](https://github.com/TalAter/annyang)は、ユーザが音声コマンドでサイトを制御できるようにする小さなjavascriptライブラリです。
annyangの使い方は本当に簡単です。

```js
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