Go言語で学ぶWebアプリケーション開発1：[React + Vite + Go]

## はじめに

Go言語は、その高速な実行速度とシンプルな文法から、Webアプリケーション開発に非常に適したプログラミング言語です。  
特にGoは、サーバーサイドのバックエンドやAPIサーバーの構築に高いパフォーマンスを発揮します。  
また、React + Viteなどを使うことで、モダンなフロントエンドも簡単に構築できます。

今回は、Goをバックエンド、React + Viteをフロントエンドにし、簡単なフルスタックアプリの作成手順を解説します。

**対象読者**
- GoでWebアプリを作ったことがない方
- Reactを使ったフロントエンドの連携を体験したい方
- シンプルなフルスタックアプリをで作成してみたい方

**目次**
1. 開発環境の構築
2. バックエンド(Go+Gin)の作成
   - ルーティングの設定
   - CRUD APIの実装
   - CORS対応の設定
3. フロントエンド(React + Vite)の作成
   - Reactプロジェクトのセットアップ
   - フロントエンドからのAPI呼び出し
   - レスポンスの表示
4. 実践：シンプルなToDoアプリの作成
   - バックエンドとフロントエンドの連携
   - Create, Read, Update, Delete (CRUD) 操作の実装

---

## 1. 開発環境の構築

**1.1 GoとGinのインストール**
- Goをインストールしていない場合は、[公式サイト](https://golang.org/dl/)からダウンロードしてください。
- Ginフレームワークをインストールします。

```sh
go get -u github.com/gin-gonic/gin
```

**1.2 React + Viteのインストール**
- Viteを使って、Reactプロジェクトをセットアップします。

```sh
npm create vite@latest react-vite-app --template react
cd react-vite-app
npm install
```

- Viteは、超高速なビルドツールで、Reactの開発体験を向上させます。
- プロジェクトディレクトリに移動して、依存パッケージをインストールします。

---

## 2. バックエンド(Go + Gin)の作成

**2.1 ルーティングの設定**
- Ginフレームワークを使って、RESTful APIのエンドポイントを設定します。

**main.go**
```go
package main

import (
    "github.com/gin-gonic/gin"
    "net/http"
)

type Todo struct {
    ID   int    `json:"id"`
    Task string `json:"task"`
}

var todos = []Todo{
    {ID: 1, Task: "Learn Go"},
    {ID: 2, Task: "Build a Web App"},
}

func getTodos(c *gin.Context) {
    c.JSON(http.StatusOK, todos)
}

func main() {
    router := gin.Default()
    router.GET("/api/todos", getTodos)  // ToDo の一覧取得
    router.Run(":8080")
}
```

- `GET /api/todos`のエンドポイントで、ToDoの一覧を返します。
- ポート`8080`でサーバーを起動します。

**2.2 CORS対応の設定**
ReactアプリからGoバックエンドにAPIを呼び出す際、**CORS（Cross-Origin Resource Sharing）** の設定が必要です。

```go
router.Use(func(c *gin.Context) {
    c.Writer.Header().Set("Access-Control-Allow-Origin", "http://localhost:5173")
    c.Writer.Header().Set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE")
    c.Writer.Header().Set("Access-Control-Allow-Headers", "Content-Type")
    c.Next()
})
```

- Reactアプリは`localhost:5173`で動作するため、CORSヘッダーを設定しています。

---

## 3. フロントエンド(React + Vite)の作成

**3.1 Reactプロジェクトのセットアップ**
- ViteでセットアップしたReactプロジェクトに、**axios**をインストールして、API呼び出しを行います。

```sh
npm install axios
```

**3.2 フロントエンドからの API 呼び出し**
**src/App.jsx**
```jsx
import React, { useEffect, useState } from "react";
import axios from "axios";

function App() {
    const [todos, setTodos] = useState([]);

    useEffect(() => {
        axios.get("http://localhost:8080/api/todos")
            .then((response) => setTodos(response.data))
            .catch((error) => console.error("Error fetching todos:", error));
    }, []);

    return (
        <div>
            <h1>ToDo List</h1>
            <ul>
                {todos.map(todo => (
                    <li key={todo.id}>{todo.task}</li>
                ))}
            </ul>
        </div>
    );
}

export default App;
```

- Reactの`useEffect`フックを使って、Goバックエンドの`GET /api/todos`エンドポイントを呼び出しています。
- レスポンスとして取得したToDoリストを表示します。

---

## 4. 実践：シンプルなToDoアプリの作成

- バックエンド(Go)とフロントエンド(React)を連携して、ToDoアプリを作成します。
- 以下の CRUD操作を実装します。
  - `GET /api/todos`：ToDo一覧の取得
  - `POST /api/todos`：ToDoの新規作成
  - `PUT /api/todos/:id`：ToDoの更新
  - `DELETE /api/todos/:id`：ToDoの削除

---

## まとめ

| 項目 | 説明 |
|------|------|
| **Go + Gin** | 高速なバックエンドの構築に最適なフレームワーク |
| **React + Vite** | 超高速なビルドとモダンなフロントエンド開発環境 |
| **CORS対応** | フロントエンドとバックエンドの連携に必須 |

本記事では、Go + Ginを使ったバックエンドとReact + Viteを使ったフロントエンドを連携させた、シンプルなToDoアプリを作成しました。  
この基本のアプリに、データベース連携や認証機能の追加もすることができるので、基本を忠実に覚えていきましょう！