
前提・実現したいこと
JavaScript で類似処理を関数化し、コード量を削減、可読性を高めたい。
発生している問題・エラーメッセージ
関数化を試みると、動作しなくなってしまう。
該当のソースコード
- 関数化前 : 動作するコード
JavaScript
1var cacheNavData = []; 2var cacheSubNavData = []; 3var cacheMenuCategoryData = []; 4var cacheMenuLinkData = []; 5 6$(document).ready(function(){ 7 getData("Navigation").done(function(data1){ 8 cacheNavData = data1.d.results; 9 getData("NavigationLink").done(function(data2){ 10 cacheSubNavData = data2.d.results; 11 getData("MenuCategory").done(function(data3){ 12 cacheMenuCategoryData = data3.d.results; 13 getData("MenuLink").done(function(data4){ 14 cacheMenuLinkData = data4.d.results; 15 createNavigation(cacheNavData); 16 }); 17 }); 18 }); 19 }); 20}) 21function getData(lName){ 22 var endPointUrl=_spPageContextInfo.webAbsoluteUrl; 23 if (lName == "NavigationLink") { 24 endPointUrl+="/_api/web/lists/getbyTitle('" + lName + "')/items?$select=parentNav/URL, parentNav/URLNAME,subLink&$expand=parentNav"; 25 } else if (lName == "MenuCategory") { 26 endPointUrl+="/_api/web/lists/getbyTitle('" + lName + "')/items?$select=parentNav/URL, parentNav/URLNAME,category&$expand=parentNav"; 27 } else { 28 endPointUrl+= "/_api/web/lists/getbyTitle('" + lName + "')/items"; 29 } 30 return $.ajax({ 31 url: endPointUrl, 32 type: "GET", 33 headers: { 34 "accept":"application/json;odata=verbose" 35 } 36 }); 37} 38function myFunction() { 39 var x = document.getElementById("myTopnav"); 40 if (x.className === "topnav") { 41 x.className += " responsive"; 42 } else { 43 x.className = "topnav"; 44 } 45} 46 47function createNavigation(navData) { 48 var headerElement = document.getElementById("suiteBarDelta"); 49 headerElement.insertAdjacentHTML('afterend', '<div class="topnav" id="myTopnav"><a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a></div>'); 50 var topNav = document.getElementById("myTopnav"); 51 for (var x = 0; x < navData.length; x++) { 52 if (navData[x].dropDown === "no") { 53 var aLink = _createEl("a"); 54 aLink.href = navData[x].URL; 55 aLink.appendChild(document.createTextNode(navData[x].URLNAME)); 56 topNav.appendChild(aLink); 57 } else if (navData[x].dropDown === "yes") { 58 var buildSubNavigation; 59 buildSubNavigation = buildSubNavBar(navData[x].URLNAME); 60 topNav.appendChild(buildSubNavigation); 61 } else { 62 //build megamenu 63 var buildSubNavigation; 64 buildDirectorateNav = buildDirectorateMegaMenu(navData[x].URLNAME); 65 } 66 } 67} 68 69function buildDirectorateMegaMenu(navDataID) { 70 var buildNav; 71 var topNav = document.getElementById("myTopnav"); 72 buildNav = buildSubNavBar(navDataID, "megaMenu"); //Build mega menu and attach in buildSubNavBar() 73 topNav.appendChild(buildNav); 74} 75 76function buildSubNavBar(subNavID, isDirectorate) { 77 //create div and add dropdown class 78 var ddDiv = _createEl("div"); 79 if(isDirectorate === "megaMenu"){ 80 ddDiv.classList.add("Mdropdown"); 81 }else{ 82 ddDiv.classList.add("dropdown"); 83 } 84 //create button and add text 85 var btn = _createEl("button"); 86 if(isDirectorate === "megaMenu"){ 87 btn.classList.add("Mdropbtn"); 88 }else{ 89 btn.classList.add("dropbtn"); 90 } 91 //append the text to the button 92 btn.appendChild(document.createTextNode(subNavID)); 93 94 //create i tag and add "fa fa-caret-down" classes 95 var itag = _createEl("i"); 96 itag.classList.add("fa"); 97 itag.classList.add("fa-caret-down"); 98 itag.classList.add("fa-fw"); 99 btn.appendChild(itag); 100 ddDiv.appendChild(btn); 101 102 var ddContent = _createEl("div"); 103 ddContent.classList.add("dropdown-content"); 104 for (var i = 0; i < cacheSubNavData.length; i++) { 105 if (cacheSubNavData[i].parentNav.URLNAME=== subNavID && cacheSubNavData[i].parentNav.dropDown !== "MegaMenu") { 106 var li = _createEl("li"); 107 var a = _createEl("a"); 108 var aTextNode = document.createTextNode(cacheSubNavData[i].subLink.Description); 109 110 a.href = cacheSubNavData[i].subLink.Url; 111 a.appendChild(aTextNode); 112 ddContent.appendChild(a); 113 } 114 } 115 116 if(isDirectorate !== "megaMenu"){ 117 118 //Loop through categories & sub-categories items 119 for (var i = 0; i < cacheMenuCategoryData.length; i++) { 120 if (cacheMenuCategoryData[i].parentNav.URLNAME === subNavID) { 121 122 var headerDiv = _createEl("div"); 123 headerDiv.classList.add("header"); 124 125 var h2 = _createEl("h2"); 126 var h2Text = document.createTextNode(cacheMenuCategoryData[i].category); 127 128 h2.appendChild(h2Text); 129 headerDiv.appendChild(h2); 130 131 var dDivRow = _createEl("div"); 132 dDivRow.classList.add("row"); 133 134 var divCol = _createEl("div"); 135 divCol.classList.add("column"); 136 var colHr = _createEl("h3"); 137 colHr.appendChild(document.createTextNode("")); 138 divCol.appendChild(colHr); 139 for (var x = 0; x < cacheMenuLinkData.length; x++) { 140 if (cacheMenuCategoryData[i].category === cacheMenuLinkData[x].category) { 141 var colAnchor = _createEl("a"); 142 colAnchor.href = cacheMenuLinkData[x].menuUrl.Url; 143 colAnchor.appendChild(document.createTextNode(cacheMenuLinkData[x].menuItem)); 144 145 divCol.appendChild(colAnchor); 146 dDivRow.appendChild(divCol); 147 headerDiv.appendChild(dDivRow); 148 ddContent.appendChild(headerDiv); 149 } 150 } 151 } 152 } 153 154 } 155 156 if(isDirectorate === "megaMenu"){ 157 //create div and add dropdown class 158 var megaDivDropDown = _createEl("div"); 159 megaDivDropDown.classList.add("dropdown"); 160 161 var megaBtn = _createEl("button"); 162 megaBtn.classList.add("dropbtn"); 163 164 megaDivDropDown.appendChild(megaBtn); 165 var megaI = _createEl("i"); 166 megaI.classList.add("fa"); 167 megaI.classList.add("fa-caret-down"); 168 169 megaBtn.appendChild(megaI); 170 171 var megaDDivContent = _createEl("div"); 172 megaDDivContent.classList.add("Mdropdown-content"); 173 174 //Loop through categories & sub-categories items 175 for (var i = 0; i < cacheMenuCategoryData.length; i++) { 176 177 if (cacheMenuCategoryData[i].parentNav.URLNAME=== subNavID) { 178 var headerDiv = _createEl("div"); 179 headerDiv.classList.add("header"); 180 181 var megaH2 = _createEl("h2"); 182 megaH2.appendChild(document.createTextNode(cacheMenuCategoryData[i].category)); 183 headerDiv.appendChild(megaH2); 184 185 var megaDDivRow = _createEl("div"); 186 megaDDivRow.classList.add("row"); 187 188 var megaDivCol = _createEl("div"); 189 megaDivCol.classList.add("column"); 190 var colHr = _createEl("h3"); 191 colHr.appendChild(document.createTextNode("")); 192 megaDivCol.appendChild(colHr); 193 194 for (var x = 0; x < cacheMenuLinkData.length; x++) { 195 if (cacheMenuCategoryData[i].category === cacheMenuLinkData[x].category) { 196 var colAnchor = _createEl("a"); 197 colAnchor.href = cacheMenuLinkData[x].menuUrl.Url; 198 var menuColText = document.createTextNode(cacheMenuLinkData[x].menuItem); 199 colAnchor.appendChild(menuColText); 200 201 megaDivCol.appendChild(colAnchor); 202 megaDDivRow.appendChild(megaDivCol); 203 headerDiv.appendChild(megaDDivRow); 204 megaDDivContent.appendChild(headerDiv); 205 ddDiv.appendChild(megaDDivContent); 206 } 207 } 208 } 209 } 210 } 211 ddDiv.appendChild(ddContent); 212 return ddDiv; 213} 214function _createEl(el) { 215 return document.createElement(el); 216}
試したこと
- 引数渡し
- 戻り値
- 変数の大域化
該当のソースコード
- 関数化試行中 : 動作しないコード (新規追加関数名: createContent、呼び出し元 buildSubNavBar 関数は変更箇所のみ抜粋。)
JavaScript
1function buildSubNavBar(subNavID, isDirectorate) { 2 // ↓ココまで変更なし 3 if(isDirectorate !== "megaMenu"){ 4 ddContent = createContent(ddContent); 5 } 6 // ↑ココから変更なし 7} 8 9function createContent(ddContent) { 10 // 呼び出し元のループ分をすべて移動 11 for (var i = 0; i < cacheMenuCategoryData.length; i++) { 12 // ループ文内は省略 13 } 14 return ddContent; 15}
補足情報(FW/ツールのバージョンなど)

ブラウザの開発者ツールのコンソール開いてエラーが出てないかの確認、ソースを開いて適当な場所にブレークポイントをおいてステップ実行しながら変数の中身を調べたり期待通りの流れで実行されるかを調べるということはしたのですか?
> 関数化を試みると、動作しなくなってしまう。
「動作しなくな」る、というのは何も(エラーも含めて)起きないということでしょうか?
SurferOnWww さま、meg_ さま、
コメントどうもありがとうございます。
SurferOnWww さまに教示いただきました、開発者ツールのコンソールにて、
新規追加関数内で参照している subNavID の不足、参照できないエラーが発生していることが分かりましたので、
引数に追加することで動作することを確認できました。
初歩的、不手際な質問に貴重なお時間とお気持ちをいただきまして申し訳ございません。
SurferOnWww さま、
「助かりました」を示すために、
いただいたコメントで回答いただければ、ベストアンサーに設定したいと思います。
よろしくお願いいたします。
> // ループ文内は省略
上記でddContentにどのような処理をしているのでしょうか?省略されては第三者には何も分からないかと思いますが。

解決したのであれば、どのように解決したかをご自分で回答欄に書いて、それを自己解決としてマークをつけて、このスレッドはクローズ願います。
SurferOnWww さま、
では、教示いただたきました自己解決にいたします。
SurferOnWww さま、meg_ さま、
私の問題解決のために貴重なお時間とお気持ちをいただきまして
どうもありがとうございました。

回答1件
あなたの回答
tips
プレビュー