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

解法

この問題では、DOMツリーを直列化してオブジェクトリテラルに変換する virtualize() と、オブジェクトリテラルからDOMツリーを復元する render() を実装する必要があります。

まずは virtualize() を実装します。ロジックとしては、与えられたDOM要素を再帰的にたどり、その要素のタイプ、プロパティ、子要素をオブジェクトリテラルに変換していくことになります。virtualize() は変換後のリテラルを返すため、この関数は副作用を持ちません。

次に、 render() を実装します。これは仕様に沿ってオブジェクトリテラルを再帰的にたどり、対応するDOM要素を作成します。そのため、 virtualize() とは対照的に、この関数はDOMを変更するため、それ自体がDOMに副作用を持ちます。

ここでは、子ノードをDOMに追加するために childNodes を使用するのではなく、appendChild() を使用することに留意してください。これは、 innerHTML や innerHTML+= を使用することによって許容範囲を超えることによる副作用を防ぐためです。

function virtualize(node) {
  if (!node) {
    // nodeがnullまたはundefinedの場合、nullを返します。
    return null;
  }
  if (node.nodeType === Node.TEXT_NODE) {
    // テキストノードの場合は単純な文字列を返します。
    return node.textContent;
  }
  // それ以外の場合は、自身のタイプ、プロパティ、子要素を含むオブジェクトリテラルを返します。
  const obj = {
    type: node.nodeName.toLowerCase(),
    props: {},
  };
  for (let attr of node.attributes) {
    obj.props[attr.name] = attr.value;
  }
  const childNodes = node.childNodes;
  const children = [];
  for (let i = 0; i < childNodes.length; i++) {
    children.push(virtualize(childNodes[i]));
  }
  obj.props.children = children;
  return obj;
}

function render(obj) {
  if (typeof obj === 'string') {
    // 文字列の場合テキストノードを返します。
    return document.createTextNode(obj);
  }
  // それ以外の場合は、typeプロパティをもとにDOM要素を作成します。
  const el = document.createElement(obj.type);
  // プロパティを設定します。
  for (let prop in obj.props) {
    if (prop === 'children') {
      // 子要素を追加します。
      const children = obj.props.children;
      for (let i = 0; i < children.length; i++) {
        el.appendChild(render(children[i]));
      }
    } else {
      // 属性を設定します。
      el.setAttribute(prop, obj.props[prop]);
    }
  }
  return el;
}

すべてのテストケースがパスするかどうか、確認してください。