feature-#18-backend-api

[usamimi39]

概要

• 出し手を選択すると選択した手が表示される
• APIを呼び出し、CPUの出し手と結果が表示される

動かし方

• バックエンドサーバーの起動
  別途janken-backendのReadmeを参照
• pnpm dev

close #18

[Copilot]

Pull Request Overview

This PR adds interactive game functionality to a rock-paper-scissors (janken) game by implementing click handlers and state management. The changes connect the UI to a backend API and display game results dynamically.

• Adds onClick handler to HandSelectButton component
• Implements state management for user hand, CPU hand, and game result
• Integrates API call to fetch game results from backend

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
src/components/HandSelectButton.tsx	Adds onClick prop to enable hand selection interaction
src/app/page.tsx	Implements game logic with state management and API integration

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The API endpoint URL is hardcoded to localhost. Consider using an environment variable (e.g., process.env.NEXT_PUBLIC_API_URL) to make this configurable across different environments.

Suggested change

	const res = await fetch(`http://localhost:1323/janken?u_hand=${hand}`, {
	const apiUrl = process.env.NEXT_PUBLIC_API_URL;
	if (!apiUrl) {
	throw new Error("NEXT_PUBLIC_API_URL environment variable is not set");
	}
	const res = await fetch(`${apiUrl}/janken?u_hand=${hand}`, {

[Copilot]

Missing error handling for the API call. If the fetch fails or returns a non-OK status, the application will crash. Add try-catch block and check res.ok before parsing JSON.

Suggested change

	setCpuHand(data.cpuHand);
	setResult(data.result);
	}
	const fetchAPI = async (hand: Hand) => {
	const res = await fetch(`http://localhost:1323/janken?u_hand=${hand}`, {
	method: "POST",
	});
	const data = (await res.json()) as { cpuHand: Hand; result: string };
	return data;
	if (data) {
	setCpuHand(data.cpuHand);
	setResult(data.result);
	} else {
	setCpuHand(null);
	setResult("API error. Please try again.");
	}
	}
	const fetchAPI = async (hand: Hand) => {
	try {
	const res = await fetch(`http://localhost:1323/janken?u_hand=${hand}`, {
	method: "POST",
	});
	if (!res.ok) {
	throw new Error(`API error: ${res.status} ${res.statusText}`);
	}
	const data = (await res.json()) as { cpuHand: Hand; result: string };
	return data;
	} catch (error) {
	console.error("Failed to fetch API:", error);
	return null;
	}