【React入門】電卓アプリの作り方を完全解説|初心者でも即実装できる!

プログラミング

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

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

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

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

React開発の準備をしよう

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

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

  • Node.js(https://nodejs.org/ja)
  • npm(Node.jsに含まれています)

確認コマンド:

1
2
node -v
npm -v

Create React Appで環境構築

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

1
2
3
npx create-react-app react-calculator
cd react-calculator
npm start

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

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

実装機能のまとめ

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

使用するReactの技術

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

電卓アプリのコード実装

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
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)の例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.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;
}

よくあるエラーとその対処法

evalの使用によるセキュリティ警告

eval()は便利ですが、実際の開発ではセキュリティ上の懸念があります。
初心者の学習用に限定し、業務用アプリにはmath.jsなどのライブラリを使いましょう。

数式が壊れる

  • 数字と演算子を連続で押すと、意図しない文字列ができることがあります。
  • 状態管理とバリデーション処理を加えることで改善できます。

React電卓アプリから学べること

  • 状態管理(useState)の基礎
  • イベントの流れ(onClick)の処理
  • 条件による処理分岐
  • 簡単なデザインの適用方法

特に、ボタンの繰り返し表示(map)処理は実務でも頻出です。

公的支援リンク・教材紹介

学習支援制度

  • 文部科学省「GIGAスクール構想」:https://www.mext.go.jp/a_menu/other/index_00001.htm

学習に役立つリンク

  • React公式チュートリアル:https://ja.reactjs.org/tutorial/tutorial.html

完成コードまとめ

このアプリでは、App.js内にすべてのコードを記述しています。
今後のステップとしては、コンポーネント分割やより高度な状態管理(useReducer)に進むのがよいでしょう。

まとめ:React電卓は実践力を育てる最短ルート

Reactの電卓アプリは、「使える知識」が詰まった練習題材です。
初心者でも手を動かしながら理解が進み、本格アプリ開発の前段階として最適です。
本記事のコードをベースに、自分だけの電卓に進化させてみましょう。

タイトルとURLをコピーしました