今回は、MySQL(MariaDB)を使ってReactとGo言語を連携させてTodoアプリを作る方法を作ってみました。

アプリ作成の方針

MySQL・Go（バックエンド）・React（フロントエンド）を連携させたTodoアプリの構成は、モダンなフルスタック構成の代表例です。
ここでは、全体像 → 構成 → 実装手順 → コード例の順で分かりやすく解説します。

🧩 全体構成イメージ

[React] ←→ [Go REST API] ←→ [MySQL Database]

React：ユーザーがTodoを追加・削除・完了チェックできるUI

Go：APIサーバー（JSON形式でデータ送受信）

MySQL：Todoデータを永続化

⚙️ 環境構成例

コンポーネント	使用する技術
フロントエンド	React (Vite or CRA)
バックエンド	Go (net/http + gorilla/mux or Gin)
データベース	MySQL
ORM (任意)	GORM（GoのORM)
通信形式	REST API（JSON）

🪜 手順概要

① MySQLセットアップ

createTable.sql

CREATE DATABASE todo_app;
USE todo_app;

CREATE TABLE todos (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    completed BOOLEAN DEFAULT FALSE
);

② Go（バックエンド）側の構築

下記のように、コマンドを入力してパッケージをインストールします。

cd backend
go mod init backend
go get gorm.io/driver/mysql
go get github.com/gorilla/mux
go get github.com/rs/cors
go mod tidy

Go言語のWebサーバ起動は下記のコマンドを実行

go run main.go

ディレクトリ構成例

backend/
 ├── main.go
 ├── go.mod
 ├── handlers/
 │    └── todo.go
 ├── models/
 │    └── todo.go
 └── db/
      └── db.go

1. GORMを使ってDB接続

go get gorm.io/gorm gorm.io/driver/mysql github.com/gorilla/mux cors
db/db.go

db/db.go

package db

import (
	"gorm.io/driver/mysql"
	"gorm.io/gorm"
)

var DB *gorm.DB

func Connect() {
	dsn := "root:password@tcp(127.0.0.1:3306)/todo_app?charset=utf8mb4&parseTime=True&loc=Local"
	database, err := gorm.Open(mysql.Open(dsn), &gorm.Config{})
	if err != nil {
		panic("DB接続に失敗しました: " + err.Error())
	}
	DB = database
}

root:password@tcp(127.0.0.1:3306)/todo_app?charset=utf8mb4&parseTime=True&loc=Local について説明します。
この部分は MySQLに接続するための「DSN（Data Source Name）」 と呼ばれる設定文字列です。
Go（GORMやMySQLドライバ）が「どのサーバーの、どのデータベースに、どんな設定で接続するか」を指定しています。

🔹 ① root:password

ユーザー名とパスワード

root → MySQLのユーザー名（デフォルトの管理者ユーザー）

password → そのユーザーのパスワード

つまり「MySQLにログインするための認証情報」です。

#####🔹 ② @tcp(127.0.0.1:3306)

接続先（ホストとポート）

tcp → TCP接続を使う（MySQLは通常TCPで通信）

127.0.0.1 → ローカル（あなたのPC）を指すIPアドレス

3306 → MySQLの標準ポート番号

つまり「自分のパソコンのMySQLサーバーにTCPで接続する」という意味です。

🔹 ③ /todo_app

データベース名

ここで指定されたデータベースを使います。
この場合は todo_app という名前のデータベースです。

🔹 ④ ?charset=utf8mb4&parseTime=True&loc=Local

接続オプション（パラメータ）

パラメータ	意味
`charset=utf8mb4`	MySQLで日本語や絵文字も扱える文字コード設定
`parseTime=True`	DATETIME/TIMESTAMP型を自動的にGoのtime.Time型として扱う
`loc=Local`	タイムゾーンをローカル（日本時間など）に設定

2. モデル定義

models/todo.go

models/todo.go

package models

import "gorm.io/gorm"

type Todo struct {
	gorm.Model
	Title     string `json:"title"`
	Completed bool   `json:"completed"`
}

