2024-12-25

技術スタックとシステム構成

Endra Hubを支えるモダンテクノロジーとアーキテクチャ

採用技術スタック

本プロジェクトでは、開発効率、パフォーマンス、そして将来的な拡張性を考慮し、以下のモダンな技術スタックを採用しています。

⚡ Frontend & Framework

Next.js 14 (App Router) + TypeScript

アプリケーションの基盤には、ReactフレームワークのデファクトスタンダードであるNext.jsを採用しています。特にApp Router機能により、サーバーサイドとクライアントサイドのロジックを効率的に分離し、高速な初期描画を実現しています。また、言語にはTypeScriptを採用し、ハードウェア（センサーデータ）からフロントエンドまで一貫した型定義を用いることで、開発時のバグを大幅に抑制しています。

🎨 UI & Styling

Tailwind CSS + Radix UI

スタイリングにはユーティリティファーストのTailwind CSSを使用し、迅速なUI構築を行っています。また、アクセシビリティに優れたヘッドレスUIライブラリであるRadix UI（Icons含む）を組み合わせることで、美しく、かつ誰にでも使いやすいインターフェースを提供しています。ダークモードやレスポンシブデザインにも完全対応しています。

📊 Visualization

HTML5 Canvas API

ライントレースカーの軌跡やセンサー状態の高頻度な更新（60fps以上）に対応するため、重いDOM操作を避け、HTML5 Canvas APIを用いた直接描画を行っています。これにより、数千点のデータポイントを持つログもスムーズにアニメーション表示することが可能です。

🤖 Embedded System

Raspberry Pi Pico W + MicroPython

エッジデバイス（ライントレースカー）の制御には、安価でWi-Fi機能を内蔵したRaspberry Pi Pico Wを採用。ファームウェアはMicroPythonで記述されており、HTTPリクエストを通じてJSON形式のテレメトリデータをクラウド（Endra Hub）へ送信します。Pythonエコシステムを活用することで、将来的なオンデバイスAIの実装も見据えています。

システムアーキテクチャ

Endra Hubは、IoTデバイスからのデータをリアルタイムに集約し、可視化するハブとして機能します。

graph LR
    Pico[Raspberry Pi Pico W] -->|HTTP POST (JSON)| API[Next.js API Route]
    API -->|Store| State[Global State Manager]
    State -->|Update| UI[Dashboard UI]
  1. データ送信: Pico Wがセンサー値、制御偏差、タイムスタンプを含むJSONデータをPOST送信。
  2. データ処理: Next.jsのAPIエンドポイントがデータを受け取り、サーバーサイドのインメモリステートを更新。
  3. リアルタイム反映: クライアントサイドはそのステートをポーリング（またはWebSocket）で監視し、ダッシュボードを即座に更新します。

通信の最適化

通信プロトコルには、IoT機器で一般的なMQTTではなく、あえてシンプルなHTTPを採用しています。これはプロトタイピングの容易さと、ファイアウォール環境下での通過性を優先したためです。データペイロードは極限まで軽量化され、低帯域な環境でも安定したロギングが可能です。