• 作成:

JavaScriptアンチパターン 関連するデータを別の変数に入れる

今日のJavaScriptアンチパターン.

class Constant {
    static get kirby() {
        return 'kirby';
    }
    static get kirbyColor() {
        return 'pink';
    }
    static get metaknight() {
        return 'metaknight';
    }
    static get metaknightColor() {
        return 'blue';
    }
}

const input = '入力値が入る';

switch (input) {
    case Constant.kirby:
        console.log(Constant.kirbyColor)
        break;
    case Constant.metaknight:
        console.log(Constant.metaknightColor)
        break;
    default:
        break;
}

このサンプルでは2つだからまだ良いですが, 増えると格段に面倒です.

更に発展性もありません. 列挙する時に大変です.

関連するデータは辞書に突っ込みましょう.

class Constant {
    static get color() {
        return new Map([['kirby', 'pink'], ['metaknight', 'blue']]);
    }
}

const input = '入力値が入る';

console.log(Constant.color.get(input));

こうすれば全ての要素で何かしら処理する時も簡単です.

Array.from(Constant.color).forEach(([character, color]) =>
  console.log(character, color)
);

変数名で区切って別の変数にするより, objectでもMapでもなんでも良いので関連するデータは辞書に放り込みましょう.

switchを一々書いていくより格段に簡単ですし, 列挙も出来ます.

Javaだったらenumをvalues()で列挙で取得できたりして面白いです. Java列挙型メモ(Hishidama's Java enum Memo)

まあJavaScriptにそういうのはないどころかenum自体無いのでMapとArrayで頑張っていきましょう.

代数的データ型があれば何もかもが解決するのでJavaScriptを捨ててPureScriptに移行…出来たらいいな… 現実社会はつらく厳しい.

え, 以下のように書けって?

class Character {
    constructor(name, color) {
        this.name = name;
        this.color = color;
    }
}

まあスケールさせたい場合は当然そうしますよね. しかしとりあえず変数の区分けで書いてたところをどうにか改善しようとした結果なので. JavaScriptだと静的型付けの恩恵あまり受けられないからクラス作るメリットもそんなにあるのか謎.