小学生の算数学習を楽しくする「公約数・公倍数シミュレーター」を作った

📖 はじめに

小学5年生で習う「公約数」と「公倍数」。この単元は、算数の中でも特につまずきやすいポイントとして知られています。僕自身、教育に関わる中で「なぜこの概念がこんなに難しいのか」を考え、視覚的に理解できるシミュレーターを作ってみました。

本記事では、このアプリを作成した背景、操作方法、実装の工夫点、そして可視化による学習効果について紹介します。

🎮 デモプレイ

💻 ソースコード

🤔 なぜ小学生は公約数・公倍数でつまずくのか

抽象的な概念が急に登場する

「12と18の公約数は何ですか？」という問題。大人にとっては簡単ですが、子どもにとっては以下の点が難しいです。

• 「約数」と「倍数」の違いが分かりにくい：どちらも「割る」「掛ける」に関係するため、混同しやすい
• 「公」の意味が直感的でない：「公約数」の「公」が何を指すのか、言葉だけでは伝わりにくい
• 視覚的なイメージがない：足し算や掛け算と違い、目に見える形で表現しにくい

よくあるつまずきパターン

1. 「割り切れる」の意味が曖昧：余りが出ないことを理解していても、それが何を意味するか分からない
2. 「最大」「最小」の逆転：最大公約数は小さい数になり、最小公倍数は大きい数になるため、逆に覚えてしまう
3. 機械的な暗記：計算方法だけ覚えて、なぜそうなるかを理解していない

🖥️ アプリの画面操作方法

本アプリは6つの学習モードを備えており、段階的に理解を深められる構成になっています。

導入モード

アプリを開くと最初に表示される画面です。ステップ形式で公約数・公倍数の基本概念を順番に学べます。

• 「次へ」「戻る」ボタンで説明を進める
• 各ステップにはアニメーション付きのイラストが表示される
• 最後のステップで「始める」を押すと、次のモードに進む

公約数モード

2つの数の公約数を視覚的に探索するモードです。

• 数A・数Bのスライダーで任意の数を設定（2〜30）
• 「タイル敷き詰め」ビュー：長方形にタイルがぴったり敷き詰められるかを確認
• 「分割モデル」ビュー：両方の数をある数で分けたとき、余りが出るかを確認
• タイルの大きさスライダーで分ける数を変更
• 画面下部に公約数の一覧が表示され、クリックするとその数でタイルが敷かれる
• 最大公約数には「最大」バッジが付く

公倍数モード

2つの数の倍数が「出会う」瞬間を数直線で体験するモードです。

• 数A・数Bのスライダーで数を設定（2〜12）
• 速度スライダーでアニメーション速度を調整
• 「リズム ON/OFF」ボタンでリズムアニメーションの切り替え
• 「音 ON/OFF」ボタンで効果音の切り替え
• 数直線上でAの倍数とBの倍数が同時に一致する場所が強調表示される
• 画面下部に両方の倍数の表が表示され、公倍数がハイライトされる

比較・まとめモード

公約数と公倍数の違いを並べて比較するモードです。

• 左側にタイル敷き詰め（公約数の視覚化）
• 右側に数直線（公倍数の視覚化）
• 中央に比較表が表示され、定義・特徴・計算方法が対比される
• 「おぼえておこう」セクションで4つの概念をアイコン付きでまとめ

実験モード

自由に数値を変えて、公約数と公倍数の変化を探索するモードです。

• 数A・数Bのスライダーで広い範囲の数を設定（1〜50）
• 「試してみよう」ボタン群でよく使う数の組み合わせをワンクリック選択
  • 例：「12 & 18」「8 & 15（互いに素）」「7 & 11（素数）」など
• 互いに素の通知：最大公約数が1の場合、特別なメッセージが表示される
• 「発見しよう」セクションで数学的な法則（例：GCD × LCM = A × B）を確認

練習問題モード

4種類の問題形式で理解度を確認するクイズモードです。

