次の記事
GitHub
今回開発したソースコードは次のGitHubで公開している。
1. システム概要
作業・工程の進捗状況をWebブラウザから登録・確認・更新できる簡易工程進捗管理システムを作成する。
本システムは、Web開発技術の学習を主目的とし、以下の技術を使用する。
- フロントエンド：Next.js
- UI：React
- 言語：TypeScript
- バックエンド：ASP.NET Core Web API
- 言語：C#
- ORM：Entity Framework Core
- データベース：PostgreSQL
- API形式：REST / JSON
2. システム構成
ブラウザ
↓
Next.js/React/TypeScript
↓
HTTP/JSON
↓
ASP.NET Core Web API
↓
Entity Framework Core
↓
PostgreSQL
3. 主な機能
3.1 作業一覧
登録されている作業を一覧表示する。
表示項目：
- 作業ID
- 作業名
- 担当者
- ステータス
- 予定日
- 更新日時
3.2 作業登録
新しい作業を登録する。
入力項目：
- 作業名
- 担当者
- ステータス
- 予定日
3.3 作業編集
登録済み作業の内容を変更する。
変更可能項目：
- 作業名
- 担当者
- ステータス
- 予定日
3.4 作業編集
登録済み作業を削除する。
3.5 作業検索
ステータスによる絞り込みを行う。
対象：
- 未着手
- 作業中
- 完了
4. 担当者管理
担当者はマスタとして管理する。
5 ステータス
- 未着手
- 作業中
- 完了
6. DB構成
operators
| カラム | 型 | 内容 |
|---|---|---|
| id | integer | PK |
| name | varcahr(100) | 担当者名 |
| created_at | timestamp | 登録日時 |
tasks
| カラム | 型 | 内容 |
|---|---|---|
| id | integer | PK |
| task_name | varcahr(100) | 作業名 |
| oerator_id | integer | 担当者ID |
| status | integer | ステータス |
| planned_date | date | 予定日 |
| created_at | timestamp | 登録日時 |
| updated_at | timestamp | 更新日時 |
7. API
| 機能 | API |
|---|---|
| 作業一覧取得 | GET /api/tasks |
| 作業詳細取得 | GET /api/tasks/{id} |
| 作業登録 | POST /api/tasks |
| 作業更新 | PUT /api/tasks/{id} |
| 作業削除 | DELETE /api/tasks{id} |
| 担当者一覧取得 | GET /api/operators |
8. 画面構成
作業一覧
URL：
/
機能：
- 作業一覧表示
- ステータス検索
- 新規登録画面への遷移
- 編集画面への遷移
- 削除
作業登録
URL：
/tasks/new
機能：
- 作業名入力
- 担当者選択
- ステータス選択
- 予定日入力
- 登録
作業編集
URL：
/tasks/{id}/edit
機能：
- 現在値表示
- 内容変更
- 更新
9.開発の流れ
フェーズ1：設計
フェーズ2：PostgreSQL + ASP.NET Core
フェーズ3：Next.js / React
フェーズ4：フロント・API接続