format_list_bulleted
【JavaScript】JavaScriptの基本的な知識で計算機を作ってみよう
最終更新日時:2020-05-16 02:32:02

JavaScriptはブラウザ上で実行できる言語なのでブラウザ(Google ChromeやSafariなど)があれば環境構築をすることなくプログラムを実行することができます。今回はJavaScriptの基本知識(要素取得、変数、関数、四則演算、条件分岐)を用いてブラウザで動く計算機を作成してみましょう。

今回作成する計算機

まずは今回作成する計算機の動作を確認してみましょう。以下のような動きの計算機を作ります。

計算機の動作

第1項と第2項を代入するためのinputフィールドと算術演算子を指定するためのbuttonが配置され、それぞれを指定してイコールボタンを押すと計算結果が表示される仕組みになっています。また、clear!ボタンを押すと全てのステータスがリセットされ、初期状態に戻ります。さらに、計算の後にイコールボタンを連続して押すと計算結果に次項が計算され続けます。

割り算に関してはブラウザで扱える範囲で小数点を出しましょう。

これらが今回作成する計算機の機能です。今回作成する計算機のコードはcode-databaseのgithubリポジトリに上げてありますので手元で手本のコードを確認したい方はぜひ活用してみてください。

また、実際に動作確認をしてみたい方は下のCodePenでも確認できます。

コードペン

前提知識

作成に入る前に今回の実装に必要な前提知識について説明します。

  • JavaScriptでHTML要素の取得ができる
  • JavaScriptで変数・定数の扱いがわかる
  • JavaScriptで関数の扱いがわかる
  • JavaScriptでイベントハンドリング(onclick)の方法がわかる
  • JavaScriptで四則演算の方法がわかる
  • JavaScriptで条件分岐(if, switch)をする方法がわかる

これらを前提知識としています。

作成の手順

計算機の作成の手順は以下のようにします。

  1. 画面に必要なHTML要素を作成する
  2. jsファイルでHTML要素の要素取得をする
  3. 演算方法を表示する機能を実装する
  4. 二つの数値の計算結果を表示する機能を実装する
  5. 繰り返し計算ができる機能を実装する
  6. 初期化を行う機能を実装する

機能を一つずつ実装していくようにしています。

JavaScriptで計算機を作る

それでは先ほどの手順に則り、計算機を作っていきましょう。

画面に必要なHTML要素を作成する

まずはHTMLで画面に必要な要素を用意します。

タイトル:calculator.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>calculator</title>
</head>
<body>
    <div>
        <input type="text" id="textbox1">
            <div>
                <div id="type">ここに記号が表示されます</div>
                <button>+</button>
                <button>-</button>
                <button>×</button>
                <button>÷</button>
            </div>
    </div>
    <div>
        <input type="text" id="textbox2">
        <button>=</button>
        <button>clear!</button>
    </div>
    <div id="answer">0</div>
    <script src="./calculator.js"></script>
</body>
</html>

上のようなhtmlファイルを用意します。idがついている要素について簡単に以下の表でまとめておきます。

要素役割
div#textbox1第1項を入力する
div#type
選択した演算子が表示される
div#textbox2
第2項を入力する
div#answer
計算結果が表示される

buttonの役割については機能実装の際に説明します。

jsファイルでHTML要素の要素取得をする

続いて上記の4要素をjsファイルで取得しましょう。

タイトル:calculator.js

const textbox1 = document.getElementById("textbox1")
const textbox2 = document.getElementById("textbox2")
const type = document.getElementById("type")
const display = document.getElementById("answer")

jsファイルでの要素の定数名ではid名と一致することがGoogleのスタイルガイドで推奨されているのでそれに則ります。

演算方法を表示する機能を実装する

まずは演算子を選択したら選択した演算子の記号が表示される機能を実装していきます。

タイトル:calculator.html

<button  onclick="sign('+')">+</button>
<button  onclick="sign('-')">-</button>
<button  onclick="sign('×')">×</button>
<button  onclick="sign('÷')">÷</button>

タイトル:calculator.js

let kigou = "";

function sign(btn) {
    let kigou = btn;
    type.innerHTML = btn;
}

htmlファイルのbuttonのそれぞれにonclickでイベントハンドリングをします。sign()とは引数の値をtype内部のhtml要素に入れ込む処理を行います。選択された記号は計算処理を行う関数でも使用するのでグローバル変数にしておきます。JavaScriptでの関数について詳しく知りたい方は「関数の書き方・使い方について解説」を参考にしてみてください！また、グローバル変数についての詳細は「変数や定数・スコープについて解説」がおすすめです！

二つの数値の計算結果を表示する機能を実装する

続いてメインの計算処理を実装しましょう。

タイトル:calculator.html

<div>
    <input type="text" id="textbox2">
    <!-- 追記 -->
    <button onclick="run()">=</button> 
    <button>clear!</button>
</div>

