🎯 はじめに

みなさんこんにちは！

小学校の算数で「ひっ算」を教えたことはありますか？大人にとっては当たり前の計算も、子どもたちにとっては大きな壁になることがあります。特に繰り上がりや繰り下がりは、多くの小学生がつまずくポイントです。

今回は、この「つまずき」を解消するために作成したひっ算シミュレーターを紹介します。タイルを使ったアニメーションで、繰り上がり・繰り下がりの仕組みを「見える化」する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 (テーマカラー管理)

🎁 おわりに

このシミュレーターは、「なぜ繰り上がるの？」「なぜ借りてくるの？」という小学生の素朴な疑問に、視覚的に答えるために作りました。

算数は積み重ねの教科です。ひっ算でつまずくと、その後の掛け算・割り算にも影響します。このアプリが、一人でも多くの子どもの「分かった！」につながれば嬉しいです。

ぜひお子さんやお孫さん、教え子の学習にお役立てください！