• 公約数・最大公約数・公倍数・最小公倍数の4タイプの問題がランダム出題
• 4択から回答を選択
• 正解・不正解で効果音が鳴る
• 全8問終了後に結果発表画面でスコアと各問題の正誤を確認
• 「もう一度挑戦」ボタンで再チャレンジ可能

🛠️ 実装の工夫点

タイル敷き詰めモデルによる公約数の可視化

公約数を「長方形にタイルがぴったり敷き詰められるかどうか」で表現しています。例えば12×18の長方形に6×6のタイルを敷くと、余りなくぴったり収まります。これは6が12と18の公約数であることを意味します。

タイルが収まらない場合は「はみ出し部分」が赤く表示され、視覚的に「割り切れない」ことが伝わるようになっています。

数直線とリズムによる公倍数の可視化

公倍数を「2つの数の歩幅で進んだとき、同じ場所で出会う」という比喩で表現しています。数直線上でAの倍数とBの倍数が進み、一致する場所が強調表示されます。

さらに、リズム機能では低音と高音の2種類の音を使い、公倍数の位置で両方が同時に鳴ることで「音でも一致が分かる」体験を提供しています。

段階的な学習フローの設計

導入→基礎→応用→まとめ→自由探索→確認テストという流れで、概念の理解から定着までを一貫してサポートしています。各モードは独立しているため、苦手な部分だけを繰り返し練習することも可能です。

効率的な計算アルゴリズムの採用

最大公約数の計算には「ユークリッドの互除法」を採用しています。この古典的なアルゴリズムは、大きな数でも高速に計算でき、教育的にも「なぜ余りを取り続けると最大公約数が求まるのか」を考えるきっかけになります。

即座のフィードバック

スライダーを動かすと即座に視覚化が更新されるため、「数を変えると結果がどう変わるか」をリアルタイムで確認できます。試行錯誤を通じて法則を発見する体験を重視しています。

📈 可視化で得られる学習効果

「割り切れる」を目で見て理解できる

タイル敷き詰めモデルにより、「余りがない」という抽象的な概念が「タイルがぴったり収まる」という視覚的な体験に変換されます。これにより、計算結果だけでなく「なぜ割り切れるのか」を直感的に理解できます。

「公」の意味が自然に分かる

2つの長方形に同じタイルを敷く、あるいは2本の数直線で同じ位置に印がつく。この「両方に共通」という意味が視覚的に伝わり、「公約数」「公倍数」の「公」の意味が自然と理解できます。

「最大」「最小」の逆転を防ぐ

• 最大公約数：大きなタイルほど敷く枚数が少なくて済む → 「いちばん楽な分け方」
• 最小公倍数：最初に出会う場所 → 「いちばん早い一致」

このようにイメージと結びつけることで、単なる暗記ではなく意味を持った理解になります。

探索的な学びができる

実験モードでは、生徒自身が数を変えながら「こうしたらどうなるだろう？」と仮説を立て、検証する体験ができます。例えば「素数同士だと最大公約数は必ず1になる」「互いに素な数の最小公倍数は2つの数の積になる」といった法則を自分で発見できます。

聴覚も使った多感覚学習

リズム機能により、視覚だけでなく聴覚でも公倍数を体験できます。低音と高音が同時に鳴る瞬間を「聞いて」理解することで、記憶の定着が促進されます。

🔧 技術スタック

• React 18 + TypeScript：型安全なコンポーネント開発
• Vite：高速な開発サーバーとビルド
• CSS Modules：スコープ付きスタイリング
• Storybook：コンポーネントのカタログ化とビジュアルテスト
• Web Audio API：リズム音の生成

🎯 おわりに

公約数と公倍数は、分数の通分・約分や中学以降の数学の基礎となる重要な概念です。しかし、抽象的であるがゆえに、多くの子どもたちがつまずいてしまいます。

本アプリは「見て分かる」「触って試せる」「聞いて感じる」という多感覚的なアプローチで、この抽象的な概念を具体的な体験に変換することを目指しました。

教育現場や家庭学習での活用を想定していますが、大人が「あ、そういうことだったのか」と再発見するツールとしても使えるかもしれません。

最後まで読んでいただきありがとうございました。