【初心者向け】ウェブ電卓アプリを作ってみよう！コピペで動く計算機開発入門

PythonをコマンドプロンプトやPowerShellでPC上で動かすには、Pythonをダウンロードしてインストールする必要があります。
まだの方はPythonのインストールと開発環境の構築の記事を参考にして、Pythonをインストールしてください。

「プログラミングを始めたけど、何を作ればいいかわからない…」

こんにちは！ほんの数ヶ月前まで、皆さんと同じようにプログラミング知識ゼロだった筆者です。AIの助けを借りながら、なんとか自力でWebサイトを2つ立ち上げる中で痛感したのは、「とにかく何かを作って、動かす体験が一番の近道だ！」ということでした。

そこで今回は、プログラミング学習の第一歩として非常に人気のある「電卓アプリ」を、ウェブ技術（HTML, CSS, JavaScript）を使って一緒に作ってみたいと思います。この記事のゴールはただ一つ。

あなたに「コピペするだけで、ブラウザでちゃんと動くアプリが作れた！」という成功体験をしてもらうことです。

専門用語は極力かみ砕いて解説していきます。さあ、一緒にものづくりの世界を楽しみましょう！

完成するウェブ電卓アプリのスクリーンショット — この記事を終える頃には、こんな電卓アプリがあなたのブラウザで動きます！

ステップ1: HTMLで計算機の骨格を作ろう

まずは、計算機の構造となる部分をHTMLで作成します。HTMLはウェブページの「骨格」を定義する言語です。表示画面やボタンといった部品を配置していきましょう。

以下のHTMLコードが、計算機の全ての部品を定義しています。

<!-- HTML: 計算機の骨格を定義します -->
<div class="calculator">
    <input type="text" class="display" id="display" readonly>
    <div class="buttons">
        <button onclick="clearDisplay()" class="clear">C</button>
        <button onclick="appendToDisplay('/')" class="operator">/</button>
        <button onclick="appendToDisplay('*')" class="operator">*</button>
        <button onclick="deleteLast()" class="operator">⌫</button>
        
        <button onclick="appendToDisplay('7')">7</button>
        <button onclick="appendToDisplay('8')">8</button>
        <button onclick="appendToDisplay('9')">9</button>
        <button onclick="appendToDisplay('-')" class="operator">-</button>

        <button onclick="appendToDisplay('4')">4</button>
        <button onclick="appendToDisplay('5')">5</button>
        <button onclick="appendToDisplay('6')">6</button>
        <button onclick="appendToDisplay('+')" class="operator">+</button>

        <button onclick="appendToDisplay('1')">1</button>
        <button onclick="appendToDisplay('2')">2</button>
        <button onclick="appendToDisplay('3')">3</button>
        <button onclick="calculateResult()" class="operator" style="grid-row: span 2;">=</button>

        <button onclick="appendToDisplay('0')" style="grid-column: span 2;">0</button>
        <button onclick="appendToDisplay('.')">.</button>
    </div>
</div>

コードの解説

<div class="calculator">: 計算機全体を囲む大きな箱です。
<input type="text" id="display" readonly>: 数字や結果を表示する画面です。readonly属性で、キーボードから直接入力できないようにしています。
<div class="buttons">: 全てのボタンをまとめるための箱です。
<button onclick="...">: クリックできるボタンです。onclick属性には、ボタンが押されたときに実行するJavaScriptの関数（後で作成します）を指定します。

この時点では、まだデザインも機能もない、ただの部品の集まりに見えます。

ステップ2: CSSで見た目をデザインしよう

次に、CSSを使って見た目をかっこよくデザインします。CSSはウェブページの「見た目」を装飾する言語です。HTMLで作った骨格に、色やレイアウトを加えていきましょう。

以下のCSSコードが、計算機のデザインを定義しています。

