Tauri + React + TypeScript

カメラビュー、3Dビュー、設定機能を持つデスクトップアプリケーション

使用技術

フロントエンド

• React ^18
• TypeScript ^5
• Vite ^6
• Tailwind CSS ^3
• Heroicons ^2

バックエンド

• Tauri ^2

開発ツール

• ESLint ^9
• Prettier ^3
• Vitest ^2
• Storybook ^8
• Husky ^9

UI コンポーネント

• DaisyUI ^4

セットアップ

前提条件

• WSL2
  • 設定手順: WSL設定ガイド
• Docker
  • 設定手順: Docker設定ガイド
• VS Code
• Dev Containers拡張機能

クローンからdev containerで開くまでの手順

1. リポジトリをクローン

git clone https://github.com/KTC-Security-Circle/Tooth-Project-App.git
cd Tooth-Project-App

2. VS Codeでプロジェクトを開く

code .

3. Dev Containerで再オープン

   • VS Codeの左下の >< アイコンをクリック
   • 「Reopen in Container」を選択
   • または、コマンドパレット（Ctrl+Shift+P）で「Dev Containers: Reopen in Container」を実行

4. コンテナの起動を待つ（初回は数分かかる場合があります）

5. 依存関係のインストール

npm install

6. 開発サーバーの起動

npm run tauri dev

ディレクトリ構成

.
├── .devcontainer/          # Dev Container設定
│   ├── devcontainer.json
│   ├── docker-compose.yml
│   └── Dockerfile
├── .github/                # GitHub設定
│   ├── config/
│   ├── ISSUE_TEMPLATE/
│   ├── workflows/
│   └── PULL_REQUEST_TEMPLATE.md
├── .husky/                 # Git hooks
├── .storybook/             # Storybook設定
├── .vscode/                # VS Code設定
├── docs/                   # ドキュメント
│   ├── docker.md
│   └── wsl.md
├── public/                 # 静的ファイル
├── src/                    # フロントエンドソース
│   ├── components/         # UIコンポーネント
│   │   ├── layout/
│   │   └── ui/
│   ├── tabs/              # タブページ
│   ├── types/             # TypeScript型定義
│   ├── utils/             # ユーティリティ関数
│   ├── styles/            # スタイルファイル
│   ├── App.tsx            # メインアプリケーション
│   └── main.tsx           # エントリーポイント
├── src-tauri/             # Tauriバックエンド
├── index.html             # HTMLテンプレート
├── package.json           # Node.js依存関係
├── vite.config.ts         # Vite設定
├── tsconfig.json          # TypeScript設定
├── eslint.config.js       # ESLint設定
└── prettier.config.js     # Prettier設定

主な機能

• カメラビュー: カメラ映像の表示
• 3Dビュー: 3D表示機能
• 設定: アプリケーション設定画面

開発コマンド

# 開発サーバー起動
npm run tauri dev

# ビルド
npm run tauri build

# リント
npm run lint

# フォーマット
npm run format

# テスト
npm run test

# Storybook