JS, TSで特定の条件に応じた値を可読性高く変数に格納する解

概要

特定の条件（ケース）に応じて値を定義、生成する関数を定義する際に、何がベストか、ずっと考えてきた。

解

変数定義（JS）

// timeframe = day or night
const timeframe: TimeFrame = ...;
const displayText = {
  day: '昼間です',
  night: '夜です',
}[timeframe];

変数定義（TS）

type TimeFrame = 'day' | 'night';
const timeframe: TimeFrame = ...;
const DISPLAY_TEXT_HASH:{ [K in TimeFrame]: string } = {
  day: '昼間です',
  night: '夜です',
}
const displayText = DISPLAY_TEXT_HASH[timeframe];

変数定義（TS 4.9 or later）

type TimeFrame = 'day' | 'night';
const timeframe: TimeFrame = ...;
const displayText = ({
  day: '昼間です',
  night: '夜です',
} satisfies { [K in TimeFrame]: string })[timeframe];

関数（JS）

const generateDisplayTextByTimeframe = (args) => ({
	day: '昼間です',
    night: '夜です'
})[args];

関数（TS）

type TimeFrame = 'day' | 'night';
const generateDisplayTextByTimeframe = ((
  baseHash: { [K in TimeFrame]: string }
) => (key: TimeFrame): string => baseHash[key])({
  day: '昼間です',
  night: '夜です',
});

関数（TS 4.9 or later）

type TimeFrame = 'day' | 'night'; 
const generateDisplayTextByTimeframe = (key: TimeFrame):string => ({
	day: '昼間です',
    night: '夜です'
} satisfies { [K in TimeFrame]: string })[key];

三項演算子

// timeframe = day or night
const timeframe: TimeFrame = ...;
const displayText = timeframe === 'day' ? '昼間です' : '夜です';
// 真逆の判定なら分からなくもない

// timeframe = day or afternoon
const timeframe: TimeFrame = ...;
const displayText = timeframe === 'day' ? '昼間です' : '午後です';
// dayではないときに午後なのは違和感がある

if文

// timeframeを変数定義スコープ内で参照している想定
const timeframe: TimeFrame = ...;
const displayText = (() => {
  if(timeframe === 'day') return '昼間です';
  return '夜です';
})();
// 真逆の判定なら分からなくもない

// timeframe = day or afternoon
const timeframe: TimeFrame = ...;
const displayText = (() => {
  if(timeframe === 'day') return '昼間です';
  return '午後です';
})();
// dayではないときに午後なのは違和感がある

switch文

// timeframe = day or afternoon
const displayText = (() => {
  switch (timeframe) {
    case 'day':
      return '昼間です';
    case 'afternoon':
      return '午後です';
    default:
      // @htsignさまよりご教授いただきましたので追記
      // case が漏れている場合はここで型エラーになるので足りないことに気付ける
      const _value: never = timeframe;
      throw _value;
  }
})();
// 分かりやすいが冗長 lint使っているとdefaultが必須

find

// timeframe = day or afternoon
const LIST_TIMEZONES_AND_CHARACTORS = [
  { timeframeKeyName:'day', text:'昼間です' },
  { timeframeKeyName:'afternoon', text:'午後です' },
]
const displayText = LIST_TIMEZONES_AND_CHARACTORS.find( item => item.timeframeKeyName === timeframe )?.text;
// オーバーキル

総括

よって 解 が適切ではないだろうか。

---

Special thanks：同僚のTさん