【React入門】電卓アプリの作り方を完全解説｜初心者でも即実装OK！

Reactで「電卓アプリ」を作ることは、状態管理・入力処理・表示の切り替えを総合的に学ぶうえで最適な学習ステップです。
「Reactは学び始めたけれど、実践的なアプリが作れていない…」そんな初心者におすすめの題材です。
本記事では、基本の四則演算ができるReact電卓アプリの作り方を、コード付きでわかりやすく解説します。

React 電卓アプリの作り方を完全解説

結論：電卓アプリでReactの核心をつかめる

Reactの基礎であるuseState、イベント処理、表示の切り替え（条件分岐）などを、まとめて体験できます。
特に、状態とボタンイベントの連動を学べるため、次の応用に繋がる技術がしっかり身につきます。

React開発の準備をしよう

必要なソフトとセットアップ

Reactを始めるためには、以下の準備が必要です。

Node.js（https://nodejs.org/ja）
npm（Node.jsに含まれています）

確認コマンド：

node -v
npm -v

Create React Appで環境構築

以下のコマンドでReact環境を整えましょう。

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

すぐにブラウザでアプリが動くようになります。

電卓アプリに必要な機能一覧

実装機能のまとめ

数字ボタンによる入力
四則演算（+ − × ÷）
計算結果の表示
クリア（AC）機能

使用するReactの技術

useStateによる状態管理
onClickイベントでの入力取得
数式文字列の評価

電卓アプリのコード実装

App.jsにすべて書く簡易構成

import { useState } from "react";
import "./App.css";
function App() {
  const [input, setInput] = useState("");
  const handleClick = (value) => {
    setInput((prev) => prev + value);
  };
  const handleClear = () => {
    setInput("");
  };
  const handleCalculate = () => {
    try {
      setInput(eval(input).toString());
    } catch {
      setInput("エラー");
    }
  };
  const buttons = [
    "7", "8", "9", "/",
    "4", "5", "6", "*",
    "1", "2", "3", "-",
    "0", ".", "=", "+",
  ];
  return (
    <div className="calculator">
      <h1>React電卓アプリ</h1>
      <input type="text" value={input} readOnly />
      <div className="buttons">
        {buttons.map((btn) => (
          <button
            key={btn}
            onClick={
              btn === "=" ? handleCalculate :
              btn === "AC" ? handleClear :
              () => handleClick(btn)
            }
          >
            {btn}
          </button>
        ))}
        <button onClick={handleClear}>AC</button>
      </div>
    </div>
  );
}
export default App;

スタイル（App.css）の例

.calculator {
  max-width: 300px;
  margin: auto;
  text-align: center;
}
input {
  width: 90%;
  font-size: 1.5em;
  margin-bottom: 10px;
}
.buttons button {
  width: 70px;
  height: 50px;
  margin: 5px;
  font-size: 1.2em;
}