初めに
次回の記事
Go + TypeScript構成でチュートリアルWebアプリ作ってみる(2) ~バックエンドにCRUDのAPI作成~
環境構築
// 開発フォルダの作成
mkdir my-project
cd my-project
// バックエンド（Go）のセットアップ
// Goモジュール初期化
mkdir backend
cd backend
go mod init app-backend
// HTTPフレームワークのインストール（例：Gin）
go get -u github.com/gin-gonic/gin
// フロントエンド（TypeScript）のセットアップ
// フォルダ作成＆Node.jsプロジェクト初期化
cd ..
mkdir frontend
cd frontend
npm init -y
// 必要なパッケージをインストール
// TypeScript本体・ビルドツール
npm install typescript vite @vitejs/plugin-react react react-dom
npm install -D @types/react @types/react-dom
// TypeScript初期設定
npx tsc --init
簡単なGoサーバーの作成
backend/main.goの作成
package main
import (
"github.com/gin-contrib/cors"
"github.com/gin-gonic/gin"
)
// 構造体定義
type Task struct {
ID int `json:"id"`
Text string `json:"text"`
}
// 初期タスクの生成
var tasks = []Task{
{ID: 1, Text: "Sample Task"},
}
func main() {
r := gin.Default()
// portが異なるフロントからの接続許可
r.Use(cors.Default())
r.GET("/tasks", func(c *gin.Context) {
c.JSON(200, tasks)
})
// バックは8080で受付
r.Run(":8080")
}
疎通確認
go run ./main.go
localhost:8080/tasks にアクセスしてみて、タスクが表示されればOK
フロントを介して表示してみる
vite.config.ts(ビルドツールの設定ファイル) を作成
frontend/vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// フロントはport3000で受付
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
},
})
Reactのメインコンポーネントを定義
frontend/src/App.tsx
import React, { useEffect, useState } from "react";
// タスクの型定義
type Task = {
id: number;
text: string;
};
export const App = () => {
const [tasks, setTasks] = useState<Task[]>([]);
// バックエンドからタスクのレコードをJSONで取得
useEffect(() => {
fetch("http://localhost:8080/tasks")
.then((res) => res.json())
.then((data) => {
setTasks(data);
})
.catch((err) => {
console.error("API fetch error:", err);
});
}, []);
// ループさせて表示
return (
<div>
<h1>Sample</h1>
<ul>
{tasks.map((task) => (
<li key={task.id}>{task.text}</li>
))}
</ul>
</div>
);
};
Reactアプリのエントリーポイント作成
frontend/src/main.tsx
import React from "react"; // React本体をインポート
import ReactDOM from "react-dom/client"; // DOMレンダリング用APIをインポート
import { App } from "./App"; // Appをインポート
// HTMLファイル内の <div id="root"></div> 要素を取得し、Reactアプリをマウントするためのルートを作成
const root = ReactDOM.createRoot(document.getElementById("root")!);
// App コンポーネントをレンダリング
root.render(<App />);
最初に読み込まれるHTML
frontend/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Sample</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
疎通確認
npx vite
localhost:3000 にアクセスしてみて、バックエンドのタスクが表示されればOK
