JavaScript のオブジェクトが自由に作れる点と関数が素でオブジェクトな点を利用することによって JavaScript はオブジェクトを switch 分の代わりに用いることができます。
オブジェクトリテラルとは次の様なオブジェクトを定義する式のことです。よく {} でオブジェクトを定義するアレです。これを switch 文の代わりに用います。
JavaScript オブジェクトの基本 – ウェブ開発を学ぶ ｜ MDN#オブジェクトの基本
1 2 3 4 5 6 7 8 9 10 11 12 | const person = { name: ['Bob', 'Smith'], age: 32, gender: 'male', interests: ['music', 'skiing'], bio: function() { alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.'); }, greeting: function() { alert('Hi! I\'m ' + this.name[0] + '.'); }}; |
具体的にどうやるかというと次です。
1 2 3 4 5 6 7 8 9 | function execAction(actionType){ const flowBranch = {// キーは定数的なオブジェクト、値の hogeAction はいずれも関数 [ACTION.INIT]: initAction, [ACTION.ATTACK]: attackAction, [ACTION.END]: endAction, } const actionFunc = flowBranch[actionType] || defaultAction; actionFunc();// actionType をキーにして関数を得られなければ defaultAction を実行} |
オブジェクトのキーに switch で使いたいような分岐を入れ、値に処理を記述します。単に値の対応表的に用いるならばわざわざ関数にして処理にせずとも同様のことができます。
上の例では丁寧に分解しましたが、中間変数を省いて次の様に短く書くこともできます。
1 2 3 4 5 6 7 | function execAction(actionType){ ({// キーは定数的なオブジェクト、値の hogeAction はいずれも関数 [ACTION.INIT]: initAction, [ACTION.ATTACK]: attackAction, [ACTION.END]: endAction, }[actionType] || defaultAction)();} |
これの応用として React（JavaScript のライブラリの一つReact – ユーザインターフェース構築のための JavaScript ライブラリ）でコンポーネントを状況に応じて切り替える記述を簡易にすることもできます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | const HogeComponent = ({status, name}) => { const StatusComponent = { [STATUS.PROCESSING]: <StatusProcessing />, [STATUS.SUCCESS]: <StatusSuccess />, [STATUS.ERROR]: <StatusError />, }[status]; return ( <div> <div>{name}</div> {StatusComponent}{/* ↑の switch 文的コンポーネント分岐の結果のコンポーネントを描画 */} </div> )} |
