競馬ダッシュボードを自作 AIと10日で作った騎手の画面

今回は競馬のデータを自分の切り口で見たくて、騎手の調子を見る競馬ダッシュボードを自作した話です
実際に作成したのは Claude Codeが99% で、私はほぼ言いたいこと言って、出来上がりを判断するだけでした

思いついたその日のうちに画面が完成しまして、使いながらどんどん違う切り口の分析画面を追加しています
タブは2つで始まりましたが、あれもこれもと足して、最終的に7つまで増えています

記事の画面は実際のもので、成績の数値はぼかしています
画面は JRA-VAN のデータで動いていて、JRA-VAN の投稿ガイドラインでは取得したデータをそのまま載せられないので、雰囲気だけ感じてください

自作した競馬ダッシュボードで見える5つのこと

タブは今7つあり、ここでは最初に作った「レースから見る」「最近の傾向」「競馬場別」「ランキング」「馬場の偏り」の5つを紹介します
どれも、騎手の成績を期間と条件で切り分けて見るための画面で、あとから「騎手×調教師」と「脚質」も足しました

JRA-VANなどで年度の成績はわかるんですが「この騎手、最近どうだっけ？」と思ったときに、年間成績だけでは見えない直近の成績や、競馬場・距離など独自の切り口で分析できるようにしています

レースから見る 出走する騎手の調子を一覧で

日付とレースを選ぶと、そのレースに乗る騎手ごとに通算から今週までの8つの期間の成績が横に並びます
通算・前年・今年の3つは「公式」でよく見る値で、準備はしたものの独自の切り口にはならないので、基本は非表示にしています

数字の横の矢印は、その騎手の前年(同じ条件)と比べて上向きか下向きかを示します
傾きが急なほど差が大きくして、そのマスか前年の騎乗が10回に満たないときは、矢印を薄くして試行の少ない参考情報とわかるようにしています

見る指標は、勝率・連対率・複勝率・単勝回収率・複勝回収率・単勝期待値・複勝期待値の7つから選べます
「競馬場」「芝・ダート」「距離」などをレースに合わせるボタンもあり、押すと「東京の芝2500mでの成績」のようにボタン1つで絞り込めます

最近の傾向 条件をそろえて騎手を並べ替える

競馬場・芝ダート・馬場・距離・回り・クラスの6つの条件で、直近半年に乗った騎手を並べ替える画面です
左の騎手一覧には視覚的に一瞬で判断できるように、選んだ指標の推移が小さな折れ線で付いています

騎手を押すと、右に8期間の成績表と推移のグラフ、その下に直近1年のレース成績が出ます
グラフの点線は前年の値を基準にして、前年より下の期間は棒が赤くなります

競馬場別 得意な競馬場と苦手な競馬場

選んだ騎手の成績を、全場と10の競馬場に分けて並べる画面です
棒グラフの点線が全場の値で、それより上の競馬場は緑、下は赤にしました

期間も通算から今週までで替えられるので、直近1ヶ月はどこで勝っているかが一目で分かります

ランキング 指標1つで順位を付ける

勝率・回収率・期待値などの指標を1つと、並べる期間を選ぶと、騎手に順位が付きます
同じ表に通算から今週までの推移も並ぶので、上位にいるのが今の調子なのか、昔の貯金なのかを見分けられます

「直近1ヶ月に50騎乗以上」のように、騎乗数の下限も入れられます
数回しか乗っていない騎手が上に来るのを防ぐためです

馬場の偏り(トラックバイアス) その日の内と外・前と後ろ

その日までのレースの結果から、内と外・前と後ろのどちらが有利だったかを、競馬場×芝ダートごとに出す画面です
右上の図は、縦を前と後ろ、横を内と外にとって、どこに当たるかを点で示していて、レースが終わるたびに再計算しています

レースごとの1〜8枠は、有利なら緑・不利なら赤
そのコースがもともと持っている傾向と、今日の分を分けて見られるようにしました
とはいえ、4コーナー以降の位置取りと枠は完全に連動するわけではないので、ただの自己満メニューっぽくなりほとんど使っていない、、

Claude Codeとの作り方 私がやったのは要望と判断

設計書・実装計画・実装・別の目でのレビュー・サーバーへの配置まで、作る作業は Claude Code が担当しました
私がやったのは、要望を出すことと、出てきた画面を見て判断すること、あとはスマホでの確認です

1つの機能が入るまでの流れは、だいたいこんな感じ

1. 私が「こういう画面がほしい」と言葉で説明する
2. Claude Code が設計書と実装計画を書く
3. 実装して、別の目でレビューする
4. 偽のデータで動く手元の確認環境で、PCの幅とスマホの幅の見た目を確かめる
5. 本番のサーバーへ配置する

AIでツールを作ってみたいけど、何から頼めばいいか迷っているなら、ほしい画面をとにかく説明すること
コードの書き方は知らなくても、「何をどう見たいか」を伝えればかなりのところまで形にしてくれます

Windowsアプリを同じように作ったときの進め方は、バイブコーディングでWindowsアプリを作った実例にまとめてますので参考まで

今回のダッシュボード作成は、競馬予想AIの番外編みたいなものです
競馬予想AIに興味がある方はコチラも参考にしてみてください

技術の構成 データの取り込みから画面まで

画面と集計の置き場所は Xserver のレンタルサーバー1台です
WordPress とデータベースが同じサーバーに入っています

• データ:JRA-VAN Data Lab.(Windows で動く JV-Link)から、自作の取り込みプログラムがサーバーの MariaDB に入れる(毎朝6時40分と、開催日は5分ごと)
• 集計:WordPress のプラグイン(PHP)が、REST API で成績を集計して返す
• 集計の分け方:直近35日は毎回その場で集計し、それより前は毎晩4時30分に作り直す集計表(約175万行)から読む
• 画面:素の JavaScript(外部ライブラリなし)と CSS で、グラフも SVG で自前で描いている
• 見られる人:管理者でログインしたときだけ見られる自分用(JRA-VAN の規約のため)

画面は WordPress の固定ページに、ショートコードで置いています

独自の切り口で見られる画面の作成をココナラで受け付けています

手元のデータを、自分の切り口で見られる画面にする依頼を、ココナラのプロフィールから相談で受け付けています
作り方はこのダッシュボードと同じです
Claude Code と組んで作ります

たとえば、自社の売上・在庫・問い合わせの記録を、期間や条件で切り替えて見たい場合
既製の集計ツールで、見たい切り方ができないときに向いています
「この条件とこの期間を並べて見たい」が言葉になっていれば、そこから画面に落としていけます