ESP32のセンサデータを Next.js + Web Serial でリアルタイム表示した話｜Claude Codeで作る"ブラウザ計器盤"

ESP32のセンサ値を、サーバを立てずにブラウザで直接読みたい。“Web Serial API”とNext.jsで“ブラウザ計器盤”を作ったら、旧来のWebSocket方式より身軽だった話です。

Arduino IDE のシリアルモニタは数字が流れるだけで見づらい。

そこで僕は、ブラウザで動くリアルタイムの計器盤を、Next.js と Web Serial API で作った（開発は Claude Code）。滑空機のテレメトリ（別記事）も、これで可視化している。この記事は、その構成と、これから作る人がハマりやすい点を忖度なしでまとめたものだ。

何を作ったか：ブラウザで見るリアルタイム計器盤

ESP32 を USB でPCに挿し、ブラウザのWebアプリ（Next.js）から Web Serial API で直接シリアル接続して、送られてくるセンサ値をグラフや数値でリアルタイムに表示する"計器盤"を作った。専用アプリを入れなくても、ブラウザを開くだけでデータが見える。

なぜ Web（Next.js + Web Serial）なのか

• インストール不要：URLを開くだけで動く。人に見せる・配るのもラク。

• UIを自由に作れる：React の資産（グラフ・レイアウト）がそのまま使えるので、既製のGUIツールより見た目を作り込める。

• Web Serial API は、ブラウザから直接USBシリアルにつなげる仕組み。マイコンと Web の距離が一気に縮まる。

Claude Code で一気に作った

正直、Web Serial のつなぎ込みや React の UI をゼロから書くのは手間だ。ここは Claude Code に任せて、「シリアルから来たデータをパースしてグラフに流す」までを一気に実装した。ハードの実験に集中したい学生にとって、こういう"周辺のコード"をAIに任せられるのは本当に大きい。

つまずき／これから作る人へ

• 対応ブラウザ：Web Serial は Chrome / Edge 系のみ（Safari は不可）。

• セキュアコンテキスト必須：`localhost` か HTTPS でしか動かない。

• 接続はユーザー操作から：ボタンのクリックなどをきっかけにポートを開く必要がある。

• ESP32 側のボーレートと送信フォーマット（CSV や JSON）を先に決めておくと、受信側のパースがラクになる。

まとめ

ESP32 のデータは、Next.js + Web Serial でブラウザの計器盤にすると一気に見やすくなる。インストール不要で、UIも自由。そして Claude Code を使えば、周辺コードは驚くほど速く用意できる。ハードと Web の両方をやる人には、相性抜群の組み合わせだ。

買い物リスト（今回使っているもの）

▼ ESP32 開発ボード（純正 Espressif ESP32-DevKitC）

WiFi/Bluetooth内蔵で安く、USBで挿せば Web Serial からすぐ繋がる。計器盤づくりの相棒に。

関連記事

▼ 開発デスクの道具・作例を全部まとめています

ESP32で滑空機を飛ばした話（テレメトリの中身） → ESP32 自動制御滑空機

開発を任せているAIツールの使い分け → AI開発ツール（Claude Code ほか）