study-vue-cli　

【学習｜vue.js（Vue 3）】Vue CLIを使って幼児向け足し算アプリを作る

サンプルページ
https://nekonotewo.biz/study/vue/addition-app/

目的

Vue.jsの学習アウトプット用。

• Vue CLIを利用してみる。フレームワークの基本を学ぶ。
• Vue3を利用してみる。Vue2との違いを知る。

開発環境

npm 8.5.0
node v16.14.2
@vue/cli 5.0.8
vue 3.2.13
vue-router 4.0.3
vuex 4.0.2

参考にしたもの

• 【公式ガイド】https://cli.vuejs.org/

• たにぐち まこと著 「これからはじめる人のJavaScript/Vue.jsの教科書」マイナビ出版、2020
  ※プロジェクト作成〜メモアプリ作成部分 / Chapter 5「Vue CLI でアプリを作ろう」
  ※Vue2利用なので、Vue3への書き換えは自力で別途調べる

• 「これでわかるはじめてのVue CLI」https://reffect.co.jp/vue/finally-understand-vue-cli
  ※プロジェクト作成まで

アプリの内容

2つの数字の足し算を連続で5回解くと、答え合わせ一覧が出てくるアプリ

• かんたんモード：0〜9までの数字の足し算
• まあまあモード：0〜15までの数字の足し算
• むずかしいモード：0〜30までの数字の足し算

作ろうと思った背景

参考書籍ではメモアプリを作っていたので、それを参考に、幼児向け足し算アプリを作ってみようと思った。（計算が楽しい時期らしい子供に、何度も手書きの計算プリントを作らされる＆答え合わせをせがまれるのが 面倒だ 紙がもったいないと感じたので。）

画面遷移

• ホーム画面で、好きな難易度のボタンを押すと、ランダムで1問、問題が出てくる。
• 解答すると、次の問題が表示される。（問題と解答を保存する）
• 5問解答すると、「答え合わせする」ボタンが出てきて、解いた問題と答え合わせ結果の一覧、点数が表示される。

画面構成

• トップページ
• 計算ページ（5問続けて）
• 答え合わせページ

意識すること

• コミュニケーションが減るのは淋しいので、「見てみて！こんな結果だったよ」とつい見せたくなるようなものにしたい。
• 子供でも迷わず使えるUIにする。

後々追加できたらいいなと思うアイデア

• ホーム画面で、全部で何問にするか入力してから開始
• 満点だったら画面に大きく花丸
• 数字や記号の上にルビをふる
• 楽しい効果音を入れる
• 解答にかかった時間の表示/制限時間の設定
• 数字の入力インターフェイスを、キーパッドではなく、1〜0の横並びボタンで押しやすくする
• 引き算や掛け算の問題追加
• 解答一覧で、上から順番に丸付けアニメーション
• 答えと±2で間違えたときは、「惜しい！」のエフェクト
• 全問正解なら「てんさい！」半分以上正解なら「よくできたね！」ほぼ不正解なら「つぎはできるよ！」などのコメント表示