はじめに

こんにちは、運動通信社でバックエンドメインに携わっている Takeya です。
フロントエンドもちょくちょく実装してます。
今回はES6の書式でよく忘れるのでメモしておきたいと思います。

背景

当時の実装方針や歴史的な経緯もあって、ライブ配信ページの定数宣言クラスがこんな感じになってました。

class Config {
  static get BEFORE() {
    return 0;
  }

  static get PLAYING() {
    return 1;
  }

  static get END() {
    return 2;
  }

  // ... 略 (ライブ配信状態と関係ない各種定数が並列に書かれてる)
}

この3つはライブ配信状態を表している定数なので、グルーピングして LIVE_STATUS.BEFORE って参照したいですね。

結論

今回に関しては、なんのことはなく、定数っぽいキー名にしたオブジェクトを返せばいいかなと。

  static get LIVE_STATUS() {
    return {
      BEFORE: 0,
      PLAYING: 1,
      END: 2,
    };
  }

これで Config.LIVE_STATUS.BEFORE で参照できます。

(※Javaとかなら enum で解決な気がしますが、JavaScriptには enum がないです。
Symbol を使えば enum っぽくできるみたいですが、今回はそこまで考えが至らず)

理想はどうすべきなのか?

おそらく理想は、クラス設計を見直して、あるべきクラスに定数を移管する、のがいいのかなと思います。(Javaっぽく考えると LIVE_STATUS 自体を ValueObject としてクラス化すべきな気がします)

しかしながら、

結構規模があるので設計見直しは工数的に現実的でない。
一部のライブ配信ページは Vue.js に移行し始めているので、Vueとの相性を考えた設計を検討した方が良さそう。
ちょっと可読性が気になったという話なので、手軽な修正で可読性が上がればOK。

と思って今回の実装を落とし所にしました。

今回の落とし所だと、 jsdoc でObject型の中身の型を表現できないみたいで、Lint系ツールなど型チェックには弊害があるかもしれません。
リファクタリングは工数(納期)とできることのバランスをとっていくのが難しいところです。

今回は非常にちょっとした話でしたが、少しずつリファクタリングを進めています、っていう一例でした。

おまけ

enum に関して、
TypeScriptなら enum をサポートしてたので軽く調べると、 enum じゃなくて union 型を使おう、ってなってるようです。
色々クセがありますね。。。