速報！PythonとReactで仮想通貨のリアルタイム取引ダッシュボードを作る方法【WebSocket活用】

「仮想通貨の価格変動、リアルタイムで追いたいけど難しそう…」そう思っているあなたに朗報です！🎉

Python・WebSocket・Reactを組み合わせると、ポーリングなしでビビッと動くトレーディングダッシュボードが作れちゃうんですよね。今回はその最小構成をわかりやすく解説します。

Contents

🔧 全体の構成をざっくり理解しよう
🐍 Python：WebSocketで価格データを取得する
⚛️ React：WebSocketでデータをリアルタイム表示
📊 モメンタムシグナルの考え方
まとめ

🔧 全体の構成をざっくり理解しよう

cryptocurrency dashboard / Photo by Rafael Minguet Delgado via Pexels

まず全体像を把握しておきましょう。イメージとしてはこんな流れです。

✅ Python側：Binance の WebSocket API からリアルタイム価格を取得
✅ シグナル生成：モメンタム（勢い）をもとに売買サインを簡易計算
✅ React側：WebSocket でデータを受け取り、画面をリアルタイム更新

ポーリング（定期的にサーバーへ問い合わせる方式）と違い、WebSocket はサーバー側から「変化があったよ！」と通知してくれる仕組みです。だから無駄なリクエストがなくなり、レスポンスも爆速になります。

🐍 Python：WebSocketで価格データを取得する

まずはPython側のコードです。websockets ライブラリを使ってBinanceのストリームに接続します。

# ライブラリのインストール
# pip install websockets asyncio

import asyncio
import websockets
import json

# Binance の WebSocket エンドポイント（BTCUSDTの1秒ティック）
URI = "wss://stream.binance.com:9443/ws/btcusdt@trade"

async def stream_price():
    async with websockets.connect(URI) as ws:
        while True:
            msg = await ws.recv()          # メッセージを受信
            data = json.loads(msg)
            price = float(data["p"])       # 現在価格を取得
            print(f"BTC/USDT: {price}")

asyncio.run(stream_price())

ポイントをまとめるとこんな感じです👇

asyncio + websockets の組み合わせで非同期処理が超シンプルに書ける
data["p"] が約定価格（price）を示すフィールド
接続が切れても再接続ロジックを追加すれば本番運用にも耐えられる

⚛️ React：WebSocketでデータをリアルタイム表示

次はフロントエンドです。ReactのカスタムHookを使うと、WebSocket接続がスッキリ書けます。

// useCryptoStream.js（カスタムHook）
import { useEffect, useState } from "react";

export function useCryptoStream(url) {
  const [price, setPrice] = useState(null);

  useEffect(() => {
    const ws = new WebSocket(url); // WebSocket接続を開く

    ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      setPrice(parseFloat(data.p));  // 価格をStateに保存
    };

    return () => ws.close(); // クリーンアップで接続を閉じる
  }, [url]);

  return price;
}

ここが重要です！useEffect の返り値でちゃんとWebSocketを閉じているのがポイント。メモリリーク防止に必須です。