変奏現実

const createHtmlElement = (elementName, options) => {
・・・
・・・
  const rc = Object.keys(options).map(
    (key) => (chkOriginal(key) || chkStyle(key) || chkEvent(key) || setAttribute(key)));
  );
}

function chkOriginal(key) {
  const value = options[key];
  ...
}
function chkStyle(key) {
  const value = options[key];
  ...
}
function chkEvent(key) {
  const value = options[key];
  ...
}
function setAttribute(key) {
  const value = options[key];
  ...
}

const createHtmlElement = (elementName, options) => {
・・・
const chkOriginal = (key,value) => {
  ...
}
const chkStyle = (key,value) => {
  ...
}
const chkEvent = (key,value) => {
  ...
}
const setAttribute = (key,value) => {
  ...
}

・・・
  const rc = Object.keys(options).map(
    const value = options[key];
    (key) => (chkOriginal(key,value) || chkStyle(key,value) || chkEvent(key,value) || setAttribute(key,value)));
  );
}

const rc = Object.keys(options).map(function (key) {
    const value = this[key];
    return chkOriginal(key, value) || chkStyle(key, value) || chkEvent(key, value) || setAttribute(key, value);
}, options);

/**
 * HTMLエレメントを作成する
 * @param {string} elementName                              エレメント名
 * @param {{attributeName:,... eventName:,...}}} options    設定内容
 * @returns {HTMLElement}                                   作成したHTMLElement
 */
const createHtmlElement = (elementName, options) => {
    const fileName = 'js/lib/createHtmlElement.js';
    const funcName = 'createHtmlElement'; //debugLog(`${fileName}:${funcName}(elementName: ${elementName}, options)`);
    /**
     * 独自の処理が必要な場合
     * @param {} param      属性
     * @returns {boolean}   結果
     */
    const chkOriginal = (param) => {
        let rc = false;
        try {
            switch (param.name) {
                case 'className': // classNameはメソッドで、\x20で文字列を区切って複数の属性を指定できる
                case 'classList': // classListはメソッド
                    let v = param.value;
                    if (!Array.isArray(v)) { v = v.split('\x20'); }
                    param.element.classList.add(...v);  // 配列を展開してクラスリストに追加する
                    rc = true;
                    break;
                case 'innerHTML': // innerHTMLはメソッド扱い    ※未使用
                    param.element.innerHTML = param.value;
                    rc = true;
                    break;
                case 'innerText': // innerTextはメソッド扱い
                    param.element.innerText = param.value;
                    rc = true;
                    break;
                case 'parent':      // parentはメソッド
                    param.value.appendChild(param.element);
                    rc = true;
                    break;
                case 'appendChild': // appendChildはメソッド    ※未使用
                    param.element.appendChild(param.value);
                    rc = true;
                    break;
                case 'insertBefore':    // insertBeforeはメソッド   ※スクロール処理で座標の小さい方向へセルを作る際に使用
                    param.value.parentNode.insertBefore(param.element, param.value);
                    rc = true;
                    break;
            }   // end of switch
        } catch (ex) {
            debugLog(`${funcName}(elementName: ${elementName}) '${param.name}'属性の固有処理に失敗 '${ex}'`);
            rc = false;
        }
        return rc;
    };
    /**
     * スタイル属性の場合
     * @param {} param      属性
     * @returns {boolean}   結果
     */
    const chkStyle = (param) => {
        let rc;
        try {
            //  style-xxxxのキーの場合
            let styleChk = param.name.match(/^style_(.*)/);
            if (styleChk) {
                let styleName = styleChk[1];
                switch (styleName) {
                    case 'width':
                        param.element.style.width = param.value;
                        break;
                    case 'height':
                        param.element.style.height = param.value;
                        break;
                    default:
                        styleChk = null;
                        break;
                }   // end of switch
            }
            rc = styleChk !== null;
        } catch (ex) {
            debugLog(`${funcName}(elementName: ${elementName}) '${param.name}'スタイル属性に${param.value}を設定失敗 '${ex}'`);
            rc = false;
        }
        return rc;
    }
    /**
     * eventの場合
     * @param {} param      属性
     * @returns {boolean}   結果
     */
    const chkEvent = (param) => {
        let rc;
        try {
            const eventList = ['ended'];    // イベントリスト
            rc = eventList.includes(param.name);   // イベントリストに含まれているかどうか
            if (rc) {   // イベントリスナを登録する
                param.element.addEventListener(param.name, param.value);
            }
        } catch (ex) {
            debugLog(`${funcName}(elementName: ${elementName}) '${param.name}'イベントリスナの登録に失敗 '${ex}'`);
            rc = false;
        }
        return rc;
    }
    /**
     * HTMLエレメントに属性を追加する
     * @param {} param      属性
     * @returns {boolean}   結果
     */
    const setAttribute = (param) => {
        try {
            param.element.setAttribute(param.name, param.value);
            return true;
        } catch (ex) {
            debugLog(`${funcName}(elementName: ${elementName}) '${param.name}'属性に${param.value}を設定失敗 '${ex}'`);
            return false;
        }
    }
    let elm = document.createElement(elementName);
    //  optionsの設定名を取得しぶん回す！
    const rc = Object.keys(options).map(function (key) {
        const value = this[key];
        const param = { 'name': key, 'value': value, 'element': elm };
        return chkOriginal(param) || chkStyle(param) || chkEvent(param) || setAttribute(param);
    }, options)
        .filter(v => !v);   // trueならば削除する
    if (0 < rc.length) {
        debugLog(`${funcName}(elementName: ${elementName}) 未処理属性数：${rc.length}件`);
    }
    return elm;
}

let a = createHtmlElement('a', {
    href: url,
    download: fileName,
    text: "re-download",
});

const div = createElement('div');
shadow.addChiled(div);
div.className = 'scroll';
div.id = `div${sn}`;
div.style.height = _spreadSheet.width;
div.style.width = _spreadSheet.height;
div.tabIndex =  `${sn}`;

//  シャドールートを作成
_layout.shadowRoot = (!_layout.shadowRoot) ? _spreadSheet.customElement.attachShadow({ mode: "open" }) : _layout.shadowRoot;
const shadow = _layout.shadowRoot;
//  既存のHTMLElementを削除
Array.from(_layout.shadowRoot.children).forEach((ch) => ch.remove());
//  スタイルシート部
const style = _layout.createStyle(sn, _spreadSheet.rows, _spreadSheet.cols, true, true);
shadow.appendChild(style);
//  スプレッドシート部
_layout.divTableN = createHtmlElement('div', { parent: shadow, className: 'scroll', id: `div${sn}`, style_height: _spreadSheet.width, style_width: _spreadSheet.height, tabIndex: `${sn}`, });
_layout.tableN = await _layout.createTableElement(_layout.divTableN, 'spread-sheet', `table${sn}`);
_layout.divScrollX = createHtmlElement('div', { parent: _layout.divTableN, className: 'scroll-x', id: `divScrollX${sn}`, style_height: '17px', style_width: _spreadSheet.height, tabIndex: `${sn}`, });
_layout.divScrollY = createHtmlElement('div', { parent: _layout.divTableN, className: 'scroll-y', id: `divScrollY${sn}`, style_height: _spreadSheet.width, style_width: '17px', tabIndex: `${sn}`, });