BFE.devでのAI解答例 - JavaScript コーディング問題
118. Virtual DOM II - createElement

解法例:

function createElement(type, props, ...children) {  return {    type,    props: {      ...props,      children: children.map(child =>        typeof child === "object"          ? child          : {              type: "TEXT",              props: { nodeValue: child },            }      ),    },  };}function render(vDOM) {  const { type, props } = vDOM;  if (type === "TEXT") {    return document.createTextNode(props.nodeValue);  }  const el = document.createElement(type);  for (const [attr, value] of Object.entries(props)) {    if (attr === "children") {      for (const child of value) {        el.appendChild(render(child));      }    } else {      el.setAttribute(attr, value);    }  }  document.body.appendChild(el);}

この解法例では、createElement() はJSXを想定し、1つ目の引数にはHTMLタグ名しか使わないことを想定しています。また、子要素がTextNodeの場合はtype: "TEXT"のpropを作成します。render() では再帰的にDOM要素を生成しながら子要素に進んでいき、propsではなくsetAttribute()を用いて属性を設定します。最終的に document.body.appendChild()することでDOMが生成されます。