計算処理を行うトリガーとなるのはイコールのボタンなので、イコールボタンにrun()という関数をクリックイベントのハンドラに指定します。

タイトル:calculator.js

let secondNum = 0;
let ans = ''

function run() {
    ans = Number(textbox1.value)
    secondNum = Number(textbox2.value)
    switch (kigou) {
        case "+":
            ans += secondNum;
            break;
        case "-":
            ans -= secondNum;
            break;
        case "×":
            ans *= secondNum;
            break;
        case "÷":
            ans /= secondNum;
            break;
        default:
            ans = 0;
    }
    display.innerHTML = ans;
}

ansという変数にあらかじめ第1項を追加して、switch文でkigouの値によって第2項をansに演算して代入します。そして最後にdisplayに表示させます。

繰り返し計算ができる機能を実装する

繰り返しイコールボタンを押すことで計算が連続してできる機能を追加します。これはイコールボタンを押した際に最初だけ第1項と第2項を足す処理を行い、二回目以降はその際のansの値に第2項の値を演算した後代入していくことになります。したがって二つの状態をisInitという真偽値で表し、isInitがtrueの場合は第1項と第2項を足し、falseの場合はansの値に第2項の値を演算した後代入することにします。コードは以下のようになります。

タイトル:calculator.js

let isInit = true;

function run() {
    //isInitで条件分岐
    if (isInit) {
        ans = Number(textbox1.value)
    }
    secondNum = Number(textbox2.value)
    switch (kigou) {
        case "+":
            ans += secondNum;
            break;
        case "-":
            ans -= secondNum;
            break;
        case "×":
            ans *= secondNum;
            break;
        case "÷":
            ans /= secondNum;
            break;
        default:
            ans = 0;
    }
    display.innerHTML = ans;
    //isInitをfalseにする
    isInit = false;
}

これで二回目以降のイコールボタンは答えに第2項が再度代入されるようになりました。

初期化を行う機能を実装する

最後にclear!ボタンで初期化を行える機能を実装しましょう。

タイトル:calculator.html

<div>
    <input type="text" id="textbox2">
    <button onclick="run()">=</button> 
    <!-- 追記 -->
    <button onclick="refresh()">clear!</button>
</div>

clear!ボタンにrefresh()という関数をクリックイベントのハンドラ関数に指定します。

タイトル:calculator.js

function refresh() {
    isInit = true;
    secondNum = 0;
    ans = 0;
    kigou = "";
    type.innerHTML = "";
    display.innerHTML = 0;
    textbox1.value = "";
    textbox2.value = "";
}

使用した変数とhtml要素の入力値に初期値を代入する処理をrefresh()で記述します。

これで計算機の完成です。お疲れ様でした！

使用したコード

最後に今回使用したコードの全体を載せておきます。コードはcode-databaseのgithubリポジトリに上げてあります。

タイトル:calculator.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>calculator</title>
</head>
<body>
    <div>
        <input type="text" id="textbox1">
            <div>
                <div id="type">ここに記号が表示されます</div>
                <button  onclick="sign('+')">+</button>
                <button  onclick="sign('-')">-</button>
                <button  onclick="sign('×')">×</button>
                <button  onclick="sign('÷')">÷</button>
            </div>
    </div>
    <div>
        <input type="text" id="textbox2">
        <button onclick="run()">=</button> 
        <button onclick="refresh()">clear!</button>
    </div>
    <div id="answer">0</div>
    <script src="./calculator.js"></script>
</body>
</html>

タイトル:calculator.js

const textbox1 = document.getElementById("textbox1")
const textbox2 = document.getElementById("textbox2")
const type = document.getElementById("type")
const display = document.getElementById("answer")

let secondNum = 0;
let ans = ''
let kigou = "";
let isInit = true;

function sign(btn) {
    kigou = btn;
    type.innerHTML = btn;
}

function run() {
    if (isInit) {
        ans = Number(textbox1.value)
    }
    secondNum = Number(textbox2.value)
    switch (kigou) {
        case "+":
            ans += secondNum;
            break;
        case "-":
            ans -= secondNum;
            break;
        case "×":
            ans *= secondNum;
            break;
        case "÷":
            ans /= secondNum;
            break;
        default:
            ans = 0;
    }
    display.innerHTML = ans;
    isInit = false;
}

function refresh() {
    isInit = true;
    secondNum = 0;
    ans = 0;
    kigou = "";
    type.innerHTML = "";
    display.innerHTML = 0;
    textbox1.value = "";
    textbox2.value = "";
}

この記事のまとめ

本記事ではjavaScriptで簡易的な計算機を作成してみました。このようにJavaScriptでは基本的な知識だけでブラウザで動くアプリを作成することができます。最後にこの記事の要点をまとめておきます。

  • JavaScriptはブラウザ上で動作する
  • 要素取得、変数、関数、四則演算、条件分岐、イベントハンドリングができれば簡易的な計算機を作成できる　

皆さんもJavaScriptでいろんなアプリを作って楽しんでみましょう！