かな・漢字の読みを子供に教えるためのWebアプリを公開しました

友達の子供が今年は小学校に入学する歳で、コロナのために学校に行けないので、家で漢字の読みの教えていると聞きました。
最近、ReactやVueというWebアプリケーションを作るフレームワークの勉強を始めたので、その友達のお手伝いとしてWebアプリを開発しました。

友達からは「（子供が）すごい勢いで漢字を覚えている」「とても便利」と好評をいただいたので、公開することにしました。

Webアプリ紹介

親子でかな・漢字の読み学習 | バンブー

読みを分かっている方が付き添って教えてあげるためものです。

使い方

スマホの縦長画面で使うことを想定しています。

設定画面

• ひらがな/カタカナ、1〜6年生の漢字の中から教えたいリストを選んだり、自分でリストを入力します
  • 複数選ぶと連結されます
• リストから全文字を使うか、ランダムに5文字抜き出すか選択します
• 出題方式を選びます
• 「設定完了」ボタンを押すと問題画面に移ります

問題画面

• 子供に読み方を当ててもらいます
• 正解だったら「正解」ボタンを押します（花丸が表示されます）
• 間違っていたら「ミス」ボタンを押します（バツが表示されます）
• 問題の文字/花丸/バツの領域をタップすると次の問題に切り替わります

Tips

• 「ランダムで無限に繰り返す」を選んだ場合、以下のような計算に基づいて出現頻度が変化します
  • 最初は、全ての文字が重み4で、均一な出現頻度
  • 正解するたびに、重みは半減する（ただし、1が下限）
  • ミスするたびに、重みは倍増する
• 「ランダムで無限に繰り返す」を選んだ場合、以下の内容の棒グラフが表示される
  • 得意（緑）: 上の説明の重みが1である文字の数
  • 苦手（赤）: 上の説明の重みが4より大きい文字の数
• 「ランダムで無限に繰り返す」を選んだ場合、右上の「継続用データ」ボタンから得意、苦手、どちらでもないの文字一覧を表示できます
  • 苦手な文字をコピーしておいて、次やる時に設定画面で独自リストとして入力すると、苦手の克服になります
• 出題方式「シャッフルして周回する」を選んだ場合、右上の「継続用データ」ボタンから間違えた文字一覧を表示できます
  • 間違えた文字をコピーしておいて、次やる時に設定画面で独自リストとして入力すると、間違えた問題の復習になります
• 「N年生の漢字」「シャッフルして周回する」を選ぶと、「どれだけ習得できたか」のような確認が出来ます

公開までの道のり

登場人物

• 私: 右側の緑の吹き出しの人
• 友達 神田一郎（仮名）: 左側の吹き出しの人
• 友達の娘 カナ（仮名） 4歳
• 友達の息子 翔（仮名） 6歳

0日目 4/15 （木）

20:45

友達とFacebook messengerで、なんか作って欲しいものあるかという話をしていると、こんな答えが返ってきた。

小2で習う漢字が画面一杯に、タップ毎にランダムで出てくるのもいいなあ。あってるだの間違ってるだのは俺がやるから。小1の漢字はほぼクリアしたので大丈

この漢のところをタップするとランダムに漢字が出てくる
子供が言えたら親が正解ボタンを押す→正解音と花丸が大きく出てくる
間違えたら親がミスボタンを押す→大きなバツマークとミスの音が出てくる

最初に学ばせたい漢字を親が5文字登録する
→写真の画面にうつる
みたいなの。

正解した場合。

こんなの。

大体理解した。

いまは紙に手書きで書いてやってる。正解したらたまごボーロを１つもらえて間違えたら奪われるということをやってきたらこれは効果抜群で小1の漢字80文字中いま70字ぐらい頭に入ってる。多すぎると覚えきらないので5文字ぐらいでよい。これなら外食中でもできる

「いや、食事中にスマホいじっててはダメだろ」と思いつつ

なるほど

この日の会話はここで終わり、就寝した。在宅勤務でも早寝早起きの習慣は保つようにしたい。

1日目 4/17 金

翌々日、朝6時に起きて作り始め、会社の業務開始の前に、なんとか使える形にまでは開発できた。
やはり、朝の爽やかな時間、リフレッシュされた心と体は、自分にとって価値のある事に使うのが良い。

13:07

昼休憩時間にWebサイトにアップロードし、友達に報告

音以外は出来た。音は、いい感じのファイル見つけてくれれば入れられると思う

