🐹
Props生成時の三項演算子をレビュアーに優しく改善する方法
はじめに
株式会社ドワンゴのニコニコ生放送でフロントエンドを担当している misuken です。
今回はJavaScript及びTypeScriptで、Propsなどの条件分岐を含むオブジェクト生成時に使える小ネタの紹介です。
インデントが見にくくなる問題
Props生成時に、複数のオブエジェクトが並ぶようなパターンがあったりします。
const props: Props = {
foo: {
value: 1,
},
bar: {
value: 2,
},
};
ここで、条件による出し分け(出さないときは undefined)が生じると、インデントが一つ深くなり、可読性が下がってしまった経験はないでしょうか？
const props: Props = {
foo: {
value: 1,
},
bar: hasBar
? {
value: 2, // この程度なら1行で表記しても良いですが、複数行だったら。。。
}
: undefined,
};
特に、プロパティが多かったり、いくつも条件分岐があったり、ネストの深いものが混ざっていると、三項演算子の対象範囲を探すのも面倒だったりします。
解決策
このような場面では、三項演算子を (bool || undefined) && のような形式に変えることで、インデントがキレイに収まります。
const props: Props = {
foo: {
value: 1,
},
bar: (hasBar || undefined) && {
value: 2,
},
};
レビュアーに優しい差分
三項演算子を使う方法では、{ value: 2 } の部分は変更が不要ですが、それの前と後ろにコードを追加しなければなりません。
const props: Props = {
foo: {
value: 1,
},
- bar: {
- value: 2,
- },
+ bar: hasBar
+ ? {
+ value: 2,
+ }
+ : undefined,
};
今回紹介する方法では、 { value: 2 } の前にコードを追加するだけで済むので、条件の付け外しも簡単ですし、レビュアーにも優しい差分になります。
const props: Props = {
foo: {
value: 1,
},
- bar: {
+ bar: (hasBar || undefined) && {
value: 2,
},
};
まとめ
主にbooleanでPropsの出し分け判定を行う場合、三項演算子ではなく、(bool || undefined) && の形式を使うと、インデントが変化せず、レビュアーに優しい差分になります。
ちょっとしたことですが、コードがスッキリして把握しやすくなる場合があるので、気になる場所に試してみてはいかがでしょうか？
株式会社ドワンゴでは、様々なサービス、コンテンツを一緒につくるメンバーを募集しています。 ドワンゴに興味がある。または応募しようか迷っている方がいれば、気軽に応募してみてください。
Discussion