【React入門】じゃんけんゲームを作って学ぶ！初心者向け実装ガイド

「Reactを学びたいけど、何を作ったらいいか分からない…」という初心者の方へ。
じゃんけんゲームは、Reactの基本であるuseState・イベント処理・条件分岐がすべて詰まった絶好の教材です。
この記事では、誰でも簡単に作れるReactじゃんけんゲームの実装方法を、コード付きで丁寧に解説します。

React じゃんけんゲームの作り方
1. 結論：じゃんけんゲームはReact基礎の宝庫
環境構築と準備
1. 必要なもの
ゲームに必要な基本設計
1. 実装する機能
メインコードの実装手順
1. App.jsの全コード
よくあるつまずきと対処法
1. コンピュータの手が変わらない？
2. 勝敗ロジックが分かりづらい
学習に役立つリンクと教材
完成形コードまとめ
まとめ：楽しく学べる最強の入門アプリ

React じゃんけんゲームの作り方

結論：じゃんけんゲームはReact基礎の宝庫

Reactの状態管理やイベント処理、条件分岐の考え方を、楽しく直感的に学べるのが最大のメリットです。
まずは「Reactの全体像を掴みたい」方に最適です。

環境構築と準備

必要なもの

Node.js（https://nodejs.org/ja）
npm（Node.jsに含まれます）
create-react-app

ターミナルで以下を実行します：

npx create-react-app react-janken
cd react-janken
npm start

ゲームに必要な基本設計

実装する機能

ユーザーが選ぶ「ぐー・ちょき・ぱー」ボタン
コンピュータの手をランダム表示
勝敗の判定
スコア表示（勝ち/負け/あいこ）

メインコードの実装手順

App.jsの全コード

import React, { useState } from "react";
function App() {
  const hands = ["ぐー", "ちょき", "ぱー"];
  const [userHand, setUserHand] = useState("");
  const [cpuHand, setCpuHand] = useState("");
  const [result, setResult] = useState("");
  const [score, setScore] = useState({ win: 0, lose: 0, draw: 0 });
  const judge = (user, cpu) => {
    if (user === cpu) return "あいこ";
    if (
      (user === "ぐー" && cpu === "ちょき") ||
      (user === "ちょき" && cpu === "ぱー") ||
      (user === "ぱー" && cpu === "ぐー")
    ) {
      return "勝ち";
    }
    return "負け";
  };
  const play = (hand) => {
    const cpu = hands[Math.floor(Math.random() * 3)];
    const res = judge(hand, cpu);
    setUserHand(hand);
    setCpuHand(cpu);
    setResult(res);
    setScore((prev) => ({
      win: prev.win + (res === "勝ち" ? 1 : 0),
      lose: prev.lose + (res === "負け" ? 1 : 0),
      draw: prev.draw + (res === "あいこ" ? 1 : 0),
    }));
  };
  return (
    <div style={{ textAlign: "center" }}>
      <h1>Reactじゃんけんゲーム</h1>
      <div>
        {hands.map((h) => (
          <button key={h} onClick={() => play(h)}>
            {h}
          </button>
        ))}
      </div>
      <p>あなたの手：{userHand}</p>
      <p>コンピュータの手：{cpuHand}</p>
      <h2>{result}</h2>
      <p>勝ち：{score.win}　負け：{score.lose}　あいこ：{score.draw}</p>
    </div>
  );
}
export default App;