Zenn
⚡

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

2025/03/01に公開
Go
React
tech
Vite
webアプリケーション
tech

はじめに

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アプリを作成しました。
この基本のアプリに、データベース連携や認証機能の追加もすることができるので、基本を忠実に覚えていきましょう！

Discussion