nuxt.js で4月から小学生の息子用に足し算練習webアプリを半日で作成できるか企画

## はじめに

4月から小学校に入る息子がいるんですが。
100マス計算を紙に書いてやってたんでDXしたるわと思いまして。
nuxt.js なら半日で作れるんじゃないかと思い立って作りました。

思わぬところで色々ハマりまして未完成ですが、一応練習できるとこまでは作れた感じです。
(3/17 完成:履歴・グラフ・ハイスコアネット保存対応)
子供向けとか舐めて作らずに大人でも脳トレ的に使える程度に調整しました。

![足し算練習帳web.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136165/dc1343e0-5f53-1f98-4629-46894e626885.png)

[足し算練習webアプリ~~(未完成)~~](https://kaku3.github.io/e1-math-plus-10/frontend/dist/)

[ソースの大半はこちら](https://github.com/kaku3/e1-math-plus-10/blob/master/frontend/components/Game.vue)


## ポイント

### カラー

Vuetify で、マテリアルカラーパレットが定義されていて、適当に作ってもそれっぽくなりました。
[Colors](https://vuetifyjs.com/ja/styles/colors/)

### フォント

google webfont は config ファイルで簡単に追加可能。
ここを頑張るだけでデフォルト感がだいぶなくなる。今回の企画で絶対外せないところ。
日本語フォントが無くて辛いです。

※[Google Fonts + 日本語](https://googlefonts.github.io/japanese/)に良さそうなフォントがあったのですが、早期アクセスのはさらっと追加できなかったので見送りました。

``` nuxt.config.js
  ...(略)...
  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    // https://go.nuxtjs.dev/pwa
    '@nuxtjs/pwa',
    // https://go.nuxtjs.dev/content
    '@nuxt/content',
    'nuxt-webfontloader'  // ★追加 yarn add nuxt-webfontloader -D も
  ],
  // ★追加
  webfontloader: {
    google: {
      families: [ 'Fredoka+One' ]
    }
  },
```

``` Game.vue
<style>
  ...(略)...
  font-family: 'Fredoka One';
</style>
```

### スコア処理エフェクト

Vuetify の transition で、v-if / v-show を囲うと、表示/非表示切り替え時にアニメーションを行うようになる。
モチベーションの観点からエフェクトは超重要だけど、コストかけずに作れるところまで。

``` Game.vue
<v-scroll-x-transition> // ★これで囲う。transitionの種類は色々ある
  <v-col
    v-if="showAddScoreEffect"
    cols="auto"
    class="effect orange--text"
  >
    +{{addedScore}}
  </v-col>
</v-scroll-x-transition> // ★これで囲う
```

### 効果音

ユーザーテスト（）を実施したところ、音を鳴らせと言われたので追加しました。
ナチュラルに要望が贅沢なのはデジタルネイティブって感じですね。
スマブラみたいなの作れとか言われないだけマシですが。

以下参考に実装しました。
[Nuxtプロジェクトでmp3を再生する](https://remoter.hatenablog.com/entry/2020/04/14/Nuxt%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%A7mp3%E3%82%92%E5%86%8D%E7%94%9F%E3%81%99%E3%82%8B)

### filter / computed

なんとなくうまく使うと慣れてる様に見えていい気がする。（え

``` Game.vue
// 0 = 未解答の時は空欄にしたいので、解答済みフィルタ作成
<v-col class="amber--text answer" align-self="center">
  {{answer | answered}}
</v-col>

<script>
function answered(v: number) {
  return v !== 0 ? v : ''
}
...(略)...

  filters: {
    answered
  }

</script>
```

### github pages での公開

#### jekyll

404エラーが出て意味がわからなかった。
アンダースコアで始まるフォルダなど無視されるとのことでした。
公開対象リポジトリのルートに、`.nojekyll`ファイルを配置すると回避できる。

[GitHub PagesとJekyllについて
](https://docs.github.com/ja/github/working-with-github-pages/about-github-pages-and-jekyll)

#### root

公開先URLは以下になる。
{アカウント名}.github.io/リポジトリ名/{path-to-dist}/
{path-to-dist} フォルダがルートとして動作するように `nuxt.config.js` を設定する。

``` nuxt.config.js
  ...(略)...
  router: {
    // https://kaku3.github.io/e1-math-plus-10/frontend/dist/
    base: '/e1-math-plus-10/frontend/dist/'
  },
```




## おわりに

休日にサクッとファミリー向けアプリ作ってパパかっこいいと言われたいなと思いましたが、そんなことするより子供と遊べよという気がしないでもないです。

(残処理)
- ~~ゲームオーバー処理~~ (2021/03/14 更新)
- ~~firebase に履歴保存~~ (2021/03/17 更新)
- ~~グラフ表示~~ (2021/03/15 更新)

nuxt.js 興味わきましたらこちらもどうぞ。

- [【2020年版】Vue + Vuetify + typescript でWeb開発するならNuxt.jsを使おう](https://qiita.com/kaku3/items/c4a9f72e73247c776c93)
- [【超簡単フロントエンド開発】Storybook6.1 + Nuxtjs (+Vuetify)](https://qiita.com/kaku3/items/05a0de729da7faba9ce4)