README.md

Shuiro Frontend

プログラム採点システムのフロントエンドです。

🤖 Tech Stack

• UI Library:
  • React - UI Library
• Routing:
  • TanStack Router - Routing Library
• Data Fetching:
  • TanStack Query - Data Fetching Library
  • OpenAPI TypeScript - OpenAPI Client Generator (used for type-safe API requests)
• Components:
  • shadcn/ui - UI Components
  • Radix UI - Headless UI Components Library
• Styling:
  • Tailwind CSS - Utility-First CSS Framework
• Language:
  • TypeScript - JavaScript with syntax for types
• Runtime, Package Manager, and Task Runner:
  • Bun - JavaScript all-in-one toolkit (used for package management, task running, and more)
  • Node.js - JavaScript runtime (used for running JavaScript code outside of a web browser)
• Other:
  • Lucide - Icons
  • Monaco Editor - Code Editor
  • date-fns - Date Utility Library
  • TanStack Table - Table Library
  • TanStack Form - Form Library
  • Valibot - Validation Library
  • MSW - Mock Service Worker (used for mocking API requests)

Directory Structure

ディレクトリ構成などは、ARCHITECTURE.md を参照してください。

🚀 Development

Prerequisites

Warning

Dev Containerにより開発環境を構築した場合は、以下はすでにインストールされています。

• Node.js
• Bun

それぞれ必要なバージョンは.tool-versionsを参照してください。

Commands

依存関係のインストール

次のコマンドで依存関係をインストールします。

bun install

開発サーバーの起動

次のコマンドで開発サーバーを起動します。frontend ディレクトリに移動してから実行してください。

bun run dev

Note

バックエンドはMSWによりモックされた状態で起動します。

実際のバックエンドサーバーと通信したい場合は、バックエンドサーバーを起動した後、環境変数VITE_MSW_MOCK=falseを設定して開発サーバーを起動してください。次にその手順を示します。

1. backend ディレクトリに移動し、バックエンドの開発サーバーを起動します。

   cd ../backend
   bun run dev

2. frontend ディレクトリに移動し、フロントエンドの開発サーバーを起動します。

   cd ../frontend
   VITE_MSW_MOCK=false bun run dev

ビルド

次のコマンドでフロントエンドのビルドを行います。

bun run build

テスト

次のコマンドでフロントエンドのテストを行います。

bun run test

リント

次のコマンドでフロントエンドのコードをESLintでリントします。

bun run lint:write

Note

自動修正しない場合は次のコマンドを実行してください。

bun run lint

フォーマット

次のコマンドでフロントエンドのコードをPrettierでフォーマットします。

bun run format:write

Note

フォーマットに従っているかの確認だけを行い、自動修正しない場合は次のコマンドを実行してください。

bun run format