フロント側の実装で「enum をそのまま表示に使おうとすると辛い」ケースに遭遇したので雑談会で共有した。

1. 数字の選択肢のケース

• 配送頻度の間隔を選択させるフォーム用の選択肢
• 「1, 3, 6」のどれか

enum FrequencyMonthEnum {
  """
  6ヶ月
  """
  half_year

  """
  1ヶ月
  """
  month

  """
  3ヶ月
  """
  quarter
}

辛いポイント

• フロント側で以下の変換を往復する必要がある
  • enum → 対応する数字（昇順に並び替え）→ 対応する日本語（選択肢用）

2. 日本語と対応させる必要があるケース

• 検索条件でカテゴリーを指定する時

辛いポイント

• 結局、選択肢の enum と、対応する日本語で型を用意する必要がある
• 毎回冗長に書かなければならない

const categoryConditions: { id: CategoryEnum; label: string }[] = [
  { id: CategoryEnum.Food, label: "フード" },
  { id: CategoryEnum.Snack, label: "スナック" },
  { id: CategoryEnum.Drink, label: "ドリンク" },
];

雑談会で出た話

雑談会で上記を相談したところ、次のような意見をいただけた。

enum ではなくオブジェクトの配列で渡すようにする

• enum だと変更の度にサーバー・フロントの両方を変更しなければならない
• 例）

type FrequencyMonthCondition {
  conditions: [FrequencyMonth!]!
}

type FrequencyMonth {
  id: ID!
  labelJa: string!
}

"""
取得イメージ
[
  { id: 'HalfYear', labelJa: '6ヶ月'}
  { id: 'Month', labelJa: '1ヶ月'}
  { id: 'Quarter', labelJa: '3ヶ月'}
]
"""

受け渡すデータと対応する、翻訳用データを用意する

• 「データ上の値」と、「それをどう表示するか」の話なので、多言語対応と似ているかも
• トップ画面ロード時に各データと対応する翻訳用のデータセットを予め先にフロントに渡す
• キーとなる値が重複しないような配慮が必要になりそう
• 例）
  • 渡されるデータ

enum FrequencyMonthEnum {
  halfYear
  month
  quarter
}

• 別に用意する翻訳用オブジェクト

const locales = [
  {
    language: 'jp',
    messages: {
     // ここに並列に他のキーも入るため、グローバルで一意にする必要がある
      halfYear: '6ヶ月'
      month: '1ヶ月'
      quarter: '3ヶ月'
    }
  },
]