ROBOPOを作るために使っている主な技術を、できるだけ平易に紹介します。
画面を作る技術
| 技術 | 役割 |
|---|
| Next.js 16 | Webアプリの土台。ページの表示や通信を担当 |
| React 19 | 画面の部品（コンポーネント）を組み立てる仕組み |
| TypeScript | 間違いに気づきやすくするための、型付きプログラミング言語 |
| Tailwind CSS 4 | 見た目の装飾を簡単に書ける仕組み |
| DaisyUI 5 | Tailwindをベースにした「ボタン」「カード」などのパーツ集 |
| lucide-react | シンプルで統一感のあるアイコン集 |
データを扱う技術
| 技術 | 役割 |
|---|
| PostgreSQL | 大会・選手・得点などを保存するデータベース |
| Drizzle ORM | プログラムからデータベースへアクセスするための仲介役 |
| node-postgres (pg) | Node.js ↔ PostgreSQL の通信ドライバ |
ログイン・認証
| 技術 | 役割 |
|---|
| Better Auth | ユーザー名・パスワードでのログイン機能を提供。管理者と採点者の両方が使う認証基盤 |
コースエディタで使っている技術
| 技術 | 役割 |
|---|
| @dnd-kit | ドラッグ＆ドロップでミッションを並び替える仕組み |
ビルド・テスト・開発ツール
| 技術 | 役割 |
|---|
| Bun | パッケージ管理・スクリプト実行・単体テスト実行のための高速ツール |
| Biome | コードのスタイルを整える（フォーマッター・リンター） |
| Playwright | 画面テスト（ブラウザ自動操作で E2E テスト） |
| Docusaurus | このマニュアルサイトを作る仕組み |
| mise | 開発環境の各種ツール（bun・ffmpeg など）を一元管理 |
モノレポ構成
ROBOPOのソースコードは1つのリポジトリに複数のプロジェクトが同居する モノレポ 構成です。
| パッケージ | 内容 |
|---|
@robopo/web | メインのWebアプリ（管理画面・採点画面・観戦ページ） |
@robopo/docs | このマニュアルサイト |
リポジトリ