はじめに React書いてますか? ReactもFunctional Componentが主流になっていることにより、必然的に関数型で書き進めることになっていると思います。 そんな令和時代、毎度困る場面の一つが条件分岐。 js・tsの条件分岐といえば、if文、switch文、三項演算子など種類は様々。 どういうときにどの形式で書くのか毎度迷うし、その選定を間違えたら汚いコードになりがち。 そこで、今回は条件分岐を書き方の個人的ベストプラクティスを書いていきます! 基本方針 条件分岐の結果を何かの変数に収める これを意識するだけで割とすぐに関数型っぽくなります。可読性やテスト容易性、変更容易性なども上がります。 これの代表的な例が三項演算子だったりします。
![【React】関数型プログラミングを実践する上での、条件分岐の俺的ベストプラクティス](https://cdn-ak-scissors.b.st-hatena.com/image/square/b3df9f37258cbfa073fea886ddee0537237de896/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--mDwH0soc--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E3%252580%252590React%2525E3%252580%252591%2525E9%252596%2525A2%2525E6%252595%2525B0%2525E5%25259E%25258B%2525E3%252583%252597%2525E3%252583%2525AD%2525E3%252582%2525B0%2525E3%252583%2525A9%2525E3%252583%25259F%2525E3%252583%2525B3%2525E3%252582%2525B0%2525E3%252582%252592%2525E5%2525AE%25259F%2525E8%2525B7%2525B5%2525E3%252581%252599%2525E3%252582%25258B%2525E4%2525B8%25258A%2525E3%252581%2525A7%2525E3%252581%2525AE%2525E3%252580%252581%2525E6%25259D%2525A1%2525E4%2525BB%2525B6%2525E5%252588%252586%2525E5%2525B2%252590%2525E3%252581%2525AE%2525E4%2525BF%2525BA%2525E7%25259A%252584%2525E3%252583%252599%2525E3%252582%2525B9%2525E3%252583%252588%2525E3%252583%252597%2525E3%252583%2525A9%2525E3%252582%2525AF%2525E3%252583%252586%2525E3%252582%2525A3%2525E3%252582%2525B9%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3AIta%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FDTlBFdTg3XzF2SWtOTTIyZUQ3TUoxcnNoSmVXMkxlZUlyYkZWNllQWGtoPXM5Ni1j%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)