プログラミング

プログラミング

PR

Javascript使い必見!switch文を分解してコンパクトかつ再利用可能なコードに変換する方法

7,121 views

読了時間 : 約2分12秒

JavaScriptにおいて、switch文は使い勝手の良い便利な文法です。

 

しかしコード全体の機能性で考えてみると、うまくフィットしていないことがあります。

変更できないイミュータブルなものとすることができず、他の関数と組み合わせることもできず、また使用することにより副作用を起こすこともあります。

 

switch文ではbreakが用いられますが、これもあまり好ましくありません。

 

望ましいのは、イミュータブルでかつ副作用ができるだけ少ないものです。

ひとつの値を与え、取り出すことができる、機能的なものが必要なのです。

 

ここで、Reduxのウェブサイトに用いられているコードを見てみましょう。

 

 

 

このコードを次のように書き換えることができます。

 

 

 

だいぶ良くなりましたが、action.type ===が何度も使用されているのが気に入りません。

そこでオブジェクトリテラルを試してみましょう。

関数内にオブジェクトリテラルを含め、さらにデフォルトケースにも対応させることができます。

 

 

 

もっと良くなりますよ、ifを三項演算子とES6を用いて書き換えてみましょう

 

 

 

きれいになりました!ではReducerに取りかかりましょう

 

 

 

 

初期バージョンのswitchcaseには、switchcase関数に値が渡される前にオブジェクトリテラルが評価されてしまう問題があります。

つまり、state +1とstate -1がどちらも評価されてしまうということです。

これが非常に危険となる場合があります。

 

もしオブジェクトリテラル内の値が関数であれば、ケースに合致した場合のみ実行させることができるはずです。

 

そこでswitchcaseF(Fは関数、つまりFunctionから来ています)という関数を作ってみましょう。

これはswitchcaseをベースに、値を関数としたものです。

 

 

 

 

これでReducerの値が関数に変更され、ケースに合致した場合にのみ評価されるようになります。

 

 

 

 

うーん、しかしできれば、これらの関数を必須のものとはしたくないですね。

次のようなものを追加してみましょう。

 

 

 

 

するとReducerがこのようになります。デフォルトの値に気付いてくださいね。

 

 

さらに、こんな風にすることもできますね。(RESETを追加してみました。)
 


 

 
 

 

結論

switch文は私たちの求める機能的パラダイムに合致していませんでしたが、同じような特徴を持つ関数を作成することができます。

これを利用することでswitch文を分解し、よりコンパクトで再利用が可能なコードに変えられるのです。

次にswitch文を使用する際には、ぜひ思い出して活用してみてください。

 

 

 

 

※本稿は「Rethinking JavaScript: Eliminate the switch statement for better code」を翻訳・再編集したものです。

おすすめ新着記事

おすすめタグ