質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.45%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

385閲覧

JavaScript 関数化

BetterEveryday

総合スコア19

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2023/05/27 04:12

編集2023/05/27 04:15

前提・実現したいこと

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()">&#9776;</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/ツールのバージョンなど)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2023/05/27 05:17

ブラウザの開発者ツールのコンソール開いてエラーが出てないかの確認、ソースを開いて適当な場所にブレークポイントをおいてステップ実行しながら変数の中身を調べたり期待通りの流れで実行されるかを調べるということはしたのですか?
meg_

2023/05/27 06:05

> 関数化を試みると、動作しなくなってしまう。 「動作しなくな」る、というのは何も(エラーも含めて)起きないということでしょうか?
BetterEveryday

2023/05/27 06:16 編集

SurferOnWww さま、meg_ さま、 コメントどうもありがとうございます。 SurferOnWww さまに教示いただきました、開発者ツールのコンソールにて、 新規追加関数内で参照している subNavID の不足、参照できないエラーが発生していることが分かりましたので、 引数に追加することで動作することを確認できました。 初歩的、不手際な質問に貴重なお時間とお気持ちをいただきまして申し訳ございません。 SurferOnWww さま、 「助かりました」を示すために、 いただいたコメントで回答いただければ、ベストアンサーに設定したいと思います。 よろしくお願いいたします。
meg_

2023/05/27 06:09

> // ループ文内は省略 上記でddContentにどのような処理をしているのでしょうか?省略されては第三者には何も分からないかと思いますが。
退会済みユーザー

退会済みユーザー

2023/05/27 07:02

解決したのであれば、どのように解決したかをご自分で回答欄に書いて、それを自己解決としてマークをつけて、このスレッドはクローズ願います。
BetterEveryday

2023/05/27 07:35 編集

SurferOnWww さま、 では、教示いただたきました自己解決にいたします。 SurferOnWww さま、meg_ さま、 私の問題解決のために貴重なお時間とお気持ちをいただきまして どうもありがとうございました。
guest

回答1

0

自己解決

