Result

上記のように任意のHTML要素を動的生成するスクリプトです。

軽量且つ非依存で、HTMLタグの生成、プロパティの適用、コンテンツ追加、DOM要素の選択が容易に行えます。

javascript

(() => {
  const assignDeep = (elm, props) => Object.entries(props).forEach(([key, value]) =>
    typeof value === 'object' ? assignDeep(elm[key], value) : Object.assign(elm, {[key]: value}))

  const tagNames = [
    'a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base',
    'bdi', 'bdo', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 
    'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 
    'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset',
    'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 
    'h6', 'head', 'header', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins',
    'kbd', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'meta', 
    'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 
    'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 
    'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 
    'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 
    'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 
    'ul', 'var', 'video', 'wbr'
  ].forEach(tag => window[tag] = function(...args) {
    const props = typeof args[0] == 'object' ? args.shift() : null
    const elm = document.createElement(tag)
    props && assignDeep(elm, props)
    elm.append(...args.map(a => typeof a == 'string' ? document.createTextNode(a) : a))
    return elm
  })
  window['$'] = elm => document.querySelector(elm)
  window['$all'] = elm => Array.from(document.querySelectorAll(elm))
})()

オブジェクトのネストされたプロパティを再帰的に設定するassignDeep関数、HTML要素を作成するtagNames関数や$、$allといったラッパーなどの各ヘルパー関数で構成されています。

以下、使用例。

const myDiv = div(
  {id: 'container', className: 'my-class'}, 
  h1('こんにちは'), 
  p('HTMLを動的に生成するJavaScriptライブラリです。')
);

document.body.appendChild(myDiv);

上記により以下のHTMLが生成されます。

<div id="container" class="my-class">
<h1>こんにちは</h1>
<p>HTMLを動的に生成するJavaScriptライブラリです。</p>
</div>

要素へのプロパティ設定や子要素の追加が柔軟に行う事が出来、繰り返し的な要素の作成が効率化されるなど生産性の向上に繋げられそうです。

動的なWebページで活用すれば、より少ないコードで複雑なUIを実現できるのではないかと思います。

via

TinyJS
MITライセンスの元でソースコードが公開されています。