JavaScript 関数化

前提・実現したいこと

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/ツールのバージョンなど）

退会済みユーザー

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_ さま、私の問題解決のために貴重なお時間とお気持ちをいただきましてどうもありがとうございました。

行動規範の内容に同意します

回答1件

自己解決

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