アマチュア野球選手データベース (Next.js版)

プロジェクト概要

アマチュア野球選手のデータを管理するためのWebアプリケーションです。元のFlaskアプリケーションをNext.jsで再実装したものです。

主な機能

• ユーザー管理

  • ユーザー登録・ログイン機能
  • 管理者権限の設定
  • プロフィール管理

• 選手データ管理

  • 個別選手の登録・編集・削除
  • 一括登録機能（テキストデータからの一括登録）
  • 一括削除機能
  • ドラフト対象年の一括更新

• データ表示・フィルタリング

  • ポジション別フィルタリング
  • 所属区分別フィルタリング
  • ドラフト年度別フィルタリング
  • 各種ソート機能（作成日時、所属区分、ポジション）

技術スタック

• フロントエンド: Next.js 15 (App Router)
• バックエンド: Next.js API Routes
• データベース: PostgreSQL
• ORM: Prisma
• スタイリング: Tailwind CSS
• 言語: TypeScript
• 認証: NextAuth.js (予定)

セットアップ手順

1. リポジトリのクローンと依存関係のインストール

git clone [リポジトリURL]
cd draft-database-nextjs
npm install

2. 環境変数の設定

.env.exampleファイルを.envにコピーし、必要な環境変数を設定します：

cp .env.example .env

.envファイルを編集：

# Database
DATABASE_URL="postgresql://username:password@localhost:5432/draft_database"

# NextAuth.js
NEXTAUTH_SECRET="your-nextauth-secret-key"
NEXTAUTH_URL="http://localhost:3000"

# Supabase (optional)
NEXT_PUBLIC_SUPABASE_URL="your-supabase-url"
NEXT_PUBLIC_SUPABASE_ANON_KEY="your-supabase-anon-key"
SUPABASE_SERVICE_ROLE_KEY="your-supabase-service-role-key"

3. データベースの設定

PostgreSQLにデータベースを作成し、Prismaでマイグレーションを実行します：

# Prismaクライアントの生成
npx prisma generate

# データベースマイグレーション
npx prisma db push

# (オプション) サンプルデータの投入
npx prisma db seed

4. 開発サーバーの起動

npm run dev

アプリケーションは http://localhost:3000 で利用できます。

プロジェクト構造

src/
├── app/                    # App Router
│   ├── api/               # API Routes
│   │   ├── players/       # 選手関連API
│   │   └── auth/          # 認証関連API
│   ├── players/           # 選手関連ページ
│   ├── layout.tsx         # ルートレイアウト
│   └── page.tsx           # ホームページ
├── components/            # Reactコンポーネント
│   ├── PlayerCard.tsx     # 選手カード
│   ├── FilterPanel.tsx    # フィルターパネル
│   └── Layout.tsx         # レイアウトコンポーネント
├── lib/                   # ユーティリティ
│   ├── prisma.ts          # Prismaクライアント
│   ├── auth.ts            # 認証ヘルパー
│   └── types.ts           # 型定義
└── generated/             # Prisma生成ファイル
    └── prisma/

開発ガイドライン

コーディング規約

• TypeScriptを使用し、型安全性を重視
• ESLintとPrettierでコード品質を維持
• コンポーネントは機能ごとに分割
• APIエンドポイントはRESTful設計

データベース操作

• Prismaを使用してデータベース操作を行う
• マイグレーションファイルでスキーマ変更を管理
• 型安全なクエリを記述

スタイリング

• Tailwind CSSを使用
• レスポンシブデザインを考慮
• アクセシビリティを重視

元のFlaskアプリケーションとの違い

改善点

1. 型安全性: TypeScriptによる型チェック
2. パフォーマンス: Next.jsのSSRとSSG機能
3. 開発体験: ホットリロード、自動型生成
4. モダンUI: Tailwind CSSによる洗練されたデザイン
5. API設計: RESTful APIエンドポイント

移行状況

• 基本的なプロジェクト構造
• データベーススキーマ（Prisma）
• 選手一覧表示
• フィルタリング機能
• 認証システム
• 選手登録・編集機能
• 一括操作機能
• 管理者機能

ライセンス

このプロジェクトはMITライセンスの下で公開されています。