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をインストールしていない場合は、公式サイトからダウンロードしてください。
• Ginフレームワークをインストールします。

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

1.2 React + Viteのインストール

• Viteを使って、Reactプロジェクトをセットアップします。

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

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） の設定が必要です。

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呼び出しを行います。

npm install axios

3.2 フロントエンドからの API 呼び出し
src/App.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アプリを作成しました。
この基本のアプリに、データベース連携や認証機能の追加もすることができるので、基本を忠実に覚えていきましょう！