Web Bluetooth心拍モニター（React）

---
meta_title: ReactとWeb Bluetooth APIで心拍モニターを接続する方法
meta_description: ReactとWeb Bluetooth APIを使用してリアルタイム心拍モニターウェブアプリを作る方法を学びます。バックエンド不要です。
author: Jane Doe
date: 2024-08-15
tags:
  - React
  - Web Bluetooth
  - IoT
  - HealthTech
  - JavaScript
---

npm create vite@latest heart-rate-monitor -- --template react
cd heart-rate-monitor
npm install
npm run dev

import React, { useState, useRef } from 'react';

const HeartRateMonitor = () => {
  const [heartRate, setHeartRate] = useState(null);
  const [device, setDevice] = useState(null);
  const [status, setStatus] = useState('Disconnected');
  const [error, setError] = useState('');

  // デバイスへのrefを保持して切断クリーンアップを処理
  const deviceRef = useRef(null);

  const connectToDevice = async () => {
    try {
      setStatus('Requesting device...');
      
      // 1. デバイスをリクエスト
      const device = await navigator.bluetooth.requestDevice({
        filters: [{ services: ['heart_rate'] }], // 標準HRサービスUUID
        optionalServices: ['battery_service']    // 後でバッテリーが必要な場合に備えて
      });

      deviceRef.current = device;
      setDevice(device);

      // 2. GATTサーバーに接続
      setStatus('Connecting to GATT Server...');
      const server = await device.gatt.connect();

      // 3. 心拍数サービスを入手
      const service = await server.getPrimaryService('heart_rate');

      // 4. キャラクタリスティックを入手
      const characteristic = await service.getCharacteristic('heart_rate_measurement');

      // 5. 通知を購読
      await characteristic.startNotifications();
      characteristic.addEventListener('characteristicvaluechanged', handleHeartRateChange);

      // 切断を処理
      device.addEventListener('gattserverdisconnected', onDisconnected);
      
      setStatus('Connected');
      setError('');
    } catch (err) {
      console.error(err);
      setError(err.message);
      setStatus('Error');
    }
  };

  const onDisconnected = () => {
    setStatus('Disconnected');
    setHeartRate(null);
    setDevice(null);
  };

  const disconnectFromDevice = () => {
    if (deviceRef.current) {
      deviceRef.current.gatt.disconnect();
    }
  };

  // 解析ロジックのパースルダー（ステップ3）
  const handleHeartRateChange = (event) => {
    console.log("Data received", event.target.value);
  };

  return (
    <div className="monitor-container">
      <h1>Web Bluetooth HR Monitor</h1>
      {error && <p className="error">{error}</p>}
      <p>Status: {status}</p>
      
      {!device ? (
        <button onClick={connectToDevice}>Connect to Heart Rate Monitor</button>
      ) : (
        <button onClick={disconnectFromDevice}>Disconnect</button>
      )}

      {heartRate && <div className="heart-rate">{heartRate} BPM</div>}
    </div>
  );
};

export default HeartRateMonitor;

  const handleHeartRateChange = (event) => {
    const value = event.target.value;
    // valueはDataViewオブジェクト
    
    // 1. フラグを解析（最初のバイト）
    const flags = value.getUint8(0);
    
    // 2. ビット0に基づいてフォーマットを決定
    // (flags & 1)で最初のビットが1かどうかを確認
    const rate16Bits = (flags & 0x1) === 1;
    
    let heartRateMeasurement;
    
    if (rate16Bits) {
      // 16ビット心拍数（オフセット1）
      heartRateMeasurement = value.getUint16(1, true /* littleEndian */);
    } else {
      // 8ビット心拍数（オフセット1）
      heartRateMeasurement = value.getUint8(1);
    }
    
    setHeartRate(heartRateMeasurement);
  };

.monitor-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: sans-serif;
  margin-top: 50px;
}

.heart-rate {
  font-size: 6rem;
  font-weight: bold;
  color: #e74c3c;
  margin: 20px 0;
  animation: pulse 1s infinite;
}

button {
  padding: 10px 20px;
  font-size: 1rem;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #2980b9;
}

.error {
  color: red;
  background: #fee;
  padding: 10px;
  border-radius: 4px;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

// src/components/HeartRateMonitor.jsx
import React, { useState, useRef, useEffect } from 'react';
import './App.css'; // スタイルをここに置いたと仮定

const HeartRateMonitor = () => {
  const [heartRate, setHeartRate] = useState(null);
  const [device, setDevice] = useState(null);
  const [status, setStatus] = useState('Disconnected');
  const [error, setError] = useState('');
  const deviceRef = useRef(null);

  // アンマウント時にクリーンアップ
  useEffect(() => {
    return () => {
      if (deviceRef.current) {
        deviceRef.current.gatt.disconnect();
      }
    };
  }, []);

  const connectToDevice = async () => {
    try {
      setError('');
      setStatus('Searching...');
      
      const device = await navigator.bluetooth.requestDevice({
        filters: [{ services: ['heart_rate'] }]
      });

      deviceRef.current = device;
      setDevice(device);

      device.addEventListener('gattserverdisconnected', onDisconnected);

      setStatus('Connecting...');
      const server = await device.gatt.connect();
      
      const service = await server.getPrimaryService('heart_rate');
      
      const characteristic = await service.getCharacteristic('heart_rate_measurement');
      
      await characteristic.startNotifications();
      characteristic.addEventListener('characteristicvaluechanged', handleHeartRateChange);
      
      setStatus('Connected');
    } catch (err) {
      console.error(err);
      setStatus('Disconnected');
      // 「ユーザーがキャンセル」のエラーを無視
      if (err.name !== 'NotFoundError') { 
         setError('Failed to connect: ' + err.message); 
      }
    }
  };

  const onDisconnected = () => {
    setStatus('Disconnected');
    setHeartRate(null);
    setDevice(null);
    // オプション：自動再接続ロジックはここに記述可能
  };

  const handleHeartRateChange = (event) => {
    const value = event.target.value;
    const flags = value.getUint8(0);
    
    // 最下位ビットをチェックしてフォーマットを決定
    const rate16Bits = (flags & 0x1) === 1;
    let heartRateMeasurement;
    
    if (rate16Bits) {
      heartRateMeasurement = value.getUint16(1, true);
    } else {
      heartRateMeasurement = value.getUint8(1);
    }
    
    setHeartRate(heartRateMeasurement);
  };

  const disconnect = () => {
    if (deviceRef.current) {
      deviceRef.current.gatt.disconnect();
    }
  };

  return (
    <div className="monitor-container">
      <h1>❤️ React HR Monitor</h1>
      
      <div className="status-indicator">
        Status: <strong>{status}</strong>
      </div>

      {error && <div className="error">{error}</div>}

      {heartRate !== null && (
        <div className="heart-rate">
          {heartRate} <span style={{fontSize: '2rem'}}>BPM</span>
        </div>
      )}

      <div className="controls">
        {!device ? (
          <button onClick={connectToDevice}>Scan for Device</button>
        ) : (
          <button onClick={disconnect} style={{backgroundColor: '#e74c3c'}}>
            Disconnect
          </button>
        )}
      </div>
      
      {!navigator.bluetooth && (
        <p className="warning">
          ⚠️ Your browser does not support Web Bluetooth. Try Chrome or Edge.
        </p>
      )}
    </div>
  );
};

export default HeartRateMonitor;