LoginSignup
0
0

More than 1 year has passed since last update.

JavaScript 電卓 オブジェクト指向

Last updated at Posted at 2021-06-13

ES6のクラス構文でオブジェクト指向な電卓を実装

JavaScriptやオブジェクト指向の初心者のため、不備やより良い記法があればご指摘いただけると幸いです

コードの全容は以下
https://github.com/dstnk0208/CalclatorOOP/

JavaScriptのクラス構文について

仕様概要

  • 四則演算ができる
  • 演算は入力順に行う
    • 1 + 2 * 3 = 9とする (7ではない、いわゆる逆ポーランド記法には非対応)
  • 小数点は非サポート(入力や演算結果で出力はされるが、実装では表示のコントロールなどはしない)

クラス設計

データ構造にはスタックを採用。Arrayオブジェクトを流用でき、逆ポーランド記法でも使われてるため
0除算のエラーなどにカスタムエラークラスを実装
カスタムエラーの実装には以下を参考した
- https://qiita.com/necojackarc/items/c77cf3b5368b9d33601b

実装

Stackクラス

class Stack {
    constructor() {
        this._a = [];
    }
    push(a) {
        try {
            // NaN or undefinedでカスタムエラーをスロー
            if ((!(a === a)) || (a === void 0)) {
                throw new InvalidInputException();
            }
            this._a.push(a);
        } catch (e) {
            if (e instanceof InvalidInputException) {
                console.log(e);
            } else {
                console.log('other error');
            }
        }
    }
    ...中略...

Calcクラス

class Calc {
//...中略...
    _div(v1, v2) {
        // 0除算でカスタムエラーをスロー
        if (v2 == 0) {
            throw new ZeroDevideException("Devided zero");
        }
        stack.push(v1 / v2);
    }
}

ZeroDiviceExceptionクラス

class ZeroDevideException extends Error {
    constructor(...params) {
        super(...params);
        Object.defineProperty(this, 'name', {
            value: this.constructor.name,
        });
        if (Error.captureStackTrace) {
            Error.captureStackTrace(this, ZeroDevideException);
        }
    }
}

カスタムエラーはErrorをextendsするだけでは、カスタムエラーのErrorTypeがスタックトレースから欠落するため、constructorのnameプロパティを上書きする

  • constructorのnameプロパティを上書きしなかった場合
Error
    at Calc._div (main.js:62)
    at Calc.calc (main.js:46)
    at onPushEqual (main.js:153)
    at HTMLButtonElement.onclick (index.html:32)
  • 上書きした場合
ZeroDevideException
    at Calc._div (.././main.js:61:23)
    at Calc.calc (.././main.js:46:18)
    at onPushEqual (.././main.js:154:10)
    at HTMLButtonElement.onclick (.././index.html:32:45)

まとめ

  • ES6のクラス構文を使ってオブジェクト指向な電卓を実装した
  • カスタムエラークラスも実装してみた

参考

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0