メモ: JavaScript #2：簡単な電卓を作る

公開：2026.05.05(火) 09:13

JavaScriptで簡単な電卓を作る

1. 環境

DockerでNode.js環境を作っておく

2. HTMLの作成

body内に結果を表示するtext(id=display)と、計算ボタンを16個作成する。

<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>=</button><button>+</button>
    </div>
</div>

3. デザイン

index.htmlの <head> タグ内に <style> タグを追加しCSSコードを記述する。

1. body

body {
    display: flex;
    justify-content: center; /* 横方向の中央 */
    align-items: center;    /* 縦方向の中央 */
    height: 100vh;         /* 画面いっぱいの高さ */
    background-color: #f0f0f0;
    margin: 0;
}

2. #calculator (電卓全体)

#calculator {
    background-color: #333;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

3. #display (結果表示欄)

#display {
    width: 100%;
    height: 50px;
    font-size: 24px;
    text-align: right;
    margin-bottom: 10px;
    padding: 10px;
    box-sizing: border-box; /* パディングを含めたサイズ計算 */
    border: none;
    border-radius: 5px;
}

4. .buttons (ボタン全体)

.buttons {
    display: grid;
    /* 4つの列を同じ幅(1fr)で作る */
    grid-template-columns: repeat(4, 1fr); 
    /* ボタン同士の隙間 */
    gap: 10px;
}

5. button (ボタン)

button {
    padding: 20px;
    font-size: 18px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background-color: #eee;
    transition: background-color 0.2s; /* ホバー時のアニメーション */
}
/* マウスが乗った時 */
button:hover {
    background-color: #ddd;
}
/* 計算ボタンなどの色 (左から4つめのボタンの色) */
button:nth-child(4n) {
    background-color: #ff9500;
    color: white;
}

4. JavaScriptコード

index.htmlの </body> の直前に <script> タグを追加しJavaScriptコードを記述する。

<script>
    const display = document.getElementById('display');
    const buttons = document.querySelectorAll('button');

    buttons.forEach(button => {
        button.addEventListener('click', () => {
            const value = button.textContent;

            if (value === 'C') {
                display.value = ''; // クリア
            } else if (value === '=') {
                try {
                    display.value = eval(display.value);
                } catch {
                    display.value = 'Error';
                }
            } else {
                display.value += value; // 数字や記号を連結
            }
        });
    });
</script>

5. 完成

→ JavaScript #3：ライブラリを使ってみる

"JavaScript 学習"

メモ

JavaScript #2：簡単な電卓を作る