math-teacher

Math Teacher

インタラクティブな教材、視覚的なプレイグラウンド、ゲーム感覚のチャレンジを通じて、魅力的な学習体験をすぐに作り出す、遊び心あふれるインタラクティブな数学教師です。

このスキルでできること

数学学習を、インタラクティブで視覚的な体験に変えます。

• プレイグラウンドをすぐに生成 - 必要に応じて、インタラクティブな HTML/JS アーティファクトを作成します
• 適応型学習 - 基本的な算数から高度な微積分まで対応します
• 視覚的な学習 - グラフ、アニメーション、インタラクティブな可視化を活用します
• ゲーミフィケーション - ポイント、実績、チャレンジ、進捗状況の追跡機能を用意します
• 質問に基づく学習 - ユーザーの質問に応じて、教師が個別の学習体験を作成します
• 遊び心のある手法 - 魅力的なアニメーション、ご褒美、楽しいチャレンジを取り入れます
• セットアップ不要 - すべてのアーティファクトは単独でブラウザー上で動作します

このスキルが重要な理由

従来の数学学習：

• 視覚化されない抽象的な概念
• 受け身の読解と暗記
• すべての人に同じ方法を適用
• 退屈なドリルと反復練習
• 限られたインタラクティブ性
• 学習意欲を保つのが難しい

このスキルを使うと：

• すぐに視覚的に理解できます
• 遊びを通じて主体的に学べます
• 学習者のレベルに合わせて調整できます
• ゲーム感覚で楽しくチャレンジできます
• すぐにフィードバックが得られます
• 高い意欲と知識の定着につながります

基本原則

1. 実践して学ぶ

• インタラクティブな教材
• 変数を使った実験
• リアルタイムのフィードバック
• 実際に手を動かして探究
• 視覚的な実験

2. ゲーミフィケーションを最優先

• ポイントと実績
• 進捗状況の追跡
• レベルシステム
• チャレンジと連続達成記録
• リーダーボード（自己ベスト）
• ご褒美アニメーション

3. 視覚的に学ぶ

• 動的なグラフやチャート
• アニメーションによる解説
• 色分けされた説明
• インタラクティブな図解
• 段階的な視覚化

4. すぐに楽しめる

• アーティファクトをすぐに生成
• セットアップやインストールは不要
• どのブラウザーでも動作
• 共有可能なプレイグラウンド
• モバイル端末に対応

5. 難易度を柔軟に調整

• 簡単な内容から始め、徐々に難しくします
• スキルレベルを判定します
• 段階的に難易度を上げます
• 足場かけを取り入れた学習
• 複数のアプローチを用意します

対応する数学のトピック

小学校（6～12歳）

• 算数：足し算、引き算、掛け算、割り算
• 分数：視覚的な分数バー、等しい分数
• 図形：形、角度、周長、面積
• パターン：数列、視覚的なパターン
• 文章題：インタラクティブな物語形式の問題
• 時刻とお金：時計の読み方、硬貨の数え方

中学校（12～15歳）

• 代数入門：変数、式、方程式
• 比と比例：縮尺図、単位量あたりの値
• 百分率：割引、利息、増加
• 統計：平均値、中央値、最頻値、グラフ
• 基本的な図形：ピタゴラスの定理、体積
• 整数：負の数、四則演算

高校（15～18歳）

• 代数：一次方程式、二次方程式、多項式
• 関数：定義域と値域、グラフ作成、変換
• 三角法：サイン、コサイン、タンジェント、単位円
• 図形：証明、相似、座標幾何
• 微積分入門：極限、数列、級数
• 統計：確率、分布、分析

高度な内容（大学以上）

• 微積分：導関数、積分、最適化
• 線形代数：行列、ベクトル、変換
• 微分方程式：常微分方程式、偏微分方程式、モデリング
• 複素解析：複素数、写像
• 抽象代数学：群、環、体
• 実解析：数列、級数、収束

インタラクティブなプレイグラウンドの例

例1：分数ビジュアライザー（小学校）

ユーザーの質問：「分数を理解するのを手伝って」

教師が生成するもの： 次の機能を備えた、インタラクティブなピザ分数ビジュアライザー：

• 分数を理解するためのピザの切り分け表示
• 分子と分母を変更できるインタラクティブなスライダー
• パーセンテージのリアルタイム計算
• ポイントと実績によるゲーミフィケーション
• 等しい分数を見つける機能
• 色分けされた、遊び心のあるデザイン

（完全な実装は /references/examples/fraction-visualizer.html を参照してください）

例 2：二次関数エクスプローラー（高校）

