TODOリストアプリケーション

React + Go + MongoDBで構築されたシンプルなTODOリストアプリケーションです。

技術スタック

フロントエンド

• React 18.2
• Axios（HTTP通信）
• CSS3（カスタムスタイリング）

バックエンド

• Go 1.21
• Gorilla Mux（ルーティング）
• MongoDB Driver

データベース

• MongoDB

インフラ

• Docker
• Docker Compose

機能

• ✅ TODOの追加
• ✅ TODOの編集
• ✅ TODOの削除
• ✅ TODOの完了/未完了切り替え
• ✅ 統計情報の表示（全体、完了、未完了の件数）

プロジェクト構造

todolist/
├── docker-compose.yml          # Docker Compose設定
├── backend/                    # Goバックエンド
│   ├── Dockerfile
│   ├── go.mod
│   ├── main.go                # メインAPIサーバー
│   └── models/
│       └── todo.go            # TODOデータモデル
├── frontend/                   # Reactフロントエンド
│   ├── Dockerfile
│   ├── package.json
│   ├── public/
│   │   └── index.html
│   └── src/
│       ├── App.js             # メインアプリケーション
│       ├── App.css
│       ├── index.js
│       ├── index.css
│       └── components/
│           ├── TodoList.js    # TODOリストコンポーネント
│           └── TodoList.css
└── README.md

セットアップと実行

前提条件

• Docker
• Docker Compose

起動方法

1. リポジトリのクローン（または移動）

cd /Users/kimdonghyun/Desktop/workspace/todolist

2. Docker Composeでアプリケーション全体を起動

docker-compose up --build

3. ブラウザでアクセス

• フロントエンド: http://localhost:3000
• バックエンドAPI: http://localhost:8080
• MongoDB: localhost:27017

停止方法

docker-compose down

データベースのボリュームも削除する場合:

docker-compose down -v

API エンドポイント

GET /api/todos

すべてのTODOを取得

レスポンス例:

[
  {
    "id": "507f1f77bcf86cd799439011",
    "title": "買い物に行く",
    "completed": false,
    "createdAt": "2024-01-01T00:00:00Z",
    "updatedAt": "2024-01-01T00:00:00Z"
  }
]

POST /api/todos

新しいTODOを作成

リクエストボディ:

{
  "title": "新しいTODO"
}

PUT /api/todos/{id}

TODOを更新

リクエストボディ:

{
  "title": "更新されたTODO",
  "completed": true
}

DELETE /api/todos/{id}

TODOを削除

開発モード

バックエンドのみ実行（ローカル開発）

cd backend
go mod download
go run main.go

環境変数 MONGO_URI でMongoDB接続文字列を設定できます。

フロントエンドのみ実行（ローカル開発）

cd frontend
npm install
npm start

環境変数 REACT_APP_API_URL でバックエンドURLを設定できます。

トラブルシューティング

ポートが既に使用されている場合

docker-compose.ymlのポート番号を変更してください:

• フロントエンド: 3000 → 任意のポート
• バックエンド: 8080 → 任意のポート
• MongoDB: 27017 → 任意のポート

Dockerコンテナが起動しない場合

1. Dockerが起動しているか確認
2. ログを確認: docker-compose logs
3. コンテナを再構築: docker-compose up --build --force-recreate

ライセンス

MIT

todo-list-with-golang