JavaScriptでHTMLの表示・非表示を操作したい時には、今まで以下のように書いていた。
if(isDisplay) { let dom = `<div id="sample">hoge</div>`; } else { let dom = `<div id="sample" style="display:none;">hoge</div>`; }
上記は、isDisplayがtrueの時は表示して、falseの時は非表示にすると言うもの。上記のようにシンプルなコードだとまだしも、実際には複数行に渡って書くことが多いので、無駄にコードが長くなる傾向があった。
JavaScriptでHTMLを表示・非表示にするより良い書き方
GW中にpickr.jsと言うライブラリを読んでいたときに、良い感じの書き方を見つけた。
pickr.jsでは以下のようにhidden関数を作ってあげて、このhidden関数をhtml要素内で実行している、という形を取っている。
function create(option = false) {
const hidden = con => con ? "" : 'style="display:none" hidden';
const root = _.createFromTemplate(`
<div data-key="root" class="pickr" ${hidden(option)}></div>
`);
}