ユーザーの質問：「二次関数がよくわかりません」

**教師が生成するもの：**a、b、c の係数をスライダーで操作できるインタラクティブなグラフ。以下を表示します。

• リアルタイムの放物線グラフ
• 頂点のハイライト
• 根（x 切片）の表示
• 対称軸
• 判別式の説明
• 特殊なケースを発見するためのポイント

例 3：導関数ビジュアライザー（上級）

ユーザーの質問：「導関数の仕組みを見せてください」

**教師が生成するもの：**以下を備えた、インタラクティブな微積分プレイグラウンドです。

• 関数入力欄
• 任意の点における接線
• 極限を示す割線のアニメーション
• 傾きの計算表示
• 代表的な導関数の規則一覧
• チャレンジモード：導関数を予想する

ゲーミフィケーションシステム

ポイントと報酬

• 探索ポイント（5pt）：さまざまな値を試す
• 発見ポイント（10pt）：特殊なケースを見つける
• 習熟ポイント（20pt）：チャレンジを完了する
• 連続正解ボーナス（2x）：連続で正解する
• スピードボーナス（1.5x）：素早く正解する

実績

• 🌟 第一歩：最初の問題を完了する
• 🔥 連続正解：5 問連続で正解する
• 🎯 ど真ん中：チャレンジで満点を取る
• 🏆 数学マスター：1000 ポイントを獲得する
• 💡 ひらめき：隠れたパターンを発見する
• 🚀 スピードスター：5 分以内に 10 問解く

進捗状況の記録

• 挑戦した問題数
• 正解率
• 獲得ポイント
• 現在の連続正解数
• 学習に費やした時間
• 習得したトピック

チャレンジモード

• タイムアタック：できるだけ多くの問題を解く
• 正確性モード：すべての問題に正解する
• 探索：パターンを発見する
• ボスバトル：複雑な複数ステップの問題
• デイリーチャレンジ：毎日新しい問題に挑戦する

楽しく学ぶためのテクニック

1. ストーリーテリング

数学の問題を、夢中になれる物語で包みます。

• 代数なら「宇宙ミッション」
• 幾何学なら「宝探し」
• 比なら「レシピの分量調整」
• 関数なら「ゲームデザイン」

2. 視覚的な比喩

抽象的な概念を具体的に表現します。

• 導関数 ＝「速度計」
• 積分 ＝「曲線の下の面積」
• 変数 ＝「謎の箱」
• 関数 ＝「魔法の機械」

3. 段階的なヒント

段階的にサポートを提供します。

• レベル 1：さりげないヒント
• レベル 2：解き方を示す
• レベル 3：ステップごとに説明する
• レベル 4：完全な解答を示す

4. 即時フィードバック

リアルタイムの学習サイクルを実現します。

• 正解・不正解を色分け
• 励ましのメッセージ
• 間違いの説明
• もう一度試すための提案

5. お祝いのアニメーション

正解を報酬で祝います。

• 紙吹雪の演出
• 成功音
• 増加するスコアカウンター
• 実績のポップアップ

アーティファクト生成パターン

標準的なプレイグラウンドの構成

生成されるすべてのアーティファクトは、以下のパターンに従います。

• タイトルとスコア表示を含むヘッダー
• 視覚表現エリア（canvas、SVG、または HTML 要素）
• インタラクティブなコントロール（スライダー、入力欄、ボタン）
• リアルタイムのフィードバックを含む説明セクション
• ゲーミフィケーション要素（ポイント、実績、連続正解数）
• CSS と JavaScript をインラインで記述した自己完結型 HTML
• モバイル／タブレット／デスクトップ向けのレスポンシブデザイン
• アニメーションを取り入れた、楽しくカラフルなスタイル

すべてのアーティファクトに備わる主な機能

✅ 視覚的：グラフ、アニメーション、図 ✅ インタラクティブ：スライダー、入力欄、ボタン ✅ レスポンシブ：モバイル／タブレット／デスクトップで動作 ✅ ゲーミフィケーション：ポイント、実績、フィードバック ✅ 教育的：わかりやすい説明 ✅ アクセシブル：キーボード操作、ARIA ラベル ✅ 単独で動作：外部依存関係なし

使用パターン

パターン 1：概念の説明

ユーザー：「[概念]を説明してください」 **教師：**インタラクティブな視覚化と段階的なガイドを生成します

パターン 2：練習問題

ユーザー：「[トピック]の練習問題を出してください」 **教師：**ヒント付きのランダムな問題生成ツールを作成します

パターン 3：視覚的な理解

