公開：2026.05.10(日) 12:42
電卓に１文字消すボタンを追加する
打ち間違えた際に１文字削除するための１文字削除(バックスペース)キーを追加してみる。
この機能を実装するには、JavaScriptの文字列操作(Slice)を使う。
VB.NETでは String.Substring や、1文字削る String.Remove に相当。
1. index.html修正
"C"(クリア)ボタンの隣あたりに、バックスペースボタンを追加する。
<button>C</button>
+ <button id="backspace">⌫</button>
<button>=</button>
１文字削除する deleteLastChar メソッドを追加する。
export function deleteLastChar(currentValue) {
// 1文字削った結果を返す
return currentValue.slice(0, -1);
}
3. main.js修正
deleteLastCharメソッドをインポート、button.id=backspace クリック時にdeleteLastCharメソッドを呼び出すように修正する。
import './style.css'
- import { calculate, clearDisplay } from './calculatorLogic.js'
+ import { calculate, clearDisplay, deleteLastChar } from './calculatorLogic.js'
：
buttons.forEach(button => {
button.addEventListener('click', () => {
const value = button.textContent;
+ if (button.id === 'backspace') {
+ display.value = deleteLastChar(display.value);
+ return;
+ }
；
参考(全体ソース)
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Vite 電卓</title>
</head>
<body>
<div id="app">
<!-- ここに電卓のHTMLを貼り付けます -->
<div id="calculator">
<input type="text" id="display" readonly>
<div class="buttons">
<button>7</button><button>8</button><button>9</button><button>/</button>
<button>4</button><button>5</button><button>6</button><button>*</button>
<button>1</button><button>2</button><button>3</button><button>-</button>
<button>0</button>
<button>C</button>
<button id="backspace">⌫</button>
<button>=</button>
<button>+</button>
</div>
</div>
<div id="history-container">
<h3>計算機能</h3>
<ul id="history-list"></ul>
<button id="clear-history">履歴をクリア</button>
</div>
</div>
<script type="module" src="./src/main.js"></script>
</body>
</html>
calculatorLogic.js
// calculatorLogic.js の先頭に必要です
import { evaluate } from 'mathjs';
export function calculate(expression) {
try {
return evaluate(expression); // window.math ではなく直接 evaluate を使う
} catch (error) {
console.error("計算エラー:", error);
return 'Error';
}
}
export function clearDisplay() {
return '';
}
export function deleteLastChar(currentValue) {
// 1文字削った結果を返す
return currentValue.slice(0, -1);
}
main.js
import './style.css'
import { calculate, clearDisplay, deleteLastChar } from './calculatorLogic.js'
const display = document.getElementById('display');
const buttons = document.querySelectorAll('#calculator .buttons button');
// 履歴を表示するulノード
const historyList = document.getElementById('history-list');
// 履歴をクリアするボタン
const clearHistoryBtn = document.getElementById('clear-history');
// 履歴を格納するための historyData配列 を追加
let historyData = [];
buttons.forEach(button => {
button.addEventListener('click', () => {
const value = button.textContent;
if (button.id === 'backspace') {
display.value = deleteLastChar(display.value);
return;
}
if (value === 'C') {
display.value = clearDisplay();
} else if (value === '=') {
// "="の処理で historyData配列 へ値の追加と liノードの追加
const expression = display.value;
const result = calculate(display.value);
if (result !== 'Error') {
historyData.unshift(`${expression} = ${result}`);
renderHistory();
saveHistory();
}
display.value = result;
} else {
display.value += value;
}
});
});
// 履歴クリア処理
function renderHistory() {
historyList.innerHTML = '';
historyData.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
historyList.appendChild(li);
});
}
// 履歴をクリアボタンにイベント登録
clearHistoryBtn.addEventListener('click', () => {
historyData = [];
renderHistory();
});
// ローカルストレージへの保存
function saveHistory() {
// 配列をJSON文字列に変換して保存
localStorage.setItem('calculator-history', JSON.stringify(historyData));
}
// ローカルストレージからの復元
function loadHistory() {
const savedData = localStorage.getItem('calculator-history');
if (savedData) {
// JSON文字列を配列に戻す
historyData = JSON.parse(savedData);
renderHistory();
}
}
// 起動時に実行
loadHistory();
"JavaScript 学習"