SurferOnWww さまにコメントで教示いただきました、開発者ツールのコンソールにて、
新規追加関数内で参照している subNavID の不足、参照できないエラーが発生していることが分かりましたので、
引数に追加することで関数化を実現できました。

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()">&#9776;</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 var aTextNode = document.createTextNode(navData[x].URLNAME); 55 aLink.href = navData[x].URL; 56 aLink.appendChild(aTextNode); 57 topNav.appendChild(aLink); 58 } else if (navData[x].dropDown === "yes") { 59 var buildSubNavigation; 60 buildSubNavigation = buildSubNavBar(navData[x].URLNAME); 61 topNav.appendChild(buildSubNavigation); 62 } else { 63 //build megamenu 64 var buildSubNavigation; 65 buildDirectorateNav = buildDirectorateMegaMenu(navData[x].URLNAME); 66 } 67 } 68} 69 70function buildDirectorateMegaMenu(navDataID) { 71 var buildNav; 72 var topNav = document.getElementById("myTopnav"); 73 buildNav = buildSubNavBar(navDataID, "megaMenu"); //Build mega menu and attach in buildSubNavBar() 74 topNav.appendChild(buildNav); 75} 76 77function buildSubNavBar(subNavID, isDirectorate) { 78 //create div and add dropdown class 79 var ddDiv = _createEl("div"); 80 if(isDirectorate === "megaMenu"){ 81 ddDiv.classList.add("Mdropdown"); 82 }else{ 83 ddDiv.classList.add("dropdown"); 84 } 85 //create button and add text 86 var btn = _createEl("button"); 87 if(isDirectorate === "megaMenu"){ 88 btn.classList.add("Mdropbtn"); 89 }else{ 90 btn.classList.add("dropbtn"); 91 } 92 var btnText = document.createTextNode(subNavID); 93 //append the text to the button 94 btn.appendChild(btnText); 95 96 //create i tag and add "fa fa-caret-down" classes 97 var itag = _createEl("i"); 98 itag.classList.add("fa"); 99 itag.classList.add("fa-caret-down"); 100 itag.classList.add("fa-fw"); 101 btn.appendChild(itag); 102 ddDiv.appendChild(btn); 103 104 var ddContent = _createEl("div"); 105 ddContent.classList.add("dropdown-content"); 106 for (var i = 0; i < cacheSubNavData.length; i++) { 107 if (cacheSubNavData[i].parentNav.URLNAME=== subNavID && cacheSubNavData[i].parentNav.dropDown !== "MegaMenu") { 108 var li = _createEl("li"); 109 var a = _createEl("a"); 110 var aTextNode = document.createTextNode(cacheSubNavData[i].subLink.Description); 111 112 a.href = cacheSubNavData[i].subLink.Url; 113 a.appendChild(aTextNode); 114 ddContent.appendChild(a); 115 } 116 } 117 118 if(isDirectorate !== "megaMenu"){ 119 ddContent = createContent(subNavID, ddContent, false, ddDiv); 120 121 } else { 122 //create div and add dropdown class 123 var megaDivDropDown = _createEl("div"); 124 megaDivDropDown.classList.add("dropdown"); 125 126 var megaBtn = _createEl("button"); 127 megaBtn.classList.add("dropbtn"); 128 129 megaDivDropDown.appendChild(megaBtn); 130 var megaI = _createEl("i"); 131 megaI.classList.add("fa"); 132 megaI.classList.add("fa-caret-down"); 133 134 megaBtn.appendChild(megaI); 135 136 var megaDDivContent = _createEl("div"); 137 megaDDivContent.classList.add("Mdropdown-content"); 138 139 ddDiv = createContent(subNavID, megaDDivContent, true, ddDiv); 140 } 141 ddDiv.appendChild(ddContent); 142 return ddDiv; 143} 144function _createEl(el) { 145 return document.createElement(el); 146} 147 148function createContent(subNavID, content, bMegaMenu, ddDiv) { 149 //Loop through categories & sub-categories items 150 for (var i = 0; i < cacheMenuCategoryData.length; i++) { 151 if (cacheMenuCategoryData[i].parentNav.URLNAME === subNavID) { 152 153 var headerDiv = _createEl("div"); 154 headerDiv.classList.add("header"); 155 156 var h2 = _createEl("h2"); 157 h2.appendChild(document.createTextNode(cacheMenuCategoryData[i].category)); 158 headerDiv.appendChild(h2); 159 160 var dDivRow = _createEl("div"); 161 dDivRow.classList.add("row"); 162 163 var divCol = _createEl("div"); 164 divCol.classList.add("column"); 165 var colHr = _createEl("h3"); 166 var colHrText = document.createTextNode(""); 167 colHr.appendChild(colHrText); 168 divCol.appendChild(colHr); 169 for (var x = 0; x < cacheMenuLinkData.length; x++) { 170 if (cacheMenuCategoryData[i].category === cacheMenuLinkData[x].category) { 171 var colAnchor = _createEl("a"); 172 colAnchor.href = cacheMenuLinkData[x].menuUrl.Url; 173 var menuColText = document.createTextNode(cacheMenuLinkData[x].menuItem); 174 colAnchor.appendChild(menuColText); 175 176 divCol.appendChild(colAnchor); 177 dDivRow.appendChild(divCol); 178 headerDiv.appendChild(dDivRow); 179 content.appendChild(headerDiv); 180 if(bMegaMenu) { 181 ddDiv.appendChild(content); 182 } 183 } 184 } 185 } 186 } 187 if(!bMegaMenu) { 188 return content; 189 } else { 190 return ddDiv; 191 } 192} 193

投稿2023/05/27 07:33

BetterEveryday

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.45%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問