はじめに

いなたつアドカレへようこそ初日です、頑張って一人で25記事書くODL(あうとぷっとどりぶんらーにんぐ)企画、完走したいですね。

自分の中にあるネタを引っ張り出して記事を書いていきます。。。くおりてぃ。。。。

今日は頭にあるとスマート？に実装をかける？やつを忘れないようにここにのこしておきます。

短絡評価とは

andやorで値を評価する時に

A && B // A,B共に真
A || B // A,Bどちらかが真

となるためA && Bの A が偽の場合やA || BのAが真の場合、つまりBの値にかかわらずA && BやA || B の評価結果が決定する場合にはBを評価しないといった言語使用です。

主な使用ケースとしては、Bに動作の重い処理を置いて、Aの値で評価が決定してしまい、Bの結果が不要な(重い処理を走らせる必要がない)場合に処理を軽減する

今回はこの性質を利用し、ある条件が真となる場合にのみコンポーネントを配置するといったことを行う。

じっそー

結論から言ってこんな感じ

{i % 2 == 0 && <div>test</div>}

上のプログラムはiが偶数の時に<div>test</div>を配置するといった内容です。

A && Bの A が偽の場合やA || BのAが真の場合、つまりBの値にかかわらずA && BやA || B の評価結果が決定する場合にはBを評価しないといった言語使用です。

の &&の場合の性質の応用ですね、Aが偽の場合はたとえBが真であっても、結果は偽となるため、Bを評価しないと言った性質なので、iが奇数の場合は右の式が評価されず、<div>test</div>は配置されません。
しかし、iが偶数の場合はAが真なので、Bを評価しないと、式全体の評価ができないため、Bが評価され、<div>test</div>が配置されます。

おわりに

このようにして、とある条件が真の場合のみ、コンポーネントを配置することができます。
実際の実装では、三項演算子を用いて、条件が真の場合と偽の場合で配置するコンポーネントを分けると言った場面が多いかもしれませんが(知らんけど)&&の短絡評価の性質を利用することで、条件が真の場合のみコンポーネントを配置すると言った実装がスマート？にかけます。