GitHub Copilot でF1テレメトリー可視化システムを作った話
はじめに
この記事では、GitHub Copilot CLI を使用してF1（Formula 1）のテレメトリーデータを可視化するWebアプリケーションを開発した経験を共有します。FastF1 APIを使用し、ドライバーの走行データを詳細に比較できるインタラクティブなシステムを構築しました。
＊まとめあたりの内容を除いて大部分をCopilotに書いてもらっています。必要ない方はSKIPを。
目次
何をしたかったか
背景と目的
F1ファンとして、テレビ中継では見られない詳細なテレメトリーデータを自分で分析したいと考えていました。
(現在F1ドライバーに日本人が１人います。数々のチームメイトに打ち勝ってF1のグリッドに残っている(正確には残っていた)のですが、トップチームへの移籍がなかなか実現されなかったり、ホンダのおかげでF1に残れているなどの意見が散見されあまりにも不遇だと感じたため、結果として目に見える形で残したいと思ったからです。
こんな感じでちょっと調べればわかるものですが)
具体的には：
-
ドライバー間の走行データ比較
- スピード、スロットル、ブレーキング、ギア選択の差
- セクタータイムの詳細比較
-
予選セッション（Q1/Q2/Q3）ごとの分析
- 各セッションでのベストラップ比較
- サーキット上のブレーキポイント可視化
技術的要件
- FastF1 APIの使用（公式F1タイミングデータ）
- copilot CLIの使用
- 2024年・2025年シーズン対応
- 全20人のドライバーから選択可能
- リアルタイムデータ取得
Copilotにお願いした内容と時間
開発プロセスの概要
実際の開発時間：約1.5時間
対話回数：約30回のやり取り
フェーズ1: 基本実装とUI (約40分)
依頼内容
- "FastF1 APIを使ってテレメトリーデータを表示"
- "X軸を読みやすく、サーキットも表示"
- "ドライバーを選択できるように"
実装内容
- FastF1セットアップ、データ取得、Chart.jsで可視化
- サーキットマップ + ブレーキポイント表示
- 20人全ドライバー選択機能
フェーズ2: 機能拡張 (約40分)
依頼内容
- "ブレーキ圧力を詳細に表示"
- "2025年対応、ボタンで自動取得"
- "セクタータイム表示とQ1-Q3選択"
実装内容
- ブレーキ統計表示（圧力データは取得不可と判明）
- APIサーバー実装、リアルタイムデータ取得
- セクタータイム + Q1/Q2/Q3セッション選択
フェーズ3: エラー対応と改善 (約15分)
依頼内容
- "サーバー接続エラーの解決"
- "Q3にいないドライバーのメッセージ表示"
- "時間表示を M:SS.SSS 形式に"
実装内容
- CORS問題解決（file:// → http://）
- ユーザーフレンドリーなエラーメッセージ
- 時間フォーマット修正、Q1-Q3フィルタリング改善
成果物
1. システムアーキテクチャ
f1/
├── server.py # APIサーバー（動的データ取得）
├── fetch_telemetry_dynamic.py # テレメトリー取得スクリプト
├── start_server.sh # サーバー起動スクリプト
├── requirements.txt # Python依存関係
├── docs/
│ ├── index.html # メインWebアプリ
│ ├── telemetry_data.json # テレメトリーデータ
│ └── drivers.json # ドライバー情報
├── cache/ # FastF1キャッシュ
├── QUICKSTART.md # クイックスタート
├── USAGE.md # 詳細使用方法
├── BRAKE_DATA_INFO.md # ブレーキデータ説明
└── README.md # プロジェクト概要
2. 主要機能
(1) インタラクティブUI
選択オプション：
- 年（2024/2025）
- イベント（全レース）
- セッション（Qualifying, Race, Sprint, FP1-3）
- 予選セッション（All/Q1/Q2/Q3）
- ドライバー1 & 2（全20人）
(2) データ可視化
4つのチャート：
- Circuit Map - サーキットレイアウト + ブレーキポイント
- Speed Comparison - 速度比較（km/h）
- Throttle Application - スロットル開度（%）
- Gear Selection - ギア選択パターン
(3) 詳細情報表示
各ドライバーに表示：
- ラップタイム（M:SS.SSS形式）
- セクター1タイム
- セクター2タイム
- セクター3タイム
- ブレーキゾーン数
- 総ブレーキング距離
3. スクリーンショット
メイン画面
サーキットマップ（イメージ）
比較グラフ（イメージ）
!
4. 技術スタック
バックエンド：
- Python 3.13
- FastF1 3.7.0
- pandas
- HTTP Server with API
フロントエンド：
- HTML5/CSS3
- JavaScript (ES6)
- Chart.js 4.x
- Responsive Design
開発ツール：
- GitHub Copilot CLI
- Git
- Virtual Environment (venv)
5. コード例
データ取得（Python）
import fastf1
fastf1.Cache.enable_cache('cache')
# セッション読み込み
session = fastf1.get_session(2024, 'Abu Dhabi', 'Q')
session.load()
# Q3の最速ラップ取得
results = session.results
driver_result = results[results['Abbreviation'] == 'NOR'].iloc[0]
q3_time = driver_result['Q3']
# テレメトリー取得
laps = session.laps.pick_drivers('NOR')
lap = laps[laps['LapTime'] == q3_time].iloc[0]
telemetry = lap.get_telemetry()
# セクタータイム
print(f"S1: {lap['Sector1Time']}")
print(f"S2: {lap['Sector2Time']}")
print(f"S3: {lap['Sector3Time']}")
APIサーバー（Python）
from http.server import HTTPServer, SimpleHTTPRequestHandler
from urllib.parse import urlparse, parse_qs
class F1TelemetryHandler(SimpleHTTPRequestHandler):
def handle_fetch_telemetry(self, parsed_path):
params = parse_qs(parsed_path.query)
year = params.get('year', ['2024'])[0]
driver1 = params.get('driver1', ['VER'])[0]
# ... データ取得処理
時間フォーマット（Python）
def format_time(timedelta_value):
"""MM:SS.SSS形式に変換"""
total_seconds = timedelta_value.total_seconds()
minutes = int(total_seconds // 60)
seconds = total_seconds % 60
return f"{minutes}:{seconds:06.3f}"
# 出力例: "1:22.595"
結果
定量的成果
| 項目 | 詳細 |
|---|---|
| 開発時間 | 約2時間 |
| 対話回数 | 約30回 |
| コード行数 | 約1,500行 |
| ファイル数 | 12ファイル |
| 対応ドライバー | 20人全員 |
| 対応セッション | Q1/Q2/Q3/Race/Sprint/FP1-3 |
定性的成果
1. 完全動作するWebアプリ
✅ すべての要件を実装
- ドライバー選択
- イベント選択
- セッション選択
- リアルタイムデータ取得
- インタラクティブグラフ
✅ ユーザビリティ
- 直感的なUI
- エラーメッセージ表示
- レスポンシブデザイン
2. 学習効果
FastF1 APIの理解
- データ構造の把握
- セッション管理
- テレメトリー取得方法
Web開発スキル
- APIサーバー構築
- CORS問題の解決
- 非同期データ取得
データ可視化
- Chart.jsの活用
- 複数データセット比較
- サーキットマップ描画
3. 実用性
実際のユースケース：
-
予選分析
- Q1/Q2/Q3の進出状況
- セクター別パフォーマンス
- ブレーキングポイント比較
-
ドライバー比較
- チームメイト対決
- マシン性能差の可視化
- 走行スタイルの違い
-
サーキット分析
- コーナー速度
- ストレート最高速
- ブレーキングゾーン
Pros/Cons
Pros（メリット）
1. 開発速度の圧倒的な向上
やはり開発速度は圧倒的ですね。
ドキュメント類の自動生成も魅力的でしょうか。
ドキュメント生成が嫌いな人もcopilotの下書きに手を加える程度であればできる人は多いのではないでしょうか。
Cons（デメリット）
一方で、ブラックボックス的に開発をすることになるので、そもそも実装したい内容がAPIのレスポンスに含まれているか、それが自分の求める精度なのかが確認できていないまま手をつけてしまうといつまで経っても改善してくれないという状況が生まれがちかなと思いました。
また、rmやchmodなどのコマンドを容赦なく使うので、コマンドの意味がわからない人が手をつけてしまうと大変なことが起こる可能性も。
エラーログなどしっかりと指示を出して残すようにしておかないといざという時に何のエラーが出たかわからないみたいなことや、そもそもコードの意味がわからないなどの問題も起きそうかなと思います。
まとめ
総評
GitHub Copilot CLIを使用したF1テレメトリー可視化システムの開発は、大成功でした。
開発効率： ⭐⭐⭐⭐⭐ (5/5)
- 通常6-10時間 → 2時間（70-80%削減）
コード品質： ⭐⭐⭐⭐☆ (4/5)
- ベストプラクティス準拠
- 一部調整が必要
学習効果： ⭐⭐⭐⭐⭐ (5/5)
- 新API習得
- 実践的なデバッグ
ユーザビリティ： ⭐⭐⭐⭐⭐ (5/5)
- 直感的UI
- エラーメッセージ充実
特に良かった点
-
爆速開発
- プロトタイプ → 完成品が1日で
- 試行錯誤の時間削減
-
学びながら開発
- FastF1 APIを習得
- Copilotの説明で理解促進
-
高品質な成果物
- プロダクションレベル
- ドキュメント完備
改善の余地
-
環境設定の自動化
- Docker化
- 依存関係の明確化
-
テストの追加
- ユニットテスト
- E2Eテスト
-
パフォーマンス最適化
- データキャッシング
- 圧縮
おすすめできる人
✅ こんな人におすすめ：
- プロトタイプを素早く作りたい
- 新しいAPIを試したい
- Web開発の学習中
- データ可視化に興味
- 個人プロジェクト
⚠️ 注意が必要な人：
- 100%の精度が必要
- セキュリティクリティカル
- 大規模システム
- チーム開発（コードレビュー必須）
今後の展開
追加予定機能：
- レースデータの比較
- タイヤ戦略の可視化
- 天候データの統合
- 複数ラップの比較
- 3Dサーキットビュー
技術改善：
- TypeScriptへの移行
- Reactでの再実装
- リアルタイムストリーミング
- モバイルアプリ化
メッセージ
角田は速い！2026年も頑張ってほしい！
(GitHub Copilot CLIは、アイデアを形にするスピードを劇的に向上させるツールです。
完璧ではありませんが、適切に使えば開発効率を大幅に改善できます。)
重要なのは：
- Copilotを道具として使う（依存しすぎない）
- 生成コードを理解する（ブラックボックスにしない）
- 段階的に機能追加（小さく始める）
この記事が、皆さんのCopilot活用の参考になれば幸いです！
参考リンク
タグ： #GitHubCopilot #F1 #FastF1 #データ可視化 #Python #WebDev #テレメトリー
作成日： 2024-12-20
更新日： 2024-12-20
