Make a bar graph of points each team got and will get.
日本のプロサッカーリーグ、Jリーグの勝ち点 (取得済み & 今後取り得る) を各チームの試合情報と共に積み上げグラフにするコードです。
https://mokekuma-git.github.io/JLeague_Matches-Bar_Graph/ を見れば、基本的にその時の最新データを見られるようにしています。
ページ上部の「大会」プルダウンから、以下の大会を切り替えて閲覧できます:
- Jリーグ — J1 / J2 / J3 (1993年開幕以降の全シーズン)
- 天皇杯 — トーナメント表示対応
- Jリーグカップ — ルヴァンカップ (トーナメント表示対応)
- Princeリーグ — 高円宮杯プレミアリーグ EAST・WEST / プリンスリーグ関東
- ACL — ACL グループステージ / ACL Elite リーグステージ
- WEリーグ — WEリーグ / WEリーグカップ (決勝トーナメントはトーナメント表示対応)
- 国際大会 — W杯アジア最終予選 / W杯グループステージ / オリンピック グループステージ
トーナメント形式の大会を選ぶと、同じページ内でトーナメントViewに切り替わります。
今年の (も) Jリーグって節ごとの日程も前倒しや延期ばっかりで、いったいどのチームがどれくらい勝ってるのか、負けてるのか
その時の勝ち点が多くても、単に試合数をこなしてるからなのか、勝ってるせいなのか、よく分かんないですよね？
そこで、シーズンの試合とその中の勝ち試合を棒グラフ風に並べて、どのチームがどれくらい勝ち点を稼いでいて、今後どこまで稼げるのか、を表示するプログラムを作りました。
で、「実際今年はどこまで勝点稼ぐ可能性があるの？」という数字を「最大勝ち点」として、その順序に並べることもできます。
「チーム並び順」のプルダウンを、「最新の最大勝ち点順」にしてみてください。
独走してるように見える川崎に、肉薄してるのはどこなのか、その差はどれくらいなのか、が分かり易くなったと思いませんか？
Jリーグの現在のルール (大会概要) に準じて、下記の比較を行っています。
反則ポイントは現状入手していないので、比較対象としていません。
- 勝ち点 (最大勝ち点を指定している場合は、「最大勝ち点」「勝ち点」の順)
- 得失点差
- 総得点数
リーグで次に適用する「当該チーム間の対戦成績（イ：勝点、ロ：得失点差、ハ：総得点数）」は、現在は実装しておらず、前年度の成績を元にソートしています。
「最新の勝ち点」「最新の最大勝ち点」を選ぶと、過去の情報に遡っても並び順は最新の値を元に行います。
つまり、「今の順位のままで過去の勝ち点状況などを見比べる」時にご利用ください。
この勝ち点積み上げ方式は、これまでの対戦、ここからの対戦を見るための面白いスタイルだと思いますが、残念ながら各チームの負け試合がみえなくなります。(勝ち点0なんで仕方ない)
その分は、チーム名のところにマウスを置く (タッチパネルであれば長押しをする) ことで、下記のような表示を行います。
どんな試合で、どんな点差で負けたっけ、みたいな振り返りにどうぞ。(見たくない時もあるかもしれませんが)
敗戦情報の上に、最新または表示時点の、勝ち点、最大勝ち点、得点、失点、得失点差などチームの成績情報を表示させています。
グラフは多くのチームの比較には役立つかもしれませんが、何勝したのか、いくつ引き分けたのかは、パッと見分かりにくい点が欠点です。
なので、数字で知りたい時はこちらをご覧ください。
総得点、総失点などもこちらに表示しています。
チーム並び順が「最新の～」の時には、成績情報も最新状態のものです。
チーム並び順が「表示時の～」の時には、成績情報も表示している時点の成績です。
表示も、開幕前から最終節まで (もちろん、まだやってない試合の結果は未定のままです) スライダーで戻してみることもできます。
一応、過去のデータも拾ってきているけども、2003年より前は勝ち点計算も違うし延長戦もあるので、この辺の順位計算はまだうまく実装できてませんので、あしからず。
表示日程の調整は、各シーズンの試合日ごとに一目盛りとなっていて、この日の午後と夜とを比べる、ということは現状ではできません。
必要なら考えますけど、どうですかね。(ちょっと細かすぎるかなと思ってます)
スライダーで一目盛りずつ調整するのが大変なので、左右のボタン 【＜】と【＞】で一つずつずらすこともできます。
(でも、描画に秒単位くらいはかかる時があるので、ばんばん押しても細かく追従できないかもしれません)
今日の状態 (過去のシーズンデータの場合は最終節の状態) に戻したい時は、「最新の状態にリセット」ボタンを押してください。
グラフの上下は、新しいものが上か下かを選べます。
一応、節数順に並べることもできますが、歯抜けばかりであまり比べやすくはないですね。
J2, J3のデータもそろえています。
ただ、各クラブの背景色は作者が勝手に各Webページから拾ってきた色を配色しているので、
「これはうちのクラブの色じゃない！」と言うこともあると思います。
そういう時は、このGithubのIssueなどでお知らせいただくと助かります。
近いうちに、この色合いやグラデーションなどを編集する簡単なUIを作って、編集できるようにしたいなと思っています。
いい設定ができたら、お知らせいただければ幸いです。
Jリーグについては、1993年の開幕以降すべての試合データを取得済みです。
一時期に実施していた前期後期制の時期や、2026の秋春制移行期の百年構想リーグなどは複数グループに分けてそれぞれを1シーズンとしてグラフ化できます。
仮想的な表示として、1年単位で全試合を同じリーグであると想定したグラフも作ったりしているので、ご興味があれば選択してみてください。(その年の年号のみをシーズンとして選択)
各シーズンで採用される、PK勝ちやゴールデンゴールなどの特殊ルールも、少しずつ対応していく予定です。
どのカテゴリを見てるか、どんな順序で見ているか、などはブラウザのクッキーを使って覚えています。
他に、下の方には
- 余白の色設定
- 未実施試合の色合いの濃さ
- グラフ領域の拡大・縮小
などが変えられるようになっていますが、これもクッキーで覚えています。
元の状態に戻したい時は、「ブラウザで覚えた状態をリセット」ボタンを押してくださいね。
その状態でブラウザを閉じれば、変なクッキーは残らないはず。
Jリーグのデータは、Jリーグのサイトで公開される https://www.jleague.jp/match/section/j1/1/ などから、その他ユースリーグなどはJFAの試合情報 https://www.jfa.jp/match/takamado_jfa_u18_premier2025/east/match/schedule.json などから取得しています。
ACLのデータは、Yahoo スポーツナビさんのhttps://soccer.yahoo.co.jp/jleague/category/acl/schedule/ から取得しています。
設定しているのはこの設定ファイル config/jleague.yaml / config/jfamatch.yaml
変換した結果はこちらです。docs/csv/
各節の試合終了後 (あるいは日本時間深夜) にスクリプトで取得しています。
データ化、公開してくださる皆様に感謝します。
いずれもオープンなニュースとしての情報で、著作物ではない情報という理解でいますが、問題がありましたら取得先、取得方法を見直します。
わたしがこの方式を見かけたのは2021年の春なんですが、ミネ月 (id:mineja) さんは少なくとも2016年4月にはこのスタイルを確立されています。 (もっと古いかもしれません)
https://jalanjalansepakbola.hatenadiary.com/entry/2016/04/11/165521
直接的には、5chのフロンターレスレで流れていたのを見たのがきっかけになりました。
先人達の工夫に敬意を表します。
天皇杯やルヴァンカップなどのノックアウト形式の試合は、勝ち点グラフではなくトーナメント形式で表示できます。 ページ上部の「大会」プルダウンから対象大会を選ぶと、同じページ内で表示が切り替わります。
勝ち点グラフと同様に、日付スライダーで大会の進行を時系列で追うことができます。
まだ行われていない試合は半透明で表示され、結果が出た試合から順に確定していきます。
主な機能:
- 表示ラウンドの選択 — 表示する開始ラウンドを選べます (例: ラウンド16から / 準々決勝から)
- ズーム — ブラケット全体の拡大・縮小ができます
- H&A (2試合制) — ルヴァンカップなどで採用される2試合合計方式に対応し、各試合のスコアはカードのホバーなどで確認できます
- セクション分割 — 大規模な大会で途中に抽選などが入る場合、グループ別に折りたたみ表示する設定も作っています
ローカルで試すには、このプロジェクトを clone して frontend/ ディレクトリで npm run dev を実行するのが最も簡単です。
(CSVを読み込むためHTTPサーバが必要です。Vite開発サーバがその役割を担います)
これらdocsに置いている例は、GitHub Actionsを使って更新中です。 試合時間に合わせて収集させる時もありますが、多くの場合それほど頻繁にアップデートするようにはしていません。
最新のものを確認したい場合はご自身でこのプロジェクトを clone して、以下のスクリプトを実行してください (uvから pyproject.toml で示すライブラリを準備してpythonを呼ぶ方法を推奨します)
uv run python src/read_jleague_matches.py