Zenn
😸

Fiberを使ったGoのWebアプリ開発

2024/06/23に公開
Go
Ajax
fiber
tech

はじめに

Go言語のWebフレームワークFiberを使用して、ルーカス数を計算するWebアプリを作成します。簡単なUIとAjax通信を利用して、ユーザーが入力した値に対してバックエンドでルーカス数を計算し、その結果を表示する方法を説明します。

目次

  1. インストール方法
  2. ファイル構成
  3. index.htmlの内容
  4. main.goの内容 (logic設置前)
  5. main.goの内容 (logic設置後)

インストール方法

まず、プロジェクトディレクトリを作成し、Fiberをインストールします。

mkdir myapp
cd myapp
go mod init myapp
go get -u github.com/gofiber/fiber/v2

ファイル構成

次に、プロジェクトのファイル構成を以下のように設定します。

myapp/
├── go.mod
├── go.sum
├── main.go
└── public/
    └── index.html

index.htmlの内容

以下は、ルーカス数を計算するための入力フィールドとボタン、および計算結果を表示するためのHTMLファイルです。

<!DOCTYPE html>
<html>
<head>
    <title>Lucas Number Calculator</title>
</head>
<body>
    <p>AJAX Lucas Number</p>
    <input type="number" id="inputN" placeholder="Enter a number">
    <button onclick="sendRequest()">Calculate</button>
    <div id="result"></div>
    <div id="time"></div>
    <script>
        function sendRequest() {
            const n = document.getElementById('inputN').value;
            fetch('/calculate', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ n })
            })
                .then(response => response.json())
                .then(data => {
                    document.getElementById('result').innerText = `Lucas Number L${n} = ${data.result}`;
                    document.getElementById('time').innerText = `Time: ${(data.process_time / 1000).toFixed(3)} msec`;
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        }
    </script>
</body>
</html>

main.goの内容 (logic設置前)

最初に、静的ファイルを提供する簡単なサーバーをセットアップします。

package main

import (
    "github.com/gofiber/fiber/v2"
)

func main() {
    app := fiber.New()
    // 静的ファイルのホスティング
    app.Static("/", "./public")
    // サーバの起動
    app.Listen(":3000")
}

main.goの内容 (logic設置後)

次に、ルーカス数を計算するロジックと、フロントエンドからのリクエストを処理するエンドポイントを追加します。

package main

import (
    "github.com/gofiber/fiber/v2"
    "strconv"
    "time"
)

// Lucas数を計算する関数
func lucas(n int) int {
    if n == 0 {
        return 2
    }
    if n == 1 {
        return 1
    }
    return lucas(n-1) + lucas(n-2)
}

func main() {
    app := fiber.New()
    // 静的ファイルのホスティング
    app.Static("/", "./public")
    // /calculate エンドポイント
    app.Post("/calculate", func(c *fiber.Ctx) error {
        // リクエストのパース
        var requestData struct {
            N string `json:"n"`
        }
        if err := c.BodyParser(&requestData); err != nil {
            return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{"error": "cannot parse request"})
        }
        // Nの変換
        n, err := strconv.Atoi(requestData.N)
        if err != nil || n < 0 {
            return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{"error": "invalid number"})
        }
        // Lucas数の計算と時間の測定
        start := time.Now()
        result := lucas(n)
        processTime := time.Since(start)
        // レスポンスの作成
        response := fiber.Map{
            "result":      result,
            "process_time": processTime.Microseconds(),
        }
        return c.JSON(response)
    })
    // サーバの起動
    app.Listen(":3000")
}

終わりに

Go言語のFiberフレームワークを使用して、ルーカス数を計算するWebアプリを作成しました。これを通じて、バックエンドのロジックとフロントエンドのUIをAjax通信で連携させる手法が理解できたかと思います。今後は、データベースの導入など、さらに発展させる予定です。

Discussion