素晴らしい！早速やってみたが効果あり！

そうか。よかった

ようたかつくったんだ。すごいね。byカナ

友達の子供からはヨーダと呼ばれております。「ようた」と言われると電影少女を思い出す…あの漫画どうやって終わるんだっけ

こんな感じでうつる。もう少し文字が大きくてもいいかも

スマホの画面も色々あるから、画面いっぱいというのは多少難しい。夜にチャレンジしてみるよ

難しいというか、画面作りは初心者なのでやり方分かってませんでした

なるほど。それなら今のままでも大丈夫。
また、下のスペースが余っているので、そこに正解数と間違えた数が表されるといいかも。

みたいな

5題しかない状況で、それ表示してそんなに嬉しいのかな

○のかずのところは😊
✖️のかずのところは😢
とかでもいいかも。
たまごボーロのやり取りに対応している。
ランダムにでてきて30回ぐらいやるし、繰り返すから嬉しいと思う。

夜に作ってみるわ

どちらにしろ現状で素晴らしい出来だ。ウチの子にぴったりだ

一度に覚えさせる量は3文字ぐらいが適切かも。

それは先回りして出来るようになっているのだ、ふふふ

二文字以上なら何文字でもできるように作ってあるよ

漢字ごとに連続正解を取っておいて、三連続正解したやつは出現確率を下げるとかの方が作る側としては面白い

あ、それ凄くいい！連続正解したら出現する確率凄く下げてほしい。

あと、
トップ画面に
「小2で習う常用漢字からランダムに三文字選ぶ」
「小2で習う常用漢字からランダムに全文字選ぶ」
というボタンがあってもいいなあ。いちいち打ち込むのがそのうち面倒になりそう。
「小1で習う常用漢字全文字テスト」ボタンがあって、それを押すとランダムだが重ならないように80字全文字調べられて、正解数が出たらいま何文字まで覚えたか簡単かるなあ

こんなの求む。3文字の3は、2とか、4とか変更できると尚嬉しい

「そのUIはどうかな」と思いつつ

大体理解した

了解。小1常用漢字はネットで調べたら出てくるよ。小2も

はいはい

2020/04/17 19:07

文字の大きさは、お前の画面縦長に合わせるだけならある意味簡単なんだが、iPhone Xでいいのか？

俺のはアイフォン6かなんか

おっけー

文字の大きさ調整とボーロ数追加してみた。リロードして確認よろしく

これだと下の正解が出ない。

なるほど

もう少し上に。

いや、スクロールしてもダメ？

文字は見やすい
スクロールは面倒
文字もずれるし

「面倒？」と思いつつ…

直した

いい感じ！

こんな、感じ

まあ、これでよしとしよう。レイアウトは完璧を目指すとやはり手間がかかる

技術力が低いためかなり消耗してしまった。やはり基礎からちゃんと勉強するべきである。

強いて言えば、
もう一文字分だけ、正解、ミスの行を下にして欲しいぐらいだ。
まあこれでも充分

「Wordじゃねーんだから、一文字下げるとかできねーわ」と思いつつ

色々修正中

サンクス。このアプリのおかげで漢字学習がよりスムーズになりそうだ。俺はこれから風呂。

次の問題に進むためのタップ領域が「問題設定へ」ボタンに重なってしまっていることに気づいたが、早寝早起きは崩したくないので「まあ明日の朝直せばいいかな」と安直に考えて就寝

2日目 4/18 土

この日もしっかり早起きしてレイアウト問題に取り組んでいると…

9:23

問題設定へ
ボタンが押しづらくなった。

ヤバい。バレてしまった

問の字しか押せない

もうちょい大きくしてくれたらいいかも。正解と同じサイズぐらい希望
あーなるほど

大きさの問題じゃない

逆ギレする低脳とは私のことです

カナがいま凄い勢いで漢字覚えている。

画面作りは技術力が低いのでレイアウトが難しい。

問題設定へのボタンの押すスペースが小さすぎて。ランダムに文字がかわるになっちゃう

大変なんだね

スクロール許容なら楽なんだが

そもそも問題設定へのリンク必要？リロードすれば同じな気もするけど

うんまあそうだよね
問題設定へ戻ったときに前に設定しておいた漢字が残っていれば、追加できるので楽

ふーむ、そういう流れでやるのね

問題設定に戻ると、ボーロ数は0にリセットしてるけど、それはいいの？

ボーロ数って正解数のこと？
それはまあ良い

