# システムモニタの表示

`useSystemMonitor()` を使って、CPU 使用率、メモリ使用率、ネットワーク帯域、バッテリー状態などのシステム情報をリアルタイムに取得します。

## 基本的な使い方

```tsx
import { useSystemMonitor } from "@fluxlay/react";

function Monitor() {
  const { cpuUsage, memoryUsage } = useSystemMonitor();

  return (
    <div style={{ color: "white", padding: 24 }}>
      <div>CPU: {cpuUsage.toFixed(1)}%</div>
      <div>RAM: {memoryUsage.toFixed(1)}%</div>
    </div>
  );
}
```

## CPU コアごとの使用率

```tsx
function CpuPerCore() {
  const { cpuPerCore } = useSystemMonitor();

  return (
    <div style={{ display: "flex", gap: 4 }}>
      {cpuPerCore.map((usage, i) => (
        <div key={i} style={{ width: 8, height: 64, background: "#333", position: "relative" }}>
          <div
            style={{
              position: "absolute",
              bottom: 0,
              width: "100%",
              height: `${usage}%`,
              background: "#0f0"
            }}
          />
        </div>
      ))}
    </div>
  );
}
```

## ポーリング間隔のチューニング

カテゴリごとに異なる間隔を指定できます。よく動く CPU は短く、ほぼ動かないディスク容量は長くするとバッテリーに優しい構成になります。

```tsx
const info = useSystemMonitor({
  cpuIntervalMs: 500, // 0.5 秒（高頻度）
  memoryIntervalMs: 1000, // 1 秒
  diskSpaceIntervalMs: 60000, // 1 分（低頻度）
  batteryIntervalMs: 30000 // 30 秒
});
```

## バッテリー状態

ノート PC のバッテリー残量と充電状態を取得できます。

```tsx
function Battery() {
  const { batteryLevel, batteryCharging } = useSystemMonitor();

  if (batteryLevel === null) {
    return null; // デスクトップ機ではバッテリー情報なし
  }

  return (
    <div>
      {batteryCharging ? "⚡" : "🔋"} {batteryLevel.toFixed(0)}%
    </div>
  );
}
```

## 注意事項

- 全ての値は最初のサンプルが届くまで `0` または `null` を返します。
- ポーリング間隔を短くしすぎるとバッテリー消費と CPU 負荷が増えます。
- CPU 使用率・メモリ使用率・バッテリー残量は `0.0 – 100.0` のパーセント値です。ディスク I/O・ネットワークは「秒間バイト数」で返されます。

詳細は [useSystemMonitor リファレンス](/ja/studio/developer/reference/sdk/use-system-monitor.md)を参照してください。