React.jsで作成するシンプルな電卓アプリの実装方法

1. プロジェクトのセットアップ: 最初に、React.jsプロジェクトをセットアップする必要があります。Node.jsがインストールされていることを確認し、次のコマンドを使用して新しいReactアプリを作成します。

npx create-react-app calculator-app

2. コンポーネントの作成: アプリのルートディレクトリに移動し、以下のコマンドを使用してCalculatorコンポーネントを作成します。

cd calculator-app
src/App.js

App.jsファイルを開き、以下のコードを追加します。

import React, { useState } from 'react';
function Calculator() {
  const [displayValue, setDisplayValue] = useState('0');
  const handleButtonClick = (value) => {
    if (displayValue === '0') {
      setDisplayValue(value);
    } else {
      setDisplayValue(displayValue + value);
    }
  };
  const handleCalculate = () => {
    try {
      const result = eval(displayValue);
      setDisplayValue(result.toString());
    } catch (error) {
      setDisplayValue('Error');
    }
  };
  const handleClear = () => {
    setDisplayValue('0');
  };
  return (
    <div className="calculator">
      <div className="display">{displayValue}</div>
      <div className="buttons">
        <button onClick={() => handleButtonClick('7')}>7</button>
        <button onClick={() => handleButtonClick('8')}>8</button>
        <button onClick={() => handleButtonClick('9')}>9</button>
        <button onClick={() => handleButtonClick('4')}>4</button>
        <button onClick={() => handleButtonClick('5')}>5</button>
        <button onClick={() => handleButtonClick('6')}>6</button>
        <button onClick={() => handleButtonClick('1')}>1</button>
        <button onClick={() => handleButtonClick('2')}>2</button>
        <button onClick={() => handleButtonClick('3')}>3</button>
        <button onClick={() => handleButtonClick('0')}>0</button>
        <button onClick={() => handleButtonClick('.')}>.</button>
        <button onClick={() => handleButtonClick('+')}>+</button>
        <button onClick={() => handleButtonClick('-')}>-</button>
        <button onClick={() => handleButtonClick('/')}>/</button>
        <button onClick={() => handleButtonClick('*')}>*</button>
        <button onClick={() => handleButtonClick('%')}>%</button>
        <button onClick={handleCalculate}>=</button>
        <button onClick={handleClear}>CE</button>
        <button onClick={handleClear}>C</button>
        <button onClick={() => setDisplayValue(displayValue.slice(0, -1))}>B</button>
      </div>
    </div>
  );
}
export default Calculator;

3. アプリの表示: src/App.jsファイルを開き、以下のコードでAppコンポーネントを更新します。

import Calculator from './Calculator';
function App() {
  return (
    <div className="app">
      <Calculator />
    </div>
  );
}
export default App;

4. スタイルの追加: src/App.cssファイルを開き、以下のスタイリングを追加します。

.calculator {
  width: 300px;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 10px;
}
.display {
  height: 40px;
  background-color: #f5f5f5;
  text-align: right;
  padding: 5px;
  margin-bottom: 10px;
}
.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
}
button {
  height: 40px;
}

5. アプリの実行: 以下のコマンドを使用してアプリを実行します。

npm start

ブログ投稿の続き:

ラウザでアプリが正常に起動すると、シンプルな電卓アプリが表示されます。0から9までの数字ボタン、小数点、四則演算子（+、-、*、/）、パーセント記号（%）、CE（Clear Entry）、C（Clear）、B（Backspace）のボタンが表示されます。

ボタンをクリックすると、handleButtonClick関数が呼び出され、対応する値が表示に追加されます。例えば、「7」ボタンをクリックすると、表示に「7」が追加されます。

「=」ボタンをクリックすると、handleCalculate関数が呼び出され、表示されている式が評価されます。結果が表示されます。評価中にエラーが発生した場合は、「Error」と表示されます。

「CE」ボタンをクリックすると、表示がクリアされます。「C」ボタンをクリックすると、表示と計算結果がクリアされます。「B」ボタンをクリックすると、表示の最後の文字が削除されます。

以上がReact.jsを使用してシンプルな電卓アプリを作成する方法です。このアプリは基本的な機能を備えており、簡単に拡張することができます。