JavaScriptでHTMLを表示・非表示の選択をしたい時の良い感じの書き方

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>
`);
}

参考：pickr/pickr.js at master · Simonwep/pickr