/* CSS: 計算機の見た目を整えます */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #333;
}
.calculator {
    background-color: #444;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
.display {
    width: 100%;
    height: 70px;
    background-color: #222;
    color: white;
    font-size: 2.5em;
    /* ...その他のスタイル... */
}
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
button {
    height: 70px;
    font-size: 1.5em;
    border-radius: 10px;
    /* ...その他のスタイル... */
}
.operator {
    background-color: #f0ad4e;
}
.clear {
    background-color: #d9534f;
}

コードの解説

.calculator { ... }: class="calculator"と名付けた箱（計算機全体）のデザインを指定します。
.display { ... }: 表示画面のデザインです。文字を大きくしたり、背景を黒くしたりしています。
.buttons { display: grid; ... }: ここがレイアウトのキモです！display: gridは、ボタンをExcelのセルのような格子状に並べるための強力な機能です。grid-template-columns: repeat(4, 1fr);で「4つの列を等間隔で作成せよ」と命令しています。
.operator や .clear: 特定のクラス名を持つボタンにだけ、特別な色を付けています。

ステップ3: JavaScriptで計算機に命を吹き込もう

最後に、JavaScriptで計算機の「頭脳」を作ります。JavaScriptはウェブページに動きや機能を追加するプログラミング言語です。ボタンが押されたら何をするか、といった具体的な動作を定義します。

// JavaScript: 計算機の頭脳となる部分です
const display = document.getElementById('display');

function appendToDisplay(value) {
    display.value += value;
}

function clearDisplay() {
    display.value = '';
}

function deleteLast() {
    display.value = display.value.slice(0, -1);
}

function calculateResult() {
    try {
        const result = eval(display.value);
        if (result === undefined || result === null || isNaN(result)) {
            display.value = 'Error';
        } else {
            display.value = result;
        }
    } catch (error) {
        display.value = 'Error';
    }
}

コードの解説

const display = ...: HTMLの表示画面の部品を取得し、displayという名前の変数に格納しています。
appendToDisplay(value): 数字や記号のボタンが押されたときに呼ばれ、表示画面の文字列に新しい文字を追加します。
clearDisplay(): 「C」ボタン用。表示画面を空っぽにします。
calculateResult(): 「=」ボタン用。eval()という便利な関数を使って、表示画面にある数式（文字列）を計算し、結果に置き換えます。try...catchは、計算できない数式が入力されたときにエラーを表示するための、おまじないです。

おまけ：完成版コードの全体像と、その「見せ方」

さて、ここまでのHTML, CSS, JavaScriptを一つのファイルにまとめたものが、ブラウザで動く計算機の完成形です。もしあなたがこの素晴らしいコードを誰かに見せたり、ブログで紹介したくなった時のために、「完成版コード」と「それを表示するためのエスケープ済みコード」の両方をご用意しました。

💡 完成品（このまま .html で保存して使う）

このコードを丸ごとコピーしてcalculator.htmlという名前で保存し、ブラウザで開くと、すぐに使える計算機が表示されます。

📜 表示用（ブログなどに貼り付けて見せる）

こちらは上記の完成品コードの<や>を、HTMLで安全に表示できるように変換（エスケープ）したものです。これをブログ記事などの<pre><code>タグの間に貼り付けてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ウェブ電卓</title>
    <style>
        /* CSS: 計算機の見た目を整えます */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #333;
            font-family: sans-serif;
            margin: 0;
        }
        .calculator {
            background-color: #444;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.5);
        }
        .display {
            width: 100%;
            height: 70px;
            background-color: #222;
            color: white;
            text-align: right;
            font-size: 2.5em;
            padding: 10px;
            box-sizing: border-box;
            border: 2px solid #555;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }
        button {
            height: 70px;
            font-size: 1.5em;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            background-color: #e9e9e9;
            color: #333;
            transition: background-color 0.2s;
        }
        button:hover {
            background-color: #ddd;
        }
        .operator {
            background-color: #f0ad4e;
            color: white;
        }
        .operator:hover {
            background-color: #ec9a29;
        }
        .clear {
            background-color: #d9534f;
            color: white;
        }
        .clear:hover {
            background-color: #c9302c;
        }
    </style>
</head>
<body>

    <!-- HTML: 計算機の骨格を定義します -->
    <div class="calculator">
        <input type="text" class="display" id="display" readonly>
        <div class="buttons">
            <button onclick="clearDisplay()" class="clear">C</button>
            <button onclick="appendToDisplay('/')" class="operator">/</button>
            <button onclick="appendToDisplay('*')" class="operator">*</button>
            <button onclick="deleteLast()" class="operator">⌫</button>
            
            <button onclick="appendToDisplay('7')">7</button>
            <button onclick="appendToDisplay('8')">8</button>
            <button onclick="appendToDisplay('9')">9</button>
            <button onclick="appendToDisplay('-')" class="operator">-</button>

            <button onclick="appendToDisplay('4')">4</button>
            <button onclick="appendToDisplay('5')">5</button>
            <button onclick="appendToDisplay('6')">6</button>
            <button onclick="appendToDisplay('+')" class="operator">+</button>

            <button onclick="appendToDisplay('1')">1</button>
            <button onclick="appendToDisplay('2')">2</button>
            <button onclick="appendToDisplay('3')">3</button>
            <button onclick="calculateResult()" class="operator" style="grid-row: span 2;">=</button>

            <button onclick="appendToDisplay('0')" style="grid-column: span 2;">0</button>
            <button onclick="appendToDisplay('.')">.</button>
        </div>
    </div>

    <script>
        // JavaScript: 計算機の頭脳となる部分です
        const display = document.getElementById('display');

        function appendToDisplay(value) {
            display.value += value;
        }

        function clearDisplay() {
            display.value = '';
        }

        function deleteLast() {
            display.value = display.value.slice(0, -1);
        }

        function calculateResult() {
            try {
                // 'eval'は文字列を計算式として評価します。
                // セキュリティ上の懸念から実際のWebサイトでは非推奨ですが、
                // この自己完結した例では簡単で効果的です。
                const result = eval(display.value);
                if (result === undefined || result === null || isNaN(result)) {
                    display.value = 'Error';
                } else {
                    display.value = result;
                }
            } catch (error) {
                display.value = 'Error';
            }
        }
    </script>

</body>
</html>

【初心者向け】ウェブ電卓アプリを作ってみよう！コピペで動く計算機開発入門

ステップ1: HTMLで計算機の骨格を作ろう

コードの解説

ステップ2: CSSで見た目をデザインしよう

コードの解説

ステップ3: JavaScriptで計算機に命を吹き込もう

コードの解説

おまけ：完成版コードの全体像と、その「見せ方」

💡 完成品（このまま .html で保存して使う）

📜 表示用（ブログなどに貼り付けて見せる）

関連テンプレート