そうか

まず紙で全問チェックしたところ80字中66字正解。その後間違えた14問をアプリでやらせた結果

どう解釈すればいいの？

間違えた問題だけをやらせて最終的に正解がおおくなっている。素晴らしい。

レイアウト直した

カナはまず80問中67問正解。その後間違えた13問をいまやったところ。

たまごボーロは100個あげるわけ？
69か

ダメだこりゃ

字をもう少し右上で、正解、ミスの表をもう少し下かな。

むずいな。こっちのシミュレーターだとまともなんだ

この時はMacのChromeのDeveloper Toolsでやっていて、Safariで確認した方がより正確ということに気付いていない愚かな私

笑顔マークを100個とることのゲーム感があるのでたまごボーロなしでやれる。

それiPhone 5な気がする

自分の知識不足を棚に上げて…

まあ今のままでも見れることは見れる。
笑顔が100まで到達したり、
5連続、10連続正解したら
花丸の横に😄が溢れるといったご褒美感がほしい。

アイフォン6か6s

もう一回レイアウト直した

いまだかつてない出来栄え

うん。強いて言うなら字をほんの少し右

むり

心折れました。

ならこれok

たぶんレイアウトではなくフォントの特性による

自分の技術力の低さを棚に上げてフォントのせいにするダメなエンジニアです。

ふおう

11:45

漢字それぞれ重み4の均一な確率から始まって、正解すると重み半減（下限1）、ミスると重み倍増という確率分布で出現するようにしてみた
これで100回やったときの成長度合がかなり変わると期待

13:35

素晴らしい

19:27 (土)

今日は合計で7-8時間ぐらい勉強させたが、今日はカタカナがらまだまだだと気づいたところ。
そこで吉橋のアプリでこれからカタカナのワークは両面15枚ぐらいやった。カタカナをやろうかというところ。
そこで次は吉橋のアプリでカタカナをやろうというところ。

一文字のクイズなら何でもいけるわな

カタカナをメモで全部一旦残した。今後はこれをコピペすれば良いだけだ。
そう思うと小2の漢字も行けそうだ

ギリシャ文字でもいけるぞ、たぶん

確かに。

3日目 4/19 日

12:47 (日)

選択した文字からN文字抜き出すを押すと、選択したリストの全文字を使うが押されたままになってそのございましたどうなるかわからない
漢字リストの方はまだ漢字が出てこないな

おっとー、開発途中の画面をアップロードしてしまっていた…

あー、ごめん。漢字リストはまだ出来てないや
画面は作ったが選んでも何も起こらない

17:59 (日)

学年別漢字リストも選べるようにしたよ

あれ、バグってるわ

ヤバい

直した

独り相撲取りすぎ…。ちゃんとテストしてから本番反映しよう

3日目 4/19 月

8:44 (月)

シャッフルして周回する出題方式も作ったので、漢字の方は一通り完成した気がする

4日目 4/20 火

9:22 (火)

いい感じ！

ミスした漢字がどこかに表示されたら(たとえば100%の青線の下に並ぶようになったら)嬉しいかも。

それは明日作る予定

さんくす

カナ

2回とも同じ順番だったように思う。できればランダムで1巡してほしい。

直した。設定画面に戻って、出題方式を選び直すと再シャッフルされる

サンキュー

そもそもさっきまでシャッフル効いてなかったな

なんという確認漏れ…

そうなのか

子供達の感想を動画撮影して送ってくれ

「すごいべんきょうになってる。ヨーダのドリル、たのしかった」とのコメントがもらえた

楽しく勉強出来てるようで良かった。まあ、親子で時間過ごせるのがいいんだろうな

20:01 (火)

夜は翔は小2の漢字をやった。よい出来

結構出来るね

最初に丸つけせず何回も教えた後にやらさた。漢字は昔から得意。

6日目 4/22 木

14:39 (木)

漢字をシャッフル周回モードでやった時に、右上のボタンから正解・ミスした漢字リストが出るようにした

7日目 4/23 金

サンクス。

8日目 4/24 土

9:25 (土)

ひらがなとカタカナのリストも追加した

9日目 4/25 日

習熟度の分布グラフを入れた。グラフが全部緑になるまで頑張ってくれ

そしてこのブログを書き始めた。久しぶりにプライベートで達成感を味わった

まとめ

• だいたい1週間で人の役に立つものが作れた
• 画面を綺麗に作るのは難しい
• 日々の努力が大切である