createMenu.js

const dataSet = [
  {
    title: "top",
    uri: "/top",
    description: "このwebサイトのTOPページ",
    tags: ["website"],
  },
  {
    title: "about",
    uri: "/about",
    description: "このwebサイトの説明",
    tags: ["about"],
  },
  {
    title: "blog",
    uri: "/blog",
    description: "ブログ一覧",
    tags: ["article"],
  }
];

const createFragment = ({ children }) => {
  const fragment = document.createDocumentFragment()
  children.forEach(child => {
    fragment.appendChild(child);
  });
  return fragment;
}

const createElement = ({ tagName, children, ...props }) => {
  const element = document.createElement(tagName);
  if (children) {
    element.appendChild(Array.isArray(children) ? createFragment({ children }) : children);
  }
  Object.entries(props).forEach(([key, value]) => {
    element[key] = value;
  })
  return element;
}

const createMenuItem = (props) => {
  return createElement({
    tagName: "li",
    children: createElement({ tagName: "a", ...props.anchor })
  });
}

const createMenu = (props) => {
  return createElement({
    tagName: "ul",
    children: props.items.map(createMenuItem)
  });
}


const generateMenuProps = (dataSet, baseUrl) => {
  const items = dataSet.map(param => {
    return {
      anchor: {
        text: param.title,
        href: baseUrl + param.uri,
      },
    };
  });
  return { items };
}

const menuProps = generateMenuProps(dataSet, "https://example.com");

createMenu(menuProps);