stepmathの開発経緯

StepMathは、数学の学び直しとNext.jsの学習をきっかけに開発を始めた数学学習Webアプリケーションです。

この記事では、StepMathを作り始めた理由、現在の技術スタック、AIコーディングツールの使い分け、そして数学教材をどのように作成しているかを紹介します。

StepMathを作り始めたきっかけ

StepMathは、もともと開発者自身が数学の勉強を進める中で生まれた個人開発プロジェクトです。

数学を学び直すだけでなく、Next.jsの実践的な学習も兼ねて、

せっかくなら、数学を学べるWebアプリケーションをNext.jsで作ってみよう

と考えたことが始まりでした。

数学の内容を自分で整理し、それをWebアプリケーションとして実装していけば、数学とWeb開発の両方を学べるのではないかと考えたのです。

ただし、実際に開発を進めてみると、現在の開発の中心はNext.jsを手作業で書くことというよりも、Codex、Claude Code、AntigravityといったAIコーディングツールを使い分けながら実装を進める形になっています。

StepMathの全体像

StepMathは、JSON形式の教材データをもとに、学習画面を動的に表示する構成になっています。

教材データには、問題文、解説、数式、図、入力欄などの情報を含めています。
それをLessonViewerコンポーネントが読み込み、学習者が画面上で問題を解いたり、解説を読んだりできるようにしています。

技術スタック

StepMathは、Next.js、React、TypeScriptを中心に構成したWebアプリケーションです。

画面デザインにはTailwind CSSを使用し、学習画面のUIをコンポーネント単位で構築しています。

数式表示にはKaTeXを使用しています。
数学学習サービスでは、数式が正しく、かつ読みやすく表示されることが重要です。

数式入力にはMathLiveを利用しています。
通常のテキスト入力ではなく、分数、指数、三角関数、絶対値などを扱える数式入力欄を用意することで、学習者が数学の解答を入力しやすくなることを目指しています。

図やグラフの描画には、JSXGraphやSVG系コンポーネントを使用しています。
数学では、式だけでなく、図形やグラフを見ながら理解することが非常に重要です。そのため、ベクトル図、三角関数の単位円、関数グラフなどを教材に合わせて表示できるようにしています。

AIコーディングツールの使い分け

StepMathの開発では、複数のAIコーディングツールを用途に応じて使い分けています。

Codex

最もメインで利用しているのはCodexです。

ファイルの作成・編集だけでなく、必要なライブラリのインストールなども行ってくれるため、開発全体を進めるうえで非常に便利です。

また、コーディングの精度も高く、こちらの意図を比較的よく汲み取ってくれるため、通常の機能追加や修正はCodexを中心に行っています。

Next.js、React、TypeScriptのような一般的なWebアプリケーション開発では、かなり頼れる存在だと感じています。

Claude Code

Claude Codeは非常に賢く、複雑な実装や設計上の判断が必要な場面で力を発揮します。

ただし、API経由で利用しているためコストが高く、常用するというよりは、Codexだけでは実装が難しい箇所にピンポイントで使うようにしています。

特に、StepMathでは数式入力のためにMathLiveを組み込んでいますが、この実装はClaude Codeの力が大きかった部分です。

数式入力キーボードは通常のフォーム入力とは違い、フォーカス制御、仮想キーボード、入力補助、表示崩れへの対応など、細かい調整が必要になります。

このような複雑なUI実装では、Claude Codeの強さを感じました。

Antigravity

Antigravityについては、コスト面では最も使いやすい一方で、ハルシネーションが多く、生成されたコードに問題が含まれることがあります。

また、Antigravityで生成したコード上の問題をCodexが見落とすこともあり、実装の中核に使うには注意が必要だと感じています。

そのため、Antigravityは主にE2Eテストや機能テストなど、テストパターンの生成やテスト実行の補助に利用しています。

実装そのものよりも、確認作業やテスト観点の洗い出しに使う方が、現時点では相性が良いと感じています。

数学カリキュラムと問題作成

StepMathの数学カリキュラムは、「高等学校学習指導要領（平成30年告示）解説 数学編 理数編」を参考にしながら、ChatGPTを用いて生成しています。

ただし、単にAIに問題を作らせるだけではありません。

問題作成用のガイドラインを用意し、学習目標、問題形式、解説の分かりやすさ、数学的な正確性など、複数の観点から評価できるようにしています。

また、同じ学習テーマに対して複数の問題を生成し、その中から評価指標の高いものを採用することで、問題の品質を高める工夫も行っています。

StepMathの問題作成プロセス

StepMathでは、AIに問題を作らせて終わりではなく、生成 → 評価 → 修正 → 正確性チェックという流れで教材を作成しています。

問題作成の流れ

1. 学習テーマを決める
高等学校学習指導要領を参考に、単元ごとの到達目標と扱う概念を整理します。

↓

2. 問題案を複数生成する
ChatGPTを使い、同じ学習テーマに対して複数の問題案・解説案・選択肢を生成します。

↓

3. 評価指標で採点する
数学的正確性、解説の分かりやすさ、選択肢の妥当性などを複数の観点から評価します。

↓

4. 最良案を採用・修正する
評価点が高い問題を採用し、文言、数式表記、図解指定などを教材JSONとして整えます。

↓

5. 正確性を再チェックする
ChatGPTやGeminiを使って、問題文、解答、解説、数式に誤りがないか確認します。

品質を高めるための確認観点

• 数学的正確性：答え、式変形、定義、条件に誤りがないか
• 学習しやすさ：解説が段階的で、初学者が迷わないか
• UI上の見やすさ：数式、図、グラフ、入力欄が教材意図と合っているか

AIが生成した問題は便利ですが、そのまま使うと説明が不自然だったり、選択肢の質が低かったり、場合によっては数学的に誤った内容が含まれる可能性もあります。

数学学習サービスでは、問題の正しさは非常に重要です。
UIが分かりやすくても、問題や解説が間違っていれば、学習者に誤った理解を与えてしまいます。

今後取り組みたいこと

今後は、AIによるレビューだけでなく、Leanなどの定理証明支援系を使った機械的な検証も導入していきたいと考えています。

たとえば、式変形や恒等式、計算結果の正しさについては、人間やLLMの判断だけに頼るのではなく、機械的に正しいことを確認できる部分があります。

すべての数学問題をLeanで検証するのは簡単ではありません。
しかし、計算問題や式変形の一部からでも機械証明を取り入れることで、コンテンツの信頼性をさらに高められる可能性があります。