作業内容
加算式電卓の解答例の確認・考察
calc.htmlおよびreg.htmlからacc.htmlへの統合・改変の例： （あくまでも例．他の書き方もあり得る．）
...
<h1>加算式電卓</h1>
... // HTMLコンテンツについてはcalc.htmlを元にして適切に変更...
<script id="VIEW"> // VIEW部には変更なし
...
</script>
<script id="REGISTER"> // reg.htmlからREGISTER部をすべて流用
class REGISTER {
...
}
</script>
<script id="MODEL">
let stts = 'res';
let buf = '0';
const dat = new Register('データレジスタ', 4); // データレジスタの準備
const acc = new Register('アキュムレータ', 6); // アキュムレータの準備
function show(reg) { // 引数としてレジスタを追加
if (reg.err) { // そのレジスタがエラーなら電卓全体もエラー状態に
stts = 'err';
disp('Error');
} else if (stts == 'err') { // 電卓全体がエラー状態の場合
disp('Error');
} else {
disp(reg.str()); // レジスタ内容を表示
}
}
function set(k) {
buf = k; // バッファに書込
dat.read(buf); // データレジスタにバッファを書込
}
function upd(k) {
buf += k; // バッファに追加
dat.read(buf); // データレジスタにバッファを追加
}
function exec(k) {
acc.add(dat); // アキュムレータにデータレジスタの数値を加算
// acc.load(acc.val() + dat.val()); // or これでも同じ，むしろ他の演算への拡張性が出現
}
function start() {
stts = 'res'; // 開始時は結果表示中になるので...
...
show(acc); // ...アキュムレータを表示
}
</script>
<script id="CONTROLLER">
function entNum(k) { // 数字入力中には...
...
show(dat); // ...データレジスタを表示
}
function entExe(k) { // 計算したら結果表示中になるので...
...
show(acc); // ...アキュムレータを表示
}
start();
</script>
...
以上の変更で加算式電卓として， 一般ピープル向けの通常の利用方法に対する動作は完全となった． 数字入力→「＝」キーの反復によって，加算を正しく重ねてゆける．
しかし，通常とは異なる利用方法... 数字入力せず「＝」キー連打した場合の挙動 （状態遷移res→resのアクション）について， これで良いのだろうか？
計算関数exec() の設計思想として， 次の３通りの考え方があるだろう：
- 直近の入力データの数値を再利用して加算する．
（要するに，市販の実務電卓によくある
定数計算的な
玄人向け便利動作モード．
exec() のコードは，上記解答例の通り，acc.add(dat);）
使いこなすために，ユーザ側の想像力・記憶力・等は必要となるが， 同値が連続する場合，入力が不要となるので，素早い作業が可能．コードが単純（手抜き実装）でもあったりする．
- 表示中のアキュムレータの数値を再利用して加算する．
（素人向け便利動作モード．
exec() のコードは，acc.add(acc);）
市販の電卓の基本機能としては大抵，これでしょう． 見えているものしか存在していない，という考え方なので， ユーザ側の想像力・記憶力は不要．...だとしても，短絡的なコードの書換は禁物． 別の状態遷移num→resの場合には，依然， acc.add(dat); の方も必要なんですよ．
- データが未入力なら何も加算しない． （素人向け安全動作モード． 状態遷移res→resのアクションは，exec()でなく，NOP）
妥当性・利便性について各自で熟考し， 計算関数exec() の定義内容を変更しよう． そして，今後の開発過程でも同じ考え方を貫くこと!! （あるいは，動作モードの切替機能を追加実装しても良いだろう．）
どちらにせよ，柔軟性を考慮すれば， 関数exec() の定義を次のように変更しておくべきだろう：
function exec(k, reg) {
acc.add(reg); // アキュムレータにレジスタdatまたはaccの数値を加算
// acc.load(acc.val() + reg.val()); // or これでも同じ，むしろ...
}
ちなみに，市販の実務電卓の定数計算機能の操作方法については，
メーカやモデルによって異なる．
本物を再現するには，
定数専用のレジスタの追加や
状態遷移図の変更も必要となりそう．
実務電卓への拡張
加算式電卓acc.html を元に， 四則演算（二項演算子＋−×÷の入力・計算）機能を追加実装し， 昭和な逐次演算式の実務電卓bc.html へ改変せよ．
演算子の優先順位は考慮しない．
入力順に計算を進めるので「逐次」式．
'1+2*3='→(1+2)*3 = 9 ...1+(2*3) = 7 ではない!!
- 外観の変更：（主にVIEW部の JS の編集，多分 CSS も）
- 二項演算子（binary operator）キーのオブジェクト生成メソッド：
K.B() を新設
プロパティclass は， 'symbol'（「＝」と共通デザイン）で OK． または，新規に CSS のクラスを新設しても良い．プロパティfunc は 'entOp2' とし， 後述の通り，コールバック関数entOp2() を CONTROLLER部に新設．
- プロパティK.str：
'+'，'-'，'*', '/' を新設
入力データは，半角文字が無難．複数文字でもOK．
- プロパティK.label：
'＋'，'ー'，'×', '÷' を新設
画面上のキーのラベルは，全角でもOK． （絵文字も🉑．現状では環境依存ではあるが...）
const K = { gen(c, f, s, l) { return { 'class': c, 'func': f, 'str': s, 'label': l }; } ..., B(s, l) { return this.gen('symbol', 'entOp2', s, l); } // 二項演算子キー生成メソッド }; const keybd = [ [ K.N('7', '７'), ... , K.B('/', '÷') ], // 「÷」キー追加 ... // 他の演算子キーも同様に... ];キーのレイアウトについては各自のセンスで決定しよう．
- 二項演算子（binary operator）キーのオブジェクト生成メソッド：
K.B() を新設
- 計算機能の変更：（MODEL部と CONTROLLER部の JS の編集）
- 二項演算子入力バッファ変数：
op2 を新設
let op2 = '='; // 二項演算子 // 初期値は'='でも'+'でもOK // '='の場合：'123=' → = 123 = ... accに123を代入 // '+'の場合：'123=' → 0 + 123 = ... 初期値ゼロのaccに123を加算
起動関数start() 内でも初期値設定が必要． 後々の「CA」等のリセット機能のために． - 計算関数：
exec() の内容を適切に改変
二項演算子op2 に応じた計算方法の切替．
function exec(k, reg) { switch (op2) { // 直近の演算op2で切替，現在の入力kではない // '1+2='→op2='+'，k='=' case '=': acc.load(reg.val()); break; // '=123=' case '+': acc.load(acc.val() + reg.val()); break; // '+123=' case '-': ... case '*': ... case '/': ... } op2 = k; // 現在の入力kを次回exec()時の演算op2に利用 } - 状態遷移図：
エラー状態err について，上図では省略されていますが，存続しますよ． 前回の状態遷移図も参照しよう．演算子連打（＋，−，×，÷，＝の組み合せの連続入力）に対する挙動をどうするか， 状態遷移の詳細については各自の設計思想（上述の３種類など）に基づいて決定しよう． - 二項演算子入力中（途中結果表示中）状態：
'tmp' を新設
使用例：コールバック関数内などで... case 'tmp': とか stts = 'tmp'; とか．（上級者向け）設計思想や実装対象によっては， 上記の状態遷移図には異論もあるでしょう．
- 柔軟性のため冗長すぎるかもしれない． 演算子入力中状態tmpを新設せず， 結果表示中状態resとの共用・統合化も可能だろう． ただし，状態遷移res→res（'=='）とtmp→res（'+='等）のアクションは共通で良い， 「＝」だけ区別せんでも「＋」とかと同じ二項演算子だべさ，等と割り切るならね．
- あるいは逆に，簡素すぎるかもしれない． 実装したい機能に応じて，状態やレジスタを増やしてね． しかし，状態遷移のコードが肥大化・複雑化してしまうので， 状態の方は共用・統合化して増やさず， アクションの方で工夫すると良さげ．
- 二項演算子入力コールバック関数：
entOp2() を新設
function entOp2(k) { switch (stts) { case 'err': break; case 'tmp': op2 = k; stts = 'tmp'; break; case 'res': op2 = k; stts = 'tmp'; break; case 'num': exec(k, dat); stts = 'tmp'; break; } show(acc); } - その他のコールバック関数：
entNum() と entExe() の内容を適切に改変
新設の状態'tmp' とか変数op2 関連のコード．
便利機能の追加
余裕があれば，bc.html に市販の電卓によくある便利機能を追加せよ．
- リセット機能：「CA（clear all）」とか「AC（all clear）」キー
電卓全体のリセット． 起動関数start() を呼出． K.strの例：'ca'
- 置数訂正機能：「CE（clear entry）」とか「Ｃ（clear）」キー
レジスタの数値をゼロに変更． （状態によっては電卓全体のリセット．） K.strの例：'ce'
- 単項演算機能：「+/-」，「√x」，「1/x」キー，等
レジスタの数値を演算子に従って変更． K.strの例：'neg'，'sqrt'，'inv'，等 （negate，square root，invert）設計思想にもよるでしょうが， これらを「単項演算」と一括してしまって良いのかな... 市販の電卓では大抵，符号反転「+/-」は置数途中で何度でも可能． 一方，平方根「√x」等では置数確定となるが， その後にも符号反転だけは可能，とか微妙に異なるので．
- 税金計算機能：「％」キー
これは「＝」の仲間． '10+5='→15，'10+5%'→10.5，'10*5%'→0.5，... 詳しくは，電卓のマニュアル等をネット検索してね． K.strの例：'%'
本日の課題
ありません．
- 二項演算子入力バッファ変数：
op2 を新設