📚 はじめに
小学校で習う「仮分数」と「帯分数」の変換。大人にとっては当たり前の計算でも、子供にとっては抽象的で理解しづらい概念だったりします。
「7/4ってどういうこと？」「なんで1と3/4になるの？」
こうした疑問に対して、数式だけで説明するよりも目で見て理解できるツールがあればなーと思い、Reactを使ってビジュアル学習アプリを作成しました。
この記事では、アプリの使い方と、実装における工夫点、そして可視化による学習効果についてご紹介します。
🎮 デモプレイ
💻 ソースコード
🎯 このアプリを作った背景
子供の算数学習における課題
分数の学習でつまずくポイントとして、以下のようなものがあります。
- 仮分数の意味がわからない：「分子が分母より大きいってどういうこと？」
- 帯分数との関係が見えない：「7/4と1と3/4が同じ量だと実感できない」
- 変換の手順が暗記になりがち：「なぜ割り算するのか」の理由が腑に落ちない
教科書では円グラフや図が使われることもありますが、静的な図だけでは「変換の過程」を体感することが難しいです。
作りたかったもの
そこで、以下の要件を満たすアプリを目指しました。
- リアルタイムに変化する図形：分子・分母を変えると、すぐに図形が更新される
- ステップバイステップの解説：変換の各手順を順番に確認できる
- クイズモード：理解度を確認できる練習機能
- 直感的な操作：スライダーで感覚的に数値を変えられる
🖥️ アプリの画面操作方法
モード切り替え
アプリには2つのモードがあります。画面上部のボタンで切り替えられます。
| モード | 説明 |
|---|---|
| 分数可視化モード | 分数を入力し、図形で確認しながら変換手順を学ぶ |
| クイズモード | 表示された図形を見て、分数を当てる練習をする |
分数可視化モード
1. 図形の種類を選ぶ
プルダウンメニューから「円形（ピザ型）」または「長方形（バー型）」を選べます。円形はピザを切り分けるイメージ、長方形はチョコレートバーを分けるイメージで、子供の好みに合わせて使い分けられます。
2. 分数を入力する
「仮分数」タブと「帯分数」タブを切り替えて、好きな方法で分数を入力できます。
- 数値入力欄：直接数字を入力
- スライダー：ドラッグして感覚的に数値を変更
入力した分数は、リアルタイムで図形に反映されます。例えば7/4を入力すると、円が2つ表示され、1つ目は完全に塗りつぶされ、2つ目は4分の3だけ塗りつぶされます。
3. 変換手順を確認する
画面下部には変換手順がステップバイステップで表示されます。「次へ」ボタンを押すと、1ステップずつ進みます。
例えば「仮分数 → 帯分数」の変換では：
- 変換する分数を確認
- 分子を分母で割って商を求める
- 商が整数部分になる
- 余りが新しい分子になる
- 変換完了
各ステップで計算式と説明が表示されるので、「なぜそうなるのか」を理解しながら進められます。
クイズモード
1. クイズの種類を選ぶ
2種類のクイズから選べます。
| 種類 | 内容 |
|---|---|
| 図形から分数を答える | 表示された図形を見て、仮分数または帯分数で回答 |
| 分数の変換 | 仮分数を帯分数に変換して回答 |
2. 問題に回答する
図形を見て、対応する分数を入力欄に入力します。仮分数でも帯分数でも正解になります。
3. 正解を確認する
「回答する」ボタンを押すと、正解か不正解かが表示されます。不正解の場合は正しい答えも表示されるので、復習に役立ちます。
画面上部にはスコア（正解数/問題数）が表示され、学習の進捗を確認できます。
💡 実装の工夫点
図形描画の工夫
円形の分数表示では、SVGのパス要素を使ってピザのような扇形を描画しています。分母の数に応じて円を等分し、分子の数だけ色を塗る仕組みです。
三角関数を使って各扇形の座標を計算し、円弧を描くパスを生成しています。これにより、分母が2でも9でも、きれいに等分された図形が描画されます。
長方形の場合は、横に並んだ矩形を分母の数だけ生成し、分子の数だけ塗りつぶします。こちらは座標計算がシンプルなので、アニメーション効果をつけやすいという利点があります。
アニメーションの工夫
分数の値が変わったとき、図形がふわっと表示されるアニメーション効果を入れています。これにより「値が変わった」ことが視覚的にわかりやすくなります。
また、複数の図形がある場合は、少しずつタイミングをずらして表示することで、「1個目、2個目...」と数えやすくしています。
状態管理の工夫
仮分数と帯分数は常に連動しています。仮分数を変更すると自動的に対応する帯分数が計算され、逆も同様です。これにより「同じ量を別の書き方で表している」ことを実感できます。
変換ステップを進めている途中で分数の値を変更すると、自動的にステップが最初に戻ります。これにより、新しい分数に対する変換手順を最初から確認できます。
クイズモードの工夫
クイズモードでは、図形の下に表示される分数のテキストを非表示にしています。これにより、図形だけを見て分数を考える練習ができます。
また、ランダムに生成される問題は、分母が2〜9、整数部分が1〜4の範囲に制限しています。小学生にとって取り組みやすい難易度に調整されています。
📈 可視化による学習効果
抽象概念の具体化
「7/4」という数字だけでは、その量をイメージするのは難しいです。しかし、2つの円のうち1つが完全に塗られ、もう1つが3/4塗られた図を見れば、「1より大きい」「2より小さい」ということが直感的にわかります。
変換の意味の理解
「分子÷分母」という計算が、実は「完全に塗られた図形がいくつあるか数える」ことと同じだと気づけます。7÷4=1あまり3は、「完全な円が1個と、4分の3塗られた円が1個」という意味なのです。
試行錯誤による発見
スライダーを動かして分数を変えていくと、「分子が分母と同じになると1になる」「分子が分母の2倍になると2になる」といったパターンを自分で発見できます。教えられるよりも、自分で見つけた法則は記憶に残りやすいです。
即時フィードバック
クイズモードでは、回答後すぐに正解・不正解がわかります。間違えた場合は正しい答えも表示されるので、その場で理解を修正できます。この即時フィードバックは、効果的な学習に欠かせない要素です。
🛠️ 技術スタック
| 技術 | 用途 |
|---|---|
| React | UIコンポーネント |
| TypeScript | 型安全な開発 |
| Vite | 開発サーバー・ビルド |
| CSS Modules | スタイリング |
| Framer Motion | アニメーション |
| Storybook | コンポーネントカタログ |
🎬 おわりに
子供の学習において、「見える化」は非常に強力なツールです。抽象的な数学の概念も、目で見て、自分で操作できる形にすることで、理解が深まります。
このアプリが、分数の学習に苦労しているお子さんの助けになれば幸いです。
また、React + TypeScript + Vite の構成は、このような教育ツールを素早く作るのに適しています。同じような学習アプリを作りたい方の参考になれば嬉しいです。
最後までお読みいただきありがとうございました。