この記事は、統計学習ツール StatPlay を開発する中で
学んだことをまとめたものです。AIと協業して開発していますが、数学的な実装の正確性は
自分なりに理解・検証しています。完璧かと言われると、まだ学びの途中です。
はじめに
最初に言っておくと、私はエンジニアではありません。
ネットワークSEでキャリアをスタートし、ゲーム・Webサービス・アプリのディレクションをやってきました。開発でやっていることを理解しようとしてきた人間ではありますが、あくまでもディレクション方向の人間で、コーダーとして本格的に仕事をしてきたわけではありません。
グラフを伴うインタラクティブなビジュアライゼーションをフロントエンドで実装するなんて、プロとしてやったことは一度もありませんでした。
そういう人間が、統計の学習ツールを作った話です。
参考書で手が止まった
統計検定2級の勉強を始めて、参考書を開きました。
信頼区間のページで止まりました。書いてあることは読めます。でも絵が浮かばない。何度読んでも、なんとなくわかった気になっては、また霧がかかる。正規分布の標準化のところでも同じことが起きました。
「わかった気になる」と「わかる」のあいだには、けっこう大きな溝があります。
そこで思ったのが、「これ、動いたら一発じゃないか」 ということでした。
ゲームやアプリの開発現場にいたので、なんとなく経験的にわかるんですが、インタラクティブな体験って概念の理解を一撃で変えることがあります。スライダーを動かして、グラフが動いて、数字が変わる。それだけで「あ、そういうことか」となる瞬間がある。
でも、そういうツールがなかったんです。あっても、せいぜい静止した図が何枚かあって、「動いたらこうです」と説明する程度のもの。実際に自分の手で動かして体感できるものが、ほとんどない。
だったら作ればいいと思いました。
そうやって概念をひとつずつ動かしてみると、これがめっちゃ面白い。分布の形が変わる、サンプルサイズを増やすと収束していく、信頼区間が母平均を捕まえたり外したりする。教科書の数式の裏側に、こんなに生き生きした動きがあったのかと。統計って、じつはめっちゃ面白い。
StatPlayとは何か
作ったのが StatPlay です。
統計の概念を、インタラクティブに触りながら体感できる学習ツールです。参考書の代わりではありません。計算の練習も体系的な学習も、参考書と問題集のほうがずっと優秀です。ただ、「動いて見えたら一発でわかるのに」という瞬間 がある。そこだけを担うための装置です。
自分が勉強中に「これ動かせたらなあ」と思ったものを、そのまま作っています。
- 正規分布の標準化: スライダーで平均と標準偏差を動かすと、元の分布と標準正規分布が同時に動く。自分はこれで「あ、標準化ってこういうことか」と腹落ちしました
- 中心極限定理: サンプリングを繰り返すと平均の分布が正規分布に近づいていく。教科書で読んでもピンとこなかったのが、アニメーションで見たら一発でした
- 信頼区間: 100回のサンプリングをシミュレーションして、95%信頼区間が本当に95回くらい母平均を含む。「95%ってそういう意味か」がやっとわかった瞬間でした
- 仮説検定: 有意水準と検出力の関係を、分布の重なりを動かしながら見る。ここは正直、作りながら自分もだいぶ理解が進みました
技術的には、Vanilla JS + Canvas 2D + ESモジュールだけで作っています。React も Vue も使っていません。外部ライブラリへの依存ゼロ。この判断が正しかったかは今でもわかりませんが、少なくとも「10年後も動く」という安心感はあります。PWA対応なのでオフラインでも使えます。日英バイリンガルです。
コードは GitHub で全部公開しています。CC BY-NC 4.0 ライセンスなので、教育目的で改変・再配布は自由です。
AIがなければ作れなかった
ここまでの話を聞くと、「それなりに技術わかる人が作ったんでしょ」と思われるかもしれません。でも正直なところ、私にはこれを作る技術力がありませんでした。
以前なら、「作りたいけど作れない」で終わっていた話です。
それがたまたまAIという選択肢と重なって、作ることができました。Claudeと対話しながら、実装を進めていきました。
ただ、プロンプトを投げてコードが出てくるという単純な話ではありません。「こういう動きにしたい」「この設計判断はどうか」「これは後で壊れないか」をひたすら対話しながら作っていく作業でした。
ディレクターとして長く仕事をしてきたので、要件を言語化することと、出てきたものを評価することは、それなりにできます。開発の現場で技術を理解しようとしてきた積み重ねが、AI協業という文脈でそのまま使えました。
かくして、出来上がってしまったのです。
「AIに作らせるのは簡単」は半分間違い
少し脱線しますが、これは言っておきたいことです。
AIに指示を出せばコードが出てくる。だから簡単に見える。でも実際やってみると、判断の連続 でした。
- この設計で大丈夫なのか
- これ、後で壊れないか
- この機能は本当にいるのか
AIは「できますよ」と言いながら、わりと平気で間違った方向に走ります。最初のうちは「すごい、動いた！」で喜んでいたんですが、しばらくすると「動くけど何か変だぞ」ということが出てきます。それを見つけて止めるのは、結局人間の仕事でした。
ただ、技術のことだけではなくて、もっと根本的な問題がありました。統計の概念を自分で理解していないと、何を作ればいいかがわからない んです。
「信頼区間のシミュレーションで何をパラメータにすべきか」「中心極限定理のアニメーションで何が動いたら腹落ちするか」。AIはコードを書いてくれますが、「学ぶ人にとって何が"あ、そういうことか"の瞬間になるか」は、自分で統計を理解しないと設計できませんでした。
ここは正直、かなり苦労しました。作りながら勉強して、勉強しながら「いや、この動かし方じゃ伝わらないな」と作り直す。その繰り返しでした。
気づいたらかなりの規模になっていました。でもコードはAIが書いてくれる。問題はそこじゃなくて、書かれたコードをブラックボックスにしてはならない ということでした。コンテンツをひとつ増やすたびに、私のほうに膨大な理解の時間が必要になります。t分布を追加しようとしたらガンマ関数の理解が必要で、ガンマ関数を理解しようとしたら高校の数学から学び直す羽目になる。そういうことの連続でした。
正確性をどう担保したかという話は、次回以降の記事で詳しく書きます。
結局、何が学びだったか
このツールを作った動機はシンプルで、自分が欲しかったから作ったというだけです。
そしてこれを作りながら、自分自身が統計の面白さに気づきました。概念をビジュアライズしようとすると、その概念を本当に理解していないと作れない。作ることが、最大の学びでした。
学ぶほど、作りたいものが増えます。そしてどう動かすかがますます悩ましい。
現在のコンテンツは11トピック、日英バイリンガル。コラムも少しずつ増やしています。これからも学び続けながら、もっと直感的に、「統計って面白い」を感じてもらえるものにしていきたいと思っています。
エンジニアでなくても、AIと一緒に、ここまで作れる。やり方さえ知っていれば、誰でもできる。そのことを示す実例のひとつとして、この連載を始めます。
次回は、正確性をどう担保したかの話から。JavaScriptにはガンマ関数がないので、Lanczos近似で実装した話を書きます。
関連
Jumpei Sasai / Sasai Lab — 2026.04