3. ハンドラー（APIエンドポイント）

handlers/todo.go

handlers/todo.go

package handlers

import (
	"encoding/json"
	"net/http"

	"github.com/gorilla/mux"
	"your_project/db"
	"your_project/models"
)

func GetTodos(w http.ResponseWriter, r *http.Request) {
	var todos []models.Todo
	db.DB.Find(&todos)
	json.NewEncoder(w).Encode(todos)
}

func CreateTodo(w http.ResponseWriter, r *http.Request) {
	var todo models.Todo
	json.NewDecoder(r.Body).Decode(&todo)
	db.DB.Create(&todo)
	json.NewEncoder(w).Encode(todo)
}

func ToggleTodo(w http.ResponseWriter, r *http.Request) {
	params := mux.Vars(r)
	var todo models.Todo
	db.DB.First(&todo, params["id"])
	todo.Completed = !todo.Completed
	db.DB.Save(&todo)
	json.NewEncoder(w).Encode(todo)
}

func DeleteTodo(w http.ResponseWriter, r *http.Request) {
	params := mux.Vars(r)
	db.DB.Delete(&models.Todo{}, params["id"])
	w.WriteHeader(http.StatusNoContent)
}

4. `main.go` にルーティング設定

main.go

package main

import (
	"log"
	"net/http"

	"github.com/gorilla/mux"
	"github.com/rs/cors"

	"your_project/db"
	"your_project/handlers"
	"your_project/models"
)

func main() {
	db.Connect()
	db.DB.AutoMigrate(&models.Todo{})

	r := mux.NewRouter()
	r.HandleFunc("/todos", handlers.GetTodos).Methods("GET")
	r.HandleFunc("/todos", handlers.CreateTodo).Methods("POST")
	r.HandleFunc("/todos/{id}", handlers.ToggleTodo).Methods("PUT")
	r.HandleFunc("/todos/{id}", handlers.DeleteTodo).Methods("DELETE")

	handler := cors.AllowAll().Handler(r)
	log.Println("Server running on :8080")
	log.Fatal(http.ListenAndServe(":8080", handler))
}

③ React（フロントエンド）側

npm create vite@latest frontend -- --template react
cd frontend
npm install axios
npm run dev

src/App.jsx

src/App.jsx

import { useEffect, useState } from "react";
import axios from "axios";

const API_URL = "http://localhost:8080/todos";

export default function App() {
  const [todos, setTodos] = useState([]);
  const [title, setTitle] = useState("");

  useEffect(() => {
    axios.get(API_URL).then((res) => setTodos(res.data));
  }, []);

  const addTodo = async () => {
    const res = await axios.post(API_URL, { title });
    setTodos([...todos, res.data]);
    setTitle("");
  };

  const toggleTodo = async (id) => {
    const res = await axios.put(`${API_URL}/${id}`);
    setTodos(todos.map((t) => (t.id === id ? res.data : t)));
  };

  const deleteTodo = async (id) => {
    await axios.delete(`${API_URL}/${id}`);
    setTodos(todos.filter((t) => t.id !== id));
  };

  return (
    <div style={{ maxWidth: 400, margin: "auto" }}>
      <h1>Todo List</h1>
      <input value={title} onChange={(e) => setTitle(e.target.value)} />
      <button onClick={addTodo}>追加</button>

      <ul>
        {todos.map((todo) => (
          <li key={todo.ID}>
            <span
              onClick={() => toggleTodo(todo.ID)}
              style={{
                textDecoration: todo.completed ? "line-through" : "none",
                cursor: "pointer",
              }}
            >
              {todo.title}
            </span>
            <button onClick={() => deleteTodo(todo.ID)}>削除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

🚀 実行手順まとめ

MySQL起動 → CREATE DATABASE todo_app;

Goサーバー起動 → go run main.go

React起動 → npm run dev

ブラウザで http://localhost:5173
にアクセス
→ Todoアプリ完成🎉

Go言語関連

サイト