@kk-edu-tech

#個人開発 #円周角の定理 #図形アプリ #中学校学習教材 #JavaScript

最終更新日 2025年8月3日 投稿日 2025年8月3日

はじめに

自治体(教育委員会)が公開しているデジタル教材や、GeoGebraのような動的数学ソフトウェアを活用すると、自分の手で触って点を動かすことで直感的に「円周角の定理」について理解することができます。中学校で数学を教えている私も、授業で活用していますが不具合が生じるケースがあります。このような、軽微な不具合が、子どもたちの理解を妨げたり、混乱を招くことがあります。このような経験から、「自分でアプリケーションが作れたら、修正することができるかもしれない」と思い、開発してみようと思いました。

作ったアプリケーション

このアプリケーションは、1つの円と中心O、そして、その円周上に3点A、B、Pがあります。このとき、中心角∠AOBは、弧ABに対する円周角∠APBの2倍になることを理解する教材です。

動かすことができる点は3点A、B、Pです。それぞれの点を動かすことで、中心角や円周角が変わったり、変わらなかったりします。その試行錯誤の中で、円周角の定理について直感的な理解の手助けになれば嬉しいです。

右の図は、初期状態ですので、この状態に戻りたいときには、リセットボタンを使用してください。

直感的な理解だけでなく、なぜ円周角の定理が成り立つのか、いわゆる証明でよく使われる補助線については、「円周角の定理を考えるヒント」ボタンを押すことで表示されるようにしています。

image.png

技術スタック

実装の工夫ポイント

「はじめに」の中で述べた、授業で他のデジタル教材等を活用した際の不具合について、改善するために工夫をしました。具体的な不具合というのが、点Pが弧AB上に動いた場合に角度が表示されなくなったり、点Aと点Bの位置関係が逆転した際に意図しない箇所に角度が表示されたりするケースがありました。数学でいう「定理」というのは、「どんなときにも成り立つ」という普遍性が重要なので、この不具合の改善を試み、成功しました。

不具合の例

image.png

image.png

image.png

本アプリでの改善

image.png

image.png

image.png

おわりに

個人開発は、はじめてで、プログラミング言語(Javascript , html , css)の学習やデプロイなど、分からないことが多く大変でしたが、その分スキルが身に付いた実感があります。また、既存のアプリケーションに対して「もっとこうだったらいいのに」という、かゆいところに手が届く感覚が、解放感があっていいなと思いました。今後も、自作教材を開発することで生徒の学習のサポート及び自分自身のスキルアップに努めたいと思います。