はじめに
Go言語の学習をしているものです。Go言語を使ったサーバーサイドのコードからTypeScriptを使ったクライアントサイドのコードにレスポンスとしてJSONデータを送りたかったのですがその際にmap[string]interface{}型のJSONデータを送信する場合があることについて学んだのでそのことを備忘録がてらに投稿します。
また、この記事で紹介するコードはopenweathermap apiを用いたデータのやり取りを想定しています。
GoでJSONデータを送信
Go言語は、JSONエンコーディングとデコーディングのための強力な機能を提供します。GoでJSONを生成する基本的な方法は、json.NewEncoder関数を使用することです。以下に例を示します。
json.NewEncoder(w).Encode(map[string]interface{}{
"temperature": celsius,
"condition": weatherResponse.Weather[0].Description,
})
ここで、map[string]interface{}型を使用しています。この型はGoにおける汎用的なデータ構造で、JavaScriptにおけるオブジェクトと同様にキーと値のペアを保存します。キーは文字列で、値は任意の型のデータを保存できます。
なお、interface{}はGoの"空のインターフェース"で、任意の型の値を受け入れることができます。これにより、map[string]interface{}型は、キーが文字列で値が任意の型のデータを保存できる汎用的なデータ構造となります。この特性により、特定のデータ構造を持たない汎用的なJSONデータを生成してクライアントに返すことが可能となります。
具体的には、Go言語ではインターフェースはメソッドの集合を定義しますが、interface{}はメソッドを一つも持たないインターフェースです。このため、任意の型の値はすべてこのインターフェースを"実装"します。つまり、interface{}は任意の型の値を受け入れることができる一種の"万能型"と言えます。
TypeScriptでJSONデータを受信
クライアントサイドでは、Fetch APIを使ってサーバーからデータを受け取ります。Fetch APIはPromiseベースのAPIで、レスポンスボディを各種フォーマットで読み取るためのメソッドを提供します。JSONデータを受け取る場合は、response.json()メソッドを使います。以下に例を示します。
import React, { useState } from "react";
type WeatherItem = {
temperature: number;
condition: string;
};
export default function Home() {
const [city, setCity] = useState<string>("");
const [weather, setWeather] = useState<WeatherItem | null>(null);
const [error, setError] = useState<string | null>(null);
const getWeatherData = () => {
setWeather(null);
setForecast(null);
setError(null);
fetch(`http://localhost:8080/current-weather?city=${city}`)
.then(response => {
if (!response.ok) {
if (response.status === 404) {
throw Error("そのような都市名は存在しません");
} else {
throw Error(response.statusText);
}
}
return response.json();
})
.then(data => setWeather(data))
.catch(error => setError(error.message));
};
const handleCityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setCity(event.target.value);
};
return (
<div>
<h1>Weather App</h1>
<input type="text" value={city} onChange={handleCityChange} />
<button onClick={getWeatherData}>Get Weather</button>
{error && <div>Error: {error}</div>}
{weather && (
<div>
<h2>Current Weather</h2>
<p>Temperature: {weather.temperature}</p>
<p>Condition: {weather.condition}</p>
</div>
)}
</div>
);
}
response.json()メソッドは、レスポンスボディの内容をJSONとして解析し、その結果をPromiseとして返します。この解析結果（JavaScriptのオブジェクト）は、次の.thenブロックに渡されます。上記の例では、解析したJSONデータをsetWeather関数に渡しています。
このように、Fetch APIとPromiseを組み合わせることで、非同期的にサーバーからデータを取得し、その結果を効率的に処理することができます。
まとめ
この記事では、Go言語とTypeScriptを用いて、サーバーとクライアント間でJSONデータを送受信する方法について解説しました。Go言語のmap[string]interface{}という柔軟なデータ構造を利用することで、任意のJSONデータを生成し、これをサーバーからクライアントへ送信することができます。そして、クライアントサイドではFetch APIを用いて、このデータを非同期に受け取り、適切に処理することができます。