vue-cliを使って百人一首読み上げアプリを作る

いつの間にかブラウザが日本語を喋れるようになっているのでvueを使ってWebアプリで読み上げアプリ「からくれない」を作るのを
冬休みの宿題にした
Web Speech APIで実際にしゃべる環境を調べてみた - Qiita

新しいこと、なかなか踏み出せなかった、vue-cliを使ってみってみよう！

vue init webpack karakurenai

HelloWorld.vueを改造してアプリに仕立てる。

シャッフルはエコシステム（ライブラリを使いたい）

www.npmjs.com

package.json

パッケージjsonに追記。

  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "array-shuffle": "^1.0.1"
  },

HelloWorld.vueにimportを記述。

はじめにシャッフルしたいので、createdの中でシャッフルを呼び出すようにしました。

import arrayShuffle from 'array-shuffle'

export default {
  name: 'HelloWorld',
  created () {
    this.shuffle()
  },
// 中略

    shuffle () {
      this.items = arrayShuffle(this.items)
    }

とりあえず、ソースも公開

github.com

出来栄えは？

読み上げは微妙ですが！まぁいいでしょう。

結論

vue-cliでの開発は楽しい