2021年10月19日

小学一年生向けの「けいさんカード」アプリを作った話

子どもが小学校に入学して、毎日、ちょっとした宿題が出るわけですが、その中でちょっと手間がかかったのが 計算カードの宿題 でした。

こんな感じの計算カードの中から親が問題を選んで、子どもに答えていってもらう・・・という宿題です。

どこが面倒なのか

カードをあらかじめシャッフルしておくと、毎回同じ問題の並び順になってしまいます。

毎回シャッフルするのは面倒なので、適当にめくりながら出題してると、簡単な問題ばかり出たり、すでに出した問題が出てきたり・・・。

カードを使わずに自分で出題していくと、同じ問題を何度も出してしまったり、答えてもらったあとに自分が出した問題を覚えてなかったり・・・。

面倒を解消すべく、よさそうなアプリを探してみました。

小学生の勉強をトータルでサポートするような本格的なものだったり、1年生の範囲を超えた問題も出てくるアプリだったり・・・はあったのですが、手ごろなものは見つかりませんでした。

そんなわけで、ないならば自分で作ってしまうことにしました。

Web で作ったので iPhone, iPad, Android, PC のどれでも動きます。

アプリのように使いたければ、ホーム画面に追加 (Android ならショートカットを作成) しておくのがオススメです。

たとえば、「たしざん 1」 (10 までの足し算) を選ぶと、こんな感じの画面が出てきます。

正解を選ぶとと、ほめられます。

すぐに反応があるのが面白くて、子どもは勝手にどんどん解いていってくれます。

同じ問題は出てこないし、開くたびに問題が出る順番は変わります。

[←] で戻って、下の [勉強結果を見る] を選ぶと、その日の子どもの勉強の成果を確認できます。

毎日やってるうちに、解くまでの時間が短くなったり、間違えが減ったりして、子どもの成長を実感できます。

日ごとのグラフを表示できたらカッコイイでしょうけど、さすがにそこまでは作っていません。

子どもに渡すと、し操作に戸惑う様子もなく 1 人でどんどん解いていきました。スマホネイティブ世代・・・おそるべし。スマホ育児は避けてきたので、合法的に親のスマホで遊べるのもうれしかったようです。

何日か繰り返すうちに飽きてはきましたが、それでもサクッと宿題が終わるのが最高です。親の手間も大幅に減っています。やるほうもやらせるほうも気軽になりました。

さらに、アプリに興味を持った下の子が、両手を使って指折り数えながら「たしざん」の問題に回答していく様子はとてもかわいらしかったです。6 以上の足し算がでてくると、周りに助けを求めていたのですが・・・。

素材については、Font Awesome と絵文字を活用しました。この辺の素材を使えば、気軽にリッチっぽい見た目になるのが便利な時代であります。絵文字を使うと、機種や端末によって印象が変わってしまうのは悲しいところですが。

ライブラリーは jQuery を使っていたのですが、HTML の生成処理が面倒になってきたので、Vue.js 3 で作りなおしてみました。初めての Vue.js で戸惑ったものの、公式のチュートリアルがよくできていたので助かりました。

子育ての面倒なところを、自分が持っている技術を使って解決した話でした。

もう一度 URL を載せておきます。https://nitoyon.github.io/1-10calc/ です。どうぞご利用ください。