Go✖️React✖️TypeScript✖️TailwindCSSでTODOアプリ作ってみた

この記事では、GolangバックエンドとReactフロントエンド（TypeScript, TailwindCSS）を使ったシンプルなTODOアプリを紹介します。  
Dockerで全コンポーネントが完結しており、SwaggerによるAPIドキュメント、Airによるホットリロードも実装。  
リポジトリはGitHubに公開しているので、クローンするだけであなたの環境で動作させることができます！

## はじめに

https://github.com/urakawa-jinsei/todo-app

リポジトリをクローンし、以下のコマンドを実行するだけで、すぐにアプリが動作します：

```bash
docker-compose up --build
```

ブラウザで [http://localhost:3000](http://localhost:3000) にアクセスしてください。

## アプリ概要

このTODOアプリは、シンプルなタスク管理システムです。  
タスクの一覧表示、詳細編集、ドラッグ＆ドロップでのステータス変更など、日々のタスク管理に必要な機能がコンパクトに実装されています。

## 技術スタック

### バックエンド
- **Go**  
  ![Golang](https://img.shields.io/badge/Golang-1.22-blue)

### フロントエンド
- **React**  
  ![React](https://img.shields.io/badge/React-18.2.0-blue)
- **TypeScript**  
  ![TypeScript](https://img.shields.io/badge/TypeScript-4.9.5-blue)
- **TailwindCSS**  
  ![TailwindCSS](https://img.shields.io/badge/TailwindCSS-3.2.7-blue)

### その他
- **PostgreSQL**  
  ![PostgreSQL](https://img.shields.io/badge/PostgreSQL-15-blue)
- **Swagger** (APIドキュメント生成)
- **Docker**  
- **Air** (ホットリロード)
- **react-beautiful-dnd** (ドラッグ＆ドロップ)

## プロジェクト構成

```plaintext
.
├── backend
│   ├── Dockerfile
│   ├── controllers
│   ├── db.sql
│   ├── go.mod
│   ├── go.sum
│   ├── main.go
│   ├── models
│   └── tmp
├── docker-compose.yaml
├── docs            # Swaggerなどのドキュメントを配置（必要に応じて）
└── frontend
    ├── Dockerfile
    ├── package.json
    ├── public
    ├── src
    └── tsconfig.json
```

## API仕様

| URL          | メソッド | 説明                |
|--------------|----------|---------------------|
| `/tasks`     | GET      | タスク一覧取得      |
| `/tasks`     | POST     | 新規タスク作成      |
| `/tasks/{id}`| PUT      | タスク更新          |
| `/tasks/{id}`| DELETE   | タスク削除          |

※ 詳細なAPI仕様はSwagger UIで確認できます。

## 機能紹介

### タスク一覧画面
- **ビュー切替**: テーブルビューとボードビューをURLのクエリパラメータで切り替え可能
![画面切り替え.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3337464/bcad4554-d343-4f5c-afd1-ace6c3e07fcc.gif)

- **ドラッグ＆ドロップ**: ボードビューでは、タスクをドラッグすることでステータスを変更可能
![ドラッグ.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3337464/cf69c022-e2cb-4428-9cc7-c8ef208fefc0.gif)

- **検索機能**: タスク名・詳細のキーワードで検索可能
![検索.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3337464/8140e8c2-4c47-4c5a-8c09-a2d86944425a.gif)

- **ステータス絞り込み**: 複数のステータスでタスクをフィルタリング
![ステータス絞り込み.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3337464/1699441f-9792-4958-a90a-fafb41b60815.gif)

- **新規タスク追加**: 画面上からタスクを追加可能
![タスク追加.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3337464/63e3cd35-2e5e-49b4-a9d2-4e81c4efac23.gif)

### タスク詳細画面
- タスクの名前、詳細、ステータスを編集可能
![タスク修正.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3337464/fb6b62d7-9a30-40c7-bd22-7f0ed7912240.gif)

- **保存/削除機能**: 編集内容の保存やタスクの削除が可能（保存後は一覧画面に戻ります）
![タスク削除.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3337464/6f18f2c2-d30b-48ac-83a0-a01999eacb8c.gif)

### デザイン
- ボードビューのデザインはNotionを参考に、シンプルかつ直感的なUIを実現
- ステータスはピル型のデザインで表示

## Dockerでの起動方法

1. **Docker Composeを使用して起動**

   プロジェクトルートで以下のコマンドを実行してください：

   ```bash
   docker-compose up --build
   ```

2. **各サービスにアクセス**

   - **フロントエンド**: [http://localhost:3000](http://localhost:3000)
   - **バックエンド API**: [http://localhost:8080](http://localhost:8080)
   - **Swagger UI** : [http://localhost:8081](http://localhost:8081)

## アピールポイント

- **Dockerで完結**  
  すべての環境がDockerコンテナ上で構築され、簡単にセットアップ可能です。

- **ホットリロード**  
  開発効率を高めるため、GolangではAir、React側では標準のホットリロードを採用しています。

- **SwaggerによるAPIドキュメント**  
  APIの仕様をSwagger UIで確認できるため、開発者同士の連携やAPI利用者にとって分かりやすい仕様書を提供します。

- **直感的なUI**  
  テーブルビューとドラッグ＆ドロップ対応のボードビューを備え、ユーザーは使いやすいインターフェースでタスク管理が可能です。

## まとめ

このTODOアプリは、シンプルなコードベースでありながら、実用的なタスク管理機能を提供します。  
Docker環境で完結するため、どなたでも簡単にセットアップでき、技術スタックも最新のものを採用しています。  
ぜひ、GitHubのリポジトリからクローンして、あなたの開発環境で動作確認してください！

GitHub: [https://github.com/urakawa-jinsei/todo-app](https://github.com/urakawa-jinsei/todo-app)