Zenn
✔️

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

2025/03/20に公開
15
Go
React
TypeScript
Tailwind CSS
todo
tech

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

はじめに

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

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

docker-compose up --build

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

アプリ概要

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

技術スタック

バックエンド

  • Go

フロントエンド

  • React
  • TypeScript
  • TailwindCSS

その他

  • PostgreSQL
  • Swagger (APIドキュメント生成)
  • Docker
  • Air (ホットリロード)
  • react-beautiful-dnd (ドラッグ＆ドロップ)

プロジェクト構成

.
├── 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

  • ドラッグ＆ドロップ: ボードビューでは、タスクをドラッグすることでステータスを変更可能
    ドラッグ.gif

  • 検索機能: タスク名・詳細のキーワードで検索可能
    検索.gif

  • ステータス絞り込み: 複数のステータスでタスクをフィルタリング
    ステータス絞り込み.gif

  • 新規タスク追加: 画面上からタスクを追加可能
    タスク追加.gif

タスク詳細画面

  • タスクの名前、詳細、ステータスを編集可能
    タスク修正.gif

  • 保存/削除機能: 編集内容の保存やタスクの削除が可能（保存後は一覧画面に戻ります）
    タスク削除.gif

デザイン

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

Dockerでの起動方法

  1. Docker Composeを使用して起動

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

    docker-compose up --build

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

アピールポイント

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

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

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

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

まとめ

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

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

15

Discussion

ログインするとコメントできます