🎯 はじめに
みなさんこんにちは！
小学校の算数で「ひっ算」を教えたことはありますか？大人にとっては当たり前の計算も、子どもたちにとっては大きな壁になることがあります。特に繰り上がりや繰り下がりは、多くの小学生がつまずくポイントです。
今回は、この「つまずき」を解消するために作成したひっ算シミュレーターを紹介します。タイルを使ったアニメーションで、繰り上がり・繰り下がりの仕組みを「見える化」するReactアプリです。
🎮 デモプレイ
💻 ソースコード
🤔 本アプリを作成した背景
小学生がつまずくポイント
ひっ算を学ぶ小学生が特につまずきやすいのは、以下のポイントです。
足し算の繰り上がり
- 「7 + 8 = 15」のとき、なぜ「5」を書いて「1」を上に書くのか分からない
- 10のかたまりを次の位に送る、という概念が抽象的すぎる
- 繰り上がった「1」をどこに書くか、いつ足すか混乱する
引き算の繰り下がり
- 「3 - 7」のように、上の数より下の数が大きいときにパニックになる
- 隣の位から「10を借りてくる」というイメージがつかめない
- 借りた後の計算で「元の数 - 借りた分 - 引く数」の3つを処理するのが難しい
共通の問題点
- 紙の上の数字だけでは、なぜそうなるのか実感が持てない
- 先生の説明を聞いても、頭の中でイメージできない
- 間違えても「どこで」「なぜ」間違えたか分からない
これらの問題を解決するため、タイルを使った視覚的なアニメーションで、繰り上がり・繰り下がりの仕組みを「体験」できるアプリを作りました。
🖥️ 本アプリの画面操作方法
基本画面の構成
アプリを起動すると、以下の3つのエリアが表示されます。
- 問題表示エリア - 現在の計算問題（例：「37 + 45 = ?」）
- ひっ算エリア - 従来の筆算形式で計算過程を表示
- タイル可視化エリア - タイルアニメーションで仕組みを表示
設定の変更
演算の選択
- 「たし算」または「ひき算」をドロップダウンから選択
難易度の選択
- レベル1: 繰り上がり・繰り下がりなし（基本練習向け）
- レベル2: 繰り上がり・繰り下がり1回（入門向け）
- レベル3: 繰り上がり・繰り下がり複数回（応用向け）
アニメーション速度
- スライダーで速度を調整（ゆっくり確認したい場合は遅く設定）
操作ボタン
| ボタン | 機能 |
|---|---|
| さいせい | 計算アニメーションを自動再生 |
| つぎのステップ | 1ステップずつ手動で進める |
| いちじていし | アニメーションを一時停止 |
| リセット | 最初の状態に戻す |
| あたらしいもんだい | 新しい問題を出題 |
学習の流れ
- 難易度と演算を選ぶ
- 「さいせい」ボタンを押す
- 各位の計算がステップごとにアニメーション表示される
- タイルが動く様子を見て、繰り上がり・繰り下がりを理解する
- 分からなければ「つぎのステップ」でゆっくり確認
💡 本アプリの実装の工夫点
ステップごとの計算をジェネレーターで管理
計算過程を「一歩ずつ」進められるよう、計算ロジックをステップ生成する形で実装しました。これにより、自動再生でも手動操作でも、同じ計算過程を正確に再現できます。各ステップで「今どの位を計算しているか」「繰り上がり・繰り下がりが発生したか」を状態として保持し、画面に反映します。
表示用の値と計算用の値を分離
引き算の繰り下がりでは、「見た目の数字」と「実際に計算に使う数字」を分けて管理しています。たとえば、10の位から1を借りた場合：
- 画面には元の数字（例：4）をそのまま表示
- その上に「-1」のパネルを表示して、借りたことを示す
- 内部では計算用の値（例：3）を別途追跡
こうすることで、「元はいくつで」「いくつ借りて」「今いくつになったか」が視覚的に分かります。
3つの数の計算を明示
繰り下がりで上の位から借りた後、次にその位を計算するときは「元の値 - 貸した分 - 引く数」という3つの数の計算になります。これを画面上でも「4 - 1 - 1 = 2」のように明示することで、「なぜその答えになるか」を追跡できるようにしました。
タイルの色分けで「何が起きているか」を可視化
足し算の繰り上がり
- 合計が10以上になったとき、最初の10個を「繰り上がる分」として赤色で表示
- 残りを「この位の答え」として青色で表示
- 「10個の塊を上の位に送る」イメージが視覚的に分かる
引き算の繰り下がり
- 上の位から借りてきた10個を黄色で表示
- 元からある数をオレンジで表示
- 計算結果を青色で表示
- 「足りないから借りてくる」プロセスが見える
位ごとの色分け
1の位、10の位、100の位にそれぞれ固有の色を設定しました。現在計算中の位がハイライト表示されるため、「今どこを見ればいいか」が一目で分かります。
アニメーションのタイミング制御
タイルの出現をずらして表示することで、「1つ、2つ、3つ...」と数えている感覚を演出しました。急に全部表示されるより、順番に現れる方が子どもにとって理解しやすくなります。
📈 本アプリで可視化することで得られる学習効果
抽象概念の具体化
「繰り上がり」という言葉だけでは分かりにくい概念も、タイルが10個集まって上の位に移動するアニメーションを見れば、体感として理解できます。「10のかたまり」という概念が、目で見て確認できるのです。
間違いの原因を自分で発見できる
ステップごとにアニメーションが進むため、「あ、ここで繰り上がりを忘れていた」「借りてきた10を足し忘れていた」など、自分の間違いパターンを発見しやすくなります。先生に指摘されるより、自分で気づく方が記憶に残ります。
自分のペースで学習できる
速度調整やステップ実行機能により、理解が早い子は速く進め、ゆっくり確認したい子は一歩ずつ進められます。個別最適化された学習が可能です。
繰り返し練習のハードルが下がる
紙と鉛筆での練習は「面倒」と感じる子も、アニメーション付きのアプリならゲーム感覚で取り組めます。「あたらしいもんだい」ボタンを押すだけで次々と問題が出るため、反復練習が苦になりません。
計算の「意味」が分かる
機械的に「繰り上がったら1を書く」と暗記するのではなく、「なぜ1を書くのか」「その1は何を表しているのか」を理解できます。意味を理解した計算は、応用が効きます。
🛠️ 使用技術
- React 18 + TypeScript
- Vite (ビルドツール)
- CSS Modules (スコープ付きスタイリング)
- CSS Custom Properties (テーマカラー管理)
🎁 おわりに
このシミュレーターは、「なぜ繰り上がるの？」「なぜ借りてくるの？」という小学生の素朴な疑問に、視覚的に答えるために作りました。
算数は積み重ねの教科です。ひっ算でつまずくと、その後の掛け算・割り算にも影響します。このアプリが、一人でも多くの子どもの「分かった！」につながれば嬉しいです。
ぜひお子さんやお孫さん、教え子の学習にお役立てください！