JavaScript | 1 日 60 分 × 7 日アプリ学習：JavaScript基礎・DOM操作 電卓編

Web APP JavaScript
2026.08.03
スポンサーリンク
スポンサーリンク

1日目のゴールと全体像

1日目のテーマは 「数字ボタンをクリックして、画面に“入力した数字”が表示される電卓の土台を作ること」 です。

いきなり「計算機能全部」を作るのではなく、まずは

  • 数字ボタンをクリックすると
  • 画面の表示が変わる

という 「入力 → 表示」 の流れを体験します。

この中に

  • HTML/CSSとの連携
  • DOM操作
  • イベント処理
  • JavaScript基本文法（変数・代入・関数）

がぎゅっと詰まっています。

電卓アプリのイメージをつかむ

電卓の“最小構成”を考える

1日目で目指すのは、次のようなシンプルな電卓画面です。

  • 上部に「表示エリア」（最初は 0）
  • 下に「数字ボタン（0〜9）」が並んでいる
  • ボタンを押すと、表示エリアにその数字が追加される

まだ「計算」はしません。 「数字を入力して表示する」 ところまでが1日目のゴールです。

HTMLで電卓の“部品”を置く

電卓の枠・表示・ボタンを作る

HTMLは「画面に何を置くか」を決める言語です。 まずは、電卓の枠・表示エリア・数字ボタンを配置します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>電卓アプリ 1日目</title>
    <style>
        /* 画面全体のスタイル */
        body {
            font-family: sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f5f5f5;
        }

        /* 電卓全体の枠 */
        .calculator {
            background-color: #ffffff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            width: 220px;
        }

        /* 表示エリア */
        .display {
            background-color: #222;
            color: #0f0;
            font-size: 24px;
            text-align: right;
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 10px;
        }

        /* ボタンの並び */
        .buttons {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 3列のグリッド */
            gap: 8px;
        }

        /* ボタンのスタイル */
        .btn {
            padding: 10px;
            font-size: 18px;
            cursor: pointer;
            border-radius: 4px;
            border: 1px solid #ccc;
            background-color: #f0f0f0;
        }

        .btn:active {
            background-color: #ddd;
        }
    </style>
</head>
<body>

    <div class="calculator">
        <!-- 表示エリア -->
        <div id="display" class="display">0</div>

        <!-- 数字ボタン -->
        <div class="buttons">
            <button class="btn digit">1</button>
            <button class="btn digit">2</button>
            <button class="btn digit">3</button>
            <button class="btn digit">4</button>
            <button class="btn digit">5</button>
            <button class="btn digit">6</button>
            <button class="btn digit">7</button>
            <button class="btn digit">8</button>
            <button class="btn digit">9</button>
            <button class="btn digit">0</button>
        </div>
    </div>

    <!-- ここにJavaScriptを後で書く -->
    <script>
        // JavaScriptコードは後ほど説明します
    </script>
</body>
</html>

ここで押さえたいポイント

  • id="display" は JavaScriptから表示エリアを特定するための名前
  • class="digit" は 「数字ボタンたち」をまとめて扱うためのグループ名
  • HTMLは「部品を置く」、CSSは「見た目を整える」だけで、 動きはすべてJavaScriptが担当する

JavaScriptの基本文法：表示内容を覚える変数

「今入力されている文字列」を変数で持つ

電卓は「今何が入力されているか」を覚えておく必要があります。 それを JavaScript の 変数 で表現します。

<script>
    // 現在の表示内容を覚えておく変数（文字列）
    let currentInput = '0'; // 最初は「0」からスタート
</script>
  • let → 変数を宣言するキーワード
  • currentInput → 変数の名前
  • '0' → 文字列としての「0」

ここで大事なのは、 「電卓の表示は“文字列”として扱う」 という感覚です。 （計算は後のステップで行います）

DOM操作：表示エリアとボタンをJavaScriptからつかむ

表示エリアを取得する

const displayElement = document.getElementById('display');
JavaScript
  • document → 「今表示しているページ全体」
  • getElementById('display') → 「id が ‘display’ の要素をください」 という命令

数字ボタンをまとめて取得する

const digitButtons = document.querySelectorAll('.digit');
JavaScript
  • querySelectorAll('.digit') → 「class が ‘digit’ の要素を全部ください」

ここで重要なのは、

  • 単一の要素は getElementById
  • 複数の要素は querySelectorAll

という使い分けです。

