Jupyter Notebook 版のレート比較機能を GitHub Pages へ移行

[hiramekun]

概要

compare_rating.ipynb で行っていた「複数ユーザーの AtCoder レーティング推移の比較」を、TypeScript + React + Next.js の静的サイトとして再実装し、GitHub Pages で公開できるようにしました。

変更内容

Web アプリ

• Next.js 16 (App Router) / React 19 / TypeScript、output: 'export' による静的書き出し
• AtCoder ID を複数入力して「比較する」を押すと、各ユーザーのレーティング推移を 1 つのグラフに重ねて表示
• 開始日・終了日、または「全期間 / 直近1年 / 直近3年 / 直近5年」で表示期間を絞り込み
• 取得に失敗したユーザーはエラーとして表示し、他のユーザーのグラフはそのまま描画

グラフのデザイン

AtCoder 公式のレーティンググラフ (https://atcoder.jp/users/hiramekun) の canvas を実際に読み取って配色を合わせました。

• レート帯は公式と同じ色（各レート色を不透明度 0.3 で白に重ねた値。notebook の定数と同一）
• Y 軸の目盛りはレート帯の境界に合わせた 400 刻み、罫線・軸も公式に合わせた淡い実線
• 公式は単一ユーザーのため線が灰色だが、複数ユーザーを判別する必要があるため、線とマーカーはユーザーごとの色にした
• マーカーは白い縁線付き。さらにグラフ幅と点数から間隔を見積もり、密集するほど小さく、間隔がほとんど無い場合は描画しない

デプロイ

• master への push で GitHub Pages へ自動デプロイする workflow を追加
• Pull Request では lint / typecheck / build のみ実行し、デプロイはしない
• プロジェクトページ配信のため、CI では NEXT_PUBLIC_BASE_PATH にリポジトリ名を渡して basePath を設定

レビュー時に見てほしい点

• データ取得先: atcoder.jp の /users/<user>/history/json は CORS ヘッダを返さずブラウザから直接取得できないため、AtCoder Problems (kenkoooo.com) が公開しているプロキシを経由しています。この依存を許容するかどうか。
• 旧実装の扱い: compare_rating.ipynb と requirements.txt は削除せず残しています（README に旧実装として記載）。不要であれば削除します。

マージ後に必要な手動設定

リポジトリの Settings → Pages → Build and deployment → Source を GitHub Actions に設定する必要があります。

動作確認

• dev サーバーと、basePath 込みの静的ビルドを /AtCoderRatingGraph/ 配下で配信した状態の両方で確認
• 実データ（hiramekun / sykwer / gasugesu / ijm / veqcc）でグラフ描画・期間絞り込み・存在しない ID のエラー表示を確認、コンソールエラーなし
• デスクトップ幅・モバイル幅（375px）でマーカーの見え方を確認
• npm run lint / npm run typecheck / npm run build がすべて成功

🤖 Generated with Claude Code