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