ウェブアプリの開発（２）

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 へ改変せよ．

• 外観の変更：（主に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('/', '÷') ],	// 「÷」キー追加
    	...					// 他の演算子キーも同様に...
    ];
    

    キーのレイアウトについては各自のセンスで決定しよう．
• 計算機能の変更：（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の例：'%'