📚 はじめに

小学校で習う「仮分数」と「帯分数」の変換。大人にとっては当たり前の計算でも、子供にとっては抽象的で理解しづらい概念だったりします。

「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 の構成は、このような教育ツールを素早く作るのに適しています。同じような学習アプリを作りたい方の参考になれば嬉しいです。

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