ここからは、それぞれの開発者が独立して開発するために必要な情報の洗い出しを行います。

電卓のボタンを押したとき、計算ロジック側との間で送受信するデータは次の通りです。

  • 送信: 押したボタンの情報（数字・四則演算またはイコール）
  • 受信: ディスプレイに表示する数字

「計算ロジック側でさらに欲しい情報」は次の通りです。

  • ディスプレイに表示されている数字
  • 直前の計算結果
  • 最後に押された四則演算のボタンの情報
  • 数字を入力している最中かどうか
  • 小数点ボタンが押されたかどうか

押したボタンの情報

どのボタンが押されたか送信する方法はいろいろあると思いますが、今回はボタンの onclick 属性に「ボタン情報を引数にした関数」を実行するよう設定してみたいと思います。

ボタン要素を以下のように定め、sendButtonInfo という関数でボタンの情報を送るよということを取り決めておきます。

<button onclick="sendButtonInfo('0');">0</button>

このとき、引数についても定めておきます。

sendButtonInfo の引数（文字列型）

ボタン引数
0'0'
1'1'
2'2'
3'3'
4'4'
5'5'
6'6'
7'7'
8'8'
9'9'
.'.'
＋'+'
－'-'
×'*'
÷'/'
='='

ディスプレイに表示する数字

計算ロジックは、次にディスプレイに表示する数字をセットするので、ディスプレイの id 属性を決めておく必要があります。 ここでは number-display としておきます。

<h2 id="number-display"></h2>

計算ロジック側でさらに欲しい情報

「計算ロジック側でさらに欲しい情報」を何らかの形で保持している必要がありますが、これらのデータは画面とやり取りしないので、 設計側で指定はせず、ある程度自由にやってもらうことにします。 （候補としては JavaScript のグローバル変数やローカルストレージなどがあります）

情報説明
ディスプレイに表示されている数字ディスプレイに数字を設定するために必要です。
直前の計算結果数字が入力されている間も、計算をするために記憶しておく必要があります。
最後に押された四則演算のボタンの情報次に四則演算やイコールのボタンが押されたとき、計算をするために必要です。
数字を入力している最中かどうか計算結果が出た直後と、数字を入力している最中かどうかでディスプレイの数字の作り方が異なります。
小数点ボタンが押されたかどうかディスプレイに 0 が表示されているときに 0 を押すと、小数点があれば 0.0 となりますが、小数点がない場合 0 のままです。

計算結果のクリア

画面を最初に開いたときや計算結果を F5 キーでクリアしたとき、ディスプレイには 0 を表示しますが、これは計算ロジック側で設定することとします。

ファイル名について

計算ロジックのファイル名を main.js として画面から読み込むことにします。

次回は実際に開発を行っていきます。