【要約】配列代入時に条件付き要素を追加しない方法 [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
開発者が配列の要素を条件付きで追加しようとする際、三項演算子の戻り値が配列の長さに影響を与える問題。
- ・
bool ? 'item?' : nullと記述すると、false時でもnullが要素として格納される。 - ・結果として、配列の
lengthが期待値より大きくなる。 - ・
['item1', null, 'item2']のように、意図しない要素が残る。
// Approach
スプレッド構文と空配列を組み合わせ、条件を満たさない場合に「何も展開しない」手法を採用する。
- ・
...(bool ? ['item?'] : [])という構文を用いる。 - ・条件が真の場合、要素を持つ配列
['item?']を展開する。 - ・条件が偽の場合、空配列
[]を展開するため、要素は追加されない。
// Result
この手法により、動的な配列生成におけるデータ整合性が向上する。
- ・
boolがfalseの場合、配列のlengthは期待通り 2 になる。 - ・
nullなどの不要な要素が混入しない。 - ・
['item1', 'item2']という正しい状態を維持できる。
Senior Engineer Insight
> ReactのProps生成やAPIレスポンス構築において、極めて実用的なテクニックである。
null の混入は、TypeScriptの型定義において null を許容せざるを得ず、型安全性を損なう。スプレッド構文による制御は、コードの可読性と堅牢性を両立させる。ただし、条件が複雑に重なる場合は、可読性低下を防ぐためロジックの分離も検討すべきである。