pugでクラスを状況によってクラスを使い分ける
2020 / 4 / 8

.c-button.u-rds--main(
class=`
${ typeArray.includes('arrow') ? "c-button--arrow" : "" }
${ typeArray.includes('thick') ? "c-button--thick" : "" }
${ type === "tel" ? "c-button--tel" : "" }
${ type === "button" ? "c-button--button" : "" }
`
)
こういう感じでクラスを追加しているのだけども、なんだか可読性もわるいし、""
でクラスを出さないようにしているので、ちょっとあれですが、動くので使っている。
もしかしたら、もっと良くできるかもしれん…。
pugはES6のシンタックスが効くのでそれは良いですね..。
p.c-button__text.u-bold(
class = `
${ type === 'button' && !typeArray.includes('font-size-semi-large') && !typeArray.includes('font-size-large') ? "u-font-size__s" : "" }
`
)
また、こんな感じで、複数の条件に当てはまるかどうかを検索するときは、記述が複雑になって、可読性が下がりがちなので、 https://stackoverflow.com/questions/37896484/multiple-conditions-for-javascript-includes-method このページみたいな、some
とincludes
を両方使用した方法を試してみると良いのかもしれない(要検証)
可読性が悪くなったら普通にif文かいてもいいのかな?