Zenn
🚀

Goを使うことになったので簡単に勉強してみた

2024/09/07に公開
Go
tech

goを業務で使用することになったので基本だけ学んでみました。以下の手順で学んでいくと理解できると思います。
どの言語を勉強するときも意識してますがチュートリアルなどは最低限にし、いかに早くアプリ作成まで持っていけるかを考えて勉強しました。文法などは都度調べていっています

やったこと

https://go.dev/tour/welcome/1
web上で実行できるのでまずは環境構築をせずにgoの感覚を掴みたい人はやってみるといいと思います。

https://go.dev/doc/tutorial/
公式チュートリアルです。以下の写真の３つのチュートリアルを行いました。

３つ目のチュートリアルをすることで簡単な感覚がつかめたと思います。ここからは実務や実際の個人開発などで使い方を学んでいこうと思います。

GOでAPIを作成

まずはgoで簡単なAPIを作ってみました。
以下チュートリアル形式になっているので説明に沿ってやっていただければできるかと思います。

1.ディレクトリ作成

任意のディレクトリで以下のコマンドをターミナルで実行してください

mkdir simple-api
cd simple-api

以下のコードでGoモジュールを初期化します。モジュール名は自由に決めてください。

go mod init example.com/simple-api

以下のコードでエディタを開く

code .

2.APIの実装

main.goを以下のコマンドで作成します。

touch main.go

実装は以下のように行います。コードを貼り付けてください。

package main

import (
    "encoding/json"
    "fmt"
    "log"
    "net/http"
)

// レスポンスの構造体
type Response struct {
    Message string `json:"message"`
}

// エンドポイントのハンドラ関数
func helloHandler(w http.ResponseWriter, r *http.Request) {
    // レスポンスの内容を設定
    response := Response{
        Message: "Hello, World!",
    }

    // ヘッダーの設定
    w.Header().Set("Content-Type", "application/json")
    // ステータスコードを設定
    w.WriteHeader(http.StatusOK)

    // レスポンスをJSON形式で返す
    if err := json.NewEncoder(w).Encode(response); err != nil {
        log.Printf("Error encoding response: %v", err)
    }
}

func main() {
    // ルーティングの設定
    http.HandleFunc("/hello", helloHandler)

    // サーバーの開始
    fmt.Println("Starting server on port 8080...")
    if err := http.ListenAndServe(":8080", nil); err != nil {
        log.Fatalf("Error starting server: %v", err)
    }
}

この実装を簡単に説明するとmain関数の中でhttp.HandleFunc("/hello", helloHandler)とルーティングを設定することで、/helloにリクエストが来たときにhelloHandlerを実行するようになっています。そしてこの関数はリクエストが来たときにhello World!を返すというシンプルなものです。あとはそのリスポンスの型の設定や必要なモジュールのインポートを上部分で行っています。

3.実行

このファイルを以下のコマンドで実行します。

go run main.go

するとStarting server on port 8080...と表示されるのでブラウザで以下のURLにアクセスします。

curl http://localhost:8080/hello

以下の写真のように表示されていれば成功です！

これでAPIを作成することができました。

Next.jsと連携してみる

next.jsでこのAPIを使用してみたいと思います。ボタンを押したらリスポンスが表示されるだけの簡単なアプリです。

1.事前準備

まずはnext.jsのアプリの雛形を作りましょう。以下のコマンドを任意のディレクトリで実行してください。

npx create-next-app@latest go-next-app
cd go-next-app

すると以下のように設定をどうするか聞かれるので特にこだわりがなければ以下の写真のように設定してください。

そして作成できたら必要なモジュールをインポートします。

npm install

そしてエディタを開く

code .

以下のコマンドでブラウザで起動しましょう

npm run dev

写真のように表示されていれば成功です。

2.フロントエンド実装

では次はapp/page.tsxを開き、記載されている内容を全て削除して以下のコードを貼り付けてください。（普通のアプリ開発ではあまり褒められたやり方ではないので気をつけてください）

"use client";

import { useState } from 'react';

interface ResponseData {
  message: string;
}

export default function Home() {
  const [message, setMessage] = useState<string>('');

  const fetchMessage = async () => {
    try {
      const response = await fetch('http://localhost:8080/hello');
      const data: ResponseData = await response.json();
      setMessage(data.message);
    } catch (error) {
      console.error('Error fetching message:', error);
      setMessage('Error fetching message');
    }
  };

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
      <h1 className="text-4xl font-bold text-blue-600 mb-6">Go APIからのメッセージを表示</h1>
      <button
        onClick={fetchMessage}
        className="px-6 py-3 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75"
      >
        APIを呼び出す
      </button>
      {message && <p className="mt-4 text-lg text-gray-800">{message}</p>}
    </div>
  );
}

ブラウザで写真のようになっていれば成功です

3.バックエンド実装

バックエンド用のディレクトリを作成します。バックエンド用、フロントエンド用でフォルダを分けてもよかったですが、今回は簡単なアプリなのでgo-next-appの中にgoファイルも入れました。

mkdir go-api

goファイルの作成

touch go-api/main.go

go-apiディレクトリに移動してGoモジュールを初期化します。

cd go-api
go mod init example.com/my-next-app

main.goに先ほど作成したファイルの内容を貼り付ける

package main

import (
    "encoding/json"
    "fmt"
    "log"
    "net/http"
)

// レスポンスの構造体
type Response struct {
    Message string `json:"message"`
}

// エンドポイントのハンドラ関数
func helloHandler(w http.ResponseWriter, r *http.Request) {
    // CORSの設定
    w.Header().Set("Access-Control-Allow-Origin", "*") // CORSを許可
    w.Header().Set("Content-Type", "application/json")

    response := Response{
        Message: "Hello from Go API!",
    }

    if err := json.NewEncoder(w).Encode(response); err != nil {
        log.Printf("Error encoding response: %v", err)
    }
}

func main() {
    // ルーティングの設定
    http.HandleFunc("/hello", helloHandler)

    // サーバーの開始
    fmt.Println("Starting server on port 8080...")
    if err := http.ListenAndServe(":8080", nil); err != nil {
        log.Fatalf("Error starting server: %v", err)
    }
}

この後はまずはgo-next-appディレクトリに戻り、以下を実行します。

npm run dev

そしてターミナルを分割し、go-apiディレクトリに移動します。そして以下を実行します。

go run main.go

next.jsのブラウザに戻り、ボタンを押して写真のように表示されればAPIが実行できています！お疲れ様でした！

Discussion