イベント処理：ボタンが押されたときに表示を変える

「クリックされたらこうする」を書く

数字ボタンがクリックされたときに、 その数字を currentInput に追加し、表示エリアを更新したいですよね。

そのために使うのが イベント処理 です。

digitButtons.forEach(function(button) {
    button.addEventListener('click', function() {
        // クリックされたボタンの文字（例: '1', '2', '3'）を取得
        const digit = button.textContent;

        // 最初が '0' のときは置き換え、それ以外は後ろに追加
        if (currentInput === '0') {
            currentInput = digit;
        } else {
            currentInput = currentInput + digit;
        }

        // 画面の表示を更新
        displayElement.textContent = currentInput;
    });
});
JavaScript

深掘りポイント

  • forEach は 「複数の要素に同じ処理を順番に適用する」 ためのメソッド
  • button.textContent は 「ボタンに書かれている文字」 を取得する
  • currentInput = currentInput + digit; は 「今の文字列の後ろに新しい数字をくっつける」 という処理

ここで、JavaScriptの基本文法が自然に使われています。

  • 変数（let currentInput）
  • 代入（currentInput = ...）
  • 関数（function() { ... }）
  • 配列的な扱い（querySelectorAll で複数要素をまとめて処理）

1日目の完成コード

ここまでの内容をひとつにまとめた「完成版」です。 このままファイルに保存してブラウザで開けば、 数字ボタンを押すと表示が変わる電卓の“入力部分” が動きます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>電卓アプリ 1日目</title>
    <style>
        body {
            font-family: sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f5f5f5;
        }

        .calculator {
            background-color: #ffffff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            width: 220px;
        }

        .display {
            background-color: #222;
            color: #0f0;
            font-size: 24px;
            text-align: right;
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 10px;
        }

        .buttons {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }

        .btn {
            padding: 10px;
            font-size: 18px;
            cursor: pointer;
            border-radius: 4px;
            border: 1px solid #ccc;
            background-color: #f0f0f0;
        }

        .btn:active {
            background-color: #ddd;
        }
    </style>
</head>
<body>

    <div class="calculator">
        <!-- 表示エリア -->
        <div id="display" class="display">0</div>

        <!-- 数字ボタン -->
        <div class="buttons">
            <button class="btn digit">1</button>
            <button class="btn digit">2</button>
            <button class="btn digit">3</button>
            <button class="btn digit">4</button>
            <button class="btn digit">5</button>
            <button class="btn digit">6</button>
            <button class="btn digit">7</button>
            <button class="btn digit">8</button>
            <button class="btn digit">9</button>
            <button class="btn digit">0</button>
        </div>
    </div>

    <script>
        // 現在の入力内容を覚えておく変数（文字列）
        let currentInput = '0';

        // 表示エリアの要素を取得（DOM操作）
        const displayElement = document.getElementById('display');

        // 数字ボタンをまとめて取得（DOM操作）
        const digitButtons = document.querySelectorAll('.digit');

        // すべての数字ボタンに「クリックされたときの処理」を登録
        digitButtons.forEach(function(button) {
            button.addEventListener('click', function() {
                // クリックされたボタンに書かれている数字を取得
                const digit = button.textContent;

                // 最初が '0' のときは置き換え、それ以外は後ろに追加
                if (currentInput === '0') {
                    currentInput = digit;
                } else {
                    currentInput = currentInput + digit;
                }

                // 表示エリアの文字を更新
                displayElement.textContent = currentInput;
            });
        });
    </script>
</body>
</html>

1日目で本当に掴んでほしいこと

1日目でいちばん大事なのは、 「ボタンを押すと、JavaScriptが動いて、画面の表示が変わる」 という体験です。

  • HTMLは「部品を置く」
  • CSSは「見た目を整える」
  • JavaScriptは「動きを作る」
  • DOM操作で「画面の要素」をつかみ
  • イベント処理で「クリックされたときの動き」を書き
  • 変数で「今の入力状態」を覚える

この流れが、 電卓だけでなく、あらゆるWebアプリの基本になります。

2日目以降は、この電卓に

  • クリアボタン（入力をリセット）
  • 演算子ボタン（＋ − × ÷）
  • イコールボタン（計算結果を表示）

を少しずつ追加しながら、 「計算ロジック」と「表示ロジック」を分けて考える力 を育てていきます。

次へ
12
スポンサーリンク
タイトルとURLをコピーしました