昔ながら感ある方法
const FOO = 1
const BAR = 2
export const foo_bar_options = {
[FOO]: "foo text",
[BAR]: "bar text"
}
選択肢それぞれに名前をつけて数値を対応させる
key-value 形式で数値と表示用ラベルを保持する
foo text のところは日本語だったりで画面に表示する用のテキスト
簡単なツールなどだと選択肢も簡単で英単語で表すのも簡単
だけど特殊な固有名詞とか選択肢を表す言葉が複雑なものになってくると 名前を考えるのも面倒
そもそも一般的な英語にしづらい固有名詞とかは日本語で書けばいいとも思ってるけど 他とのバランスとかで急に日本語を混ぜたくないとかもあって 英語にしたいときもある
こういうので数が多いと嫌になる
思ったのが 選択肢が特別な意味のないただの選択肢で これを選んだ場合に何かがあるとかが無いなら 最初から名前を用意しなければ名前を考える必要はないってこと
全体としてこれが何なのかを表してる foo_bar_options に当たる名前は必要だけど ここはそんなに難しいことがなくて面倒なのは選択肢なのでこれで十分
export const foo_bar_options = {
1: "foo text",
2: "bar text",
}
=== "1" は 1 が何かわからないのでしたくないけど それをすることがないなら名前もいらない
React で select を作るときもこういう感じでいい
import { foo_bar_options } from "./constants.js"
const Select = ({ options }) => {
const opts = Object.entries(options)
return (
<select defaultValue={opts[0][0]}>
{opts.map(([k, v]) => (
<option key={k} value={k}>{v}</option>
))}
</select>
)
}
const Component = () => {
return (
<div>
<Select options={foo_bar_options} />
</div>
)
}