勉強用

プログラミング学習のアウトプット用ブログです。他に目的はありません。

電卓作り その1(課題で作成した簡易電卓を1度分解して考える)

タイトルの通り、課題で作成した簡易電卓を1度分解し、その構成を一つひとつ考えていく。

※下記テキストは、まだ思考が整理されていない状態の下書きのようなものであり、分かりづらさはご愛敬。

では、まずはHTMLから

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Test</title>
  </head>
  <body>
    <div>
      <input type="text" id="num1">
      <input type="text" id="num2">
    </div>
    <button type="button" id="button-add">+</button>
    <button type="button" id="button-sub">-</button>
    <button type="button" id="button-mul">*</button>
    <button type="button" id="button-div">/</button>
    <div id="box"></div>
    <script src="main.js"></script>
  </body>
</html>

↑のコードで、↓のような簡易電卓が出来上がる。が、まだこの段階では、ボタンを押したところで何も起こらない。
f:id:fridge2020:20201118161246p:plain


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Test</title>
  </head>

↑headに関しては今回は考える必要がないので割愛する。

まずは、

<div>
      <input type="text" id="num1">
      <input type="text" id="num2">
</div>

この部分から。
このdivタグで囲われたinput要素によって↓のボックスが作られる。f:id:fridge2020:20201118162359p:plain
type属性に”text”を指定することで、1行のテキストボックスが作られる。
左のボックスには"num1"というidが、右にはnum2"というidが指定されている。


次に、

<button type="button" id="button-add">+</button>
<button type="button" id="button-sub">-</button>
<button type="button" id="button-mul">*</button>
<button type="button" id="button-div">/</button>

この部分。これは↓の
f:id:fridge2020:20201118162849p:plain
にあたる。
type属性に"button"を指定することで、「何もしない汎用的な押しボタン」が作成される。そのボタンが4つ。それぞれにidが振られ、それに適したテキストが書かれている。


次に、

<div id="box"></div>

ここは空のdivタグ。idにboxが指定されている。


次。

<script src="main.js"></script>

HTMLでJavaScriptを読み込むために書かれている。

htmlは以上。


続いて、JavaScript

const buttonAdd = document.getElementById('button-add');
const buttonSub = document.getElementById('button-sub');
const buttonMul = document.getElementById('button-mul');
const buttonDiv = document.getElementById('button-div');

const getNum1 = () => {
  return parseFloat(document.getElementById("num1").value)
};

const getNum2 = () => {
  return parseFloat(document.getElementById("num2").value)
};

const showResult = (num) => {
  document.getElementById("box").innerHTML=num
};


buttonAdd.addEventListener('click', () => {
  const result = getNum1() + getNum2();
  showResult(result);
});

buttonSub.addEventListener('click', () => {
  const result = getNum1() - getNum2();
  showResult(result);
});

buttonMul.addEventListener('click', () => {
  const result = getNum1() * getNum2();
  showResult(result);
});

buttonDiv.addEventListener('click', () => {
  const result = getNum1() / getNum2();
  showResult(result);
});


まずは、

const buttonAdd = document.getElementById('button-add');
const buttonSub = document.getElementById('button-sub');
const buttonMul = document.getElementById('button-mul');
const buttonDiv = document.getElementById('button-div');

この部分。正確に言うなら、

const buttonAdd = document.getElementById('button-add');

この部分の、

document.getElementById('button-add');

を考える。

getElementById() メソッド。
このメソッドで、指定した名前のid属性を持つHTMLの要素をオブジェクトとして取得することができる。
つまり、↑は「button-add」というid属性を持つ要素をHTMLから取得することができる。
それは、

<button type="button" id="button-add">+</button>

この部分。
この部分を変数buttonAddに代入するということ。
(HTMLの特定の要素を取得し、それを変数に代入する。)

下三つ

const buttonSub = document.getElementById('button-sub');
const buttonMul = document.getElementById('button-mul');
const buttonDiv = document.getElementById('button-div');

も同じ作業なので割愛。


続いては

const getNum1 = () => {
  return parseFloat(document.getElementById("num1").value)
};

const getNum2 = () => {
  return parseFloat(document.getElementById("num2").value)
};

↑この部分。
の↓この部分。

parseFloat(document.getElementById("num1").value)

f:id:fridge2020:20201119112916p:plain
とのこと。
つまり、簡単にいうと、parseFloat() を使えば、文字列を数値に変換することができる。

つまり、↑は「num1」というid属性を持つ要素の値をHTMLから取得し、その取得した"文字列"を数値に変換して、返すという意味。
↑の関数を「getNum1」という変数に代入する。

下の

const getNum2 = () => {
  return parseFloat(document.getElementById("num2").value)
};

に関しても同じ作業なので割愛。

※ただここで疑問に思ったのは、なぜparseFloat() 関数を使うのか、という点だ。つまり、これは今電卓を作っており、したがってボックスに入力される値はそもそも数値なのだから、わざわざparseFloat() 関数を使って文字列を数値に変える必要はないのではないか? ということだ。
その質問に対する答えはこうである。
input要素.value で受け取ったものは文字列である。

input要素.value で受け取ったものは文字列である。


続いてはこの部分。

const showResult = (num) => {
  document.getElementById("box").innerHTML=num
};

まず関数部分は、「box」というid属性を持つHTML要素を取得。
それから、innerHTMLというプロパティは、HTML要素の中身を取得、変更できるので、取得したbox」というid属性を持つHTML要素を「num」に変更する。
引数の「num」に関してはあとで述べるので、ここではスキップ。


次に、

buttonAdd.addEventListener('click', () => {
  const result = getNum1() + getNum2();
  showResult(result);
});

buttonSub.addEventListener('click', () => {
  const result = getNum1() - getNum2();
  showResult(result);
});

buttonMul.addEventListener('click', () => {
  const result = getNum1() * getNum2();
  showResult(result);
});

buttonDiv.addEventListener('click', () => {
  const result = getNum1() / getNum2();
  showResult(result);
});

この部分の、

buttonAdd.addEventListener('click', () => {
  const result = getNum1() + getNum2();
  showResult(result);
});

この部分。

上で作成した変数buttonAddがクリックされたとき、↓の関数が呼び出される。

() => {
  const result = getNum1() + getNum2();
  showResult(result);
}

この関数とは、変数resultに、上で作ったgetNum1()変数とgetNum2()変数を代入し、 showResult(result);関数を呼び出すというもの。ちなみに、ここでの実引数「result」が上の仮引数「num」に渡されるので、結果的にここで合計された値がディスプレイ上に表示される。


ここまでで、とりあえずの解説は終了。きっと間違えている箇所もあるだろうが、何となく電卓の仕組みは理解できたように思う。
いずれ、綺麗にまとめたものをアップし直そうと思う。