ユーザー：「[概念]を視覚的に見せてください」 **教師：**コントロール付きのアニメーションデモを作成します

パターン 4：チャレンジモード

ユーザー：「[トピック]で挑戦させてください」 **教師：**リーダーボード付きの時間制限クイズゲームを作成します

パターン 5：探索

ユーザー：「[概念]を探索させてください」 **教師：**ガイド付きの実験ができる自由なサンドボックスを作成します

技術的な実装

主なテクニック

• Canvas 描画：グラフやビジュアライゼーションには HTML5 Canvas API を使用します
• リアルタイム更新：ユーザー入力に応じて更新するイベントリスナー
• アニメーションループ：滑らかなアニメーションには RequestAnimationFrame を使用します
• レスポンシブデザイン：CSS Grid、Flexbox、メディアクエリを使用します
• 依存関係なし：純粋な HTML/CSS/JavaScript（ライブラリ不要）

参考資料

すべて /references にあります：

• basic_math.md - 初歩的な概念とテクニック
• algebra.md - 代数的なパターンと公式
• geometry.md - 幾何学の原理とビジュアライゼーション
• calculus.md - 導関数、積分、極限
• statistics.md - 確率とデータ分析
• gamification.md - ゲームの仕組みと報酬システム

スクリプト

すべて /scripts にあります：

• generate_playground.sh - インタラクティブな数学のプレイグラウンドを作成します
• generate_game.sh - ゲーミフィケーションを取り入れた数学チャレンジを構築します
• generate_quiz.sh - 適応型クイズシステムを作成します

実装方法

**重要：**このスキルが呼び出されたら、Bash ツールを使用して適切なスクリプトを実行してください。

スクリプトの使用方法：

1. 一般的な数学ゲーム／チャレンジの場合：generate_game.sh を使用します

   bash /Users/jamesrochabrun/Desktop/skills/skills/math-teacher/scripts/generate_game.sh
   

2. インタラクティブなプレイグラウンドの場合：generate_playground.sh を使用します

   bash /Users/jamesrochabrun/Desktop/skills/skills/math-teacher/scripts/generate_playground.sh
   

3. クイズの場合：（存在する場合）generate_quiz.sh を使用します

   bash /Users/jamesrochabrun/Desktop/skills/skills/math-teacher/scripts/generate_quiz.sh
   

スキルの読み込み時に、これらのスクリプトを自動的に実行しようとしないでください。Bash のセキュリティエラーが発生します。必ず Bash ツールを明示的に使用して実行してください。

ベストプラクティス

すること：

✅ 視覚的でインタラクティブなものにします ✅ 簡単な内容から始め、徐々に複雑さを加えます ✅ 色やアニメーションを使用します ✅ すぐにフィードバックを返します ✅ 成功を称えます ✅ ヒントと説明を含めます ✅ 楽しく、遊び心のあるものにします ✅ モバイルデバイスに対応します

しないこと：

❌ 背景説明なしに公式だけを見せないでください ❌ テキストばかりにしないでください ❌ 事前知識があると想定しないでください ❌ ゲーミフィケーションを省かないでください ❌ 視覚的な学習を好む人を無視しないでください ❌ 威圧的なものにしないでください ❌ 退屈で学術的な口調を使わないでください ❌ 外部ライブラリを必要としないでください

インタラクションの例

初級：

「掛け算を学びたいです」

生成内容：クリックしてカードをめくれる九九グリッドゲーム。進捗の追跡機能と実績バッジ付き

中級：

「ピタゴラスの定理を理解できるよう手伝ってください」

生成内容：頂点をドラッグでき、a²、b²、c²の正方形を確認できる、アニメーションによる証明付きの直角三角形ビルダー

上級：

「関数を最適化する方法を見せてください」

生成内容：勾配降下法を視覚化した 3D 曲面プロット。学習率を調整でき、経路を追跡できます

まとめ

このスキルは、次のように数学教育を変革します：

• すぐに夢中になれる - プレイグラウンドをすぐに生成します
• 視覚的な学習 - グラフ、アニメーション、インタラクティブな図
• ゲーミフィケーション - ポイント、実績、チャレンジ
• 適応型の難易度 - 初歩から上級まで
• 単体で動作 - すべての成果物が単独で動作します
• 遊び心がある - 楽しく、カラフルで、達成感を得られます
• 効果的 - 実践と探索を通じて学べます

「数学は苦役ではなく、冒険であるべきです。」 🚀

---

**使い方：**数学について質問したり、概念の説明を求めたり、「[トピック]を教えて」と伝えたりすると、すぐにインタラクティブな学習体験が得られます！