前提

HTML、CSS、Javascriptを使ってWebページを作成しています。
Menuページを作成しています。
Javascriptを使ってHTMLのコードを簡潔にしたい。
更に、今後メニューが増えた場合にもコードの追加がほとんど必要ないくらいに可用性を上げたいと思って作成しましたが、
全く可用性は上がっていません。

実現したいこと

ここに実現したいことを箇条書きで書いてください。

現状冗長なJavascriptのコードをできる限り簡潔記述にしたい。

発生している問題・エラーメッセージ

エラーメッセージはないです。

該当のソースコード

HTML
1　　　　　　　　　　　　　　　　　　　　　<div id="MenuFrame" class="MenuFrame">
2
3                <div id = "HeaderFrame" class="HeaderFrame">   
4                    <h1>Lunch Menu</h1>
5                    <p class="OfferTime">11:00 ~ 14:00</p>
6                </div>
7
8                <!-- 日替わりランチプレート -->
9                <div id="menu_box" class="menu_box">
10                    <div id="menu_box_left" class="menu_box_left">
11                        <img src="images/menu/food120x120/higawari.jpg" alt="日替わりランチプレート">
12                    </div>
13                    <div id="menu_box_right" class="menu_box_right">
14                        <p class="menu_name">
15                            日替わりランチプレート
16                        </p>
17                        <p class="menu_contents">
18                            オーナーがその日の気分で決める日替わりランチプレート。
19                            毎日違うから来店のたびに楽しみです。
20                        </p>
21                        <p class="menu_price">
22                            ¥850
23                        </p>
24                    </div>
25                </div>
26
27                <!-- のざき牛のローストビーフ100g -->
28                <div id="menu_box" class="menu_box">
29                    <div id="menu_box_left" class="menu_box_left">
30                        <img src="images/menu/food120x120/nozaki.jpg" alt=" のざき牛のローストビーフ100g">
31                    </div>
32                    <div id="menu_box_right" class="menu_box_right">
33                        <p class="menu_name">
34                            のざき牛のローストビーフ100g
35                        </p>
36                        <p class="menu_contents">
37                            鹿児島県産最高級黒毛和牛のレアブランド。
38                            ご注文頂いてから焼き上げますので、少々お時間を頂きます。
39                            予めご了承下さい。
40                        </p>
41                        <p class="menu_price">
42                            ¥1870
43                        </p>
44                    </div>
45                </div>
46
47                ・
48                ・
49                ・
50                ・
51
52            </div>

Javascript
1const LunchMenuTables = [
2
3    {name: "日替わりランチプレートスープ付き" , contents:"オーナーがその日の気分で決める日替わりランチプレート。毎日違うから来店のたびに楽しみです。" , price: "¥850"},
4    ・
5    ・
6    ・
7    ・
8
9];
10
11let MenuFrame = document.getElementById('MenuFrame');
12
13
14for(let i=0; i<LunchMenuTables.length; i++){
15    let LunchMenuName = LunchMenuTables[i].name;
16    let LunchMenuContents = LunchMenuTables[i].contents;
17    let LunchMenuPrice = LunchMenuTables[i].price;
18
19
20
21    if(i === 0){
22        let MenuBox = document.createElement('div');
23        MenuBox.classList.add('menu_box');
24        MenuBox.id = "MenuBox";
25        let MenuBoxID = document.getElementById('MenuBox');
26
27            let MenuBoxLeft = document.createElement('div');
28            MenuBoxLeft.classList.add('menu_box_left');
29            MenuBoxLeft.id = "MenuBoxLeft";
30            let MenuBoxLeftID = document.getElementById('MenuBoxLeft');
31
32                let Image = document.createElement('img');
33                Image.src = "images/menu/food120x120/higawari.jpg";
34                Image.alt = "日替わりランチプレート";
35                Image.width = 120;
36                Image.height = 120;
37                
38
39                    let MenuBoxRight = document.createElement('div');
40                    MenuBoxRight.classList.add('menu_box_right');
41                    MenuBoxRight.id = "MenuBoxRight";
42                    let MenuBoxRightID = document.getElementById('MenuBoxRight');
43                    
44                        let MenuName = document.createElement('p');
45                        MenuName.classList.add("menu_name");
46                        MenuName.textContent = LunchMenuTables[i].name;
47
48                        let MenuContents = document.createElement('p');
49                        MenuContents.classList.add("menu_contents");
50                        MenuContents.textContent = LunchMenuTables[i].contents;
51
52                        let MenuPrice = document.createElement('p');
53                        MenuPrice.classList.add('menu_price');
54                        MenuPrice.textContent = LunchMenuTables[i].price;
55
56
57            MenuFrame.appendChild(MenuBox);
58
59                MenuBox.appendChild(MenuBoxLeft);
60                    MenuBoxLeft.appendChild(Image);
61                    
62                MenuBox.appendChild(MenuBoxRight);
63                    MenuBoxRight.appendChild(MenuName);
64                    MenuBoxRight.appendChild(MenuContents);
65                    MenuBoxRight.appendChild(MenuPrice);
66
67    }else if(i === 1){
68                    ・
69                    ・
70                    ・
71
72    }else if(i === 2){
73                    ・
74                    ・
75                    ・
76    }else if(i === 3){
77        　　　　　　　・
78        　　　　　　　・
79        　　　　　　　・
80
81    }else if(i === 4){
82        　　　　　　　・
83        　　　　　　　・
84        　　　　　　　・
85       
86    }else if(i === 5){
87        
88        
89    }else if(i === 6){
90        
91        
92    }else if(i === 7){
93        
94        
95    }
96};

試したこと

for文で回して作成したdivタグ、pタグに入れていくのかと思い試したのですが、思い通りに行かず、for文とif文を組み合わせて切り分ければいけると思い試してみた結果、思い通りにはいったがコードが長くなりすぎてしまいました。

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

回答2件

ベストアンサー

テンプレを作っておいて構造はテンプレで共有、内容をあとから調整すれば効率はあがるとおもいます

参考

テンプレを使った参考

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  const list=[
4    {name:"a",price:100 ,content:"ほげほげ"},
5    {name:"b",price:1000,content:"ふがふが"},
6    {name:"c",price:500 ,content:"ぴよぴよ"},
7    ];
8  list.forEach(x=>{
9    const tmp=template.content.cloneNode(true);
10    ["name","price","content"].forEach(y=>{
11      tmp.querySelector(`.${y}`).textContent=x[y];
12    });
13    output.appendChild(tmp);
14  });
15});
16</script>
17<template id="template">
18<div>
19<div class="name"></div>
20<div class="price"></div>
21<div class="content"></div>
22</div>
23</template>
24<output id="output"></output>

投稿2022/11/29 05:48

編集2022/11/29 06:14

yambejp

総合スコア114814

mi...

2022/11/29 06:02

ご回答ありがとうございます。 Javascript初学者でyambejpさんのご回答に現状理解が全く追いついておりません。せっかくご回答頂いたのに失礼な質問になってしまうかもしれませんが、この自作した冗長なコードを簡潔に記述する方法はないのでしょうか？

yambejp

2022/11/29 06:12

追記しました。すべてをDOMで処理せずに「再利用するものはテンプレートで指定するとよい」という意図ですがこういうやり方は難しいでしょうか？

mi...

2022/11/29 08:58

追記のご返信ありがとうございます！お恥ずかしながら、かなり行き詰まっていました。ですので、すごく分かりやすいコードまで記載下さり本当に感謝しかありません。ご丁寧にご対応下さり本当にありがとうございました！！

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

画像のURLもLunchMenuTables に入れるべきかと思います。それが image プロパティに入っているとして、

js
1let menuFrame = document.getElementById('MenuFrame');
2for (let item of LunchMenuTables) {
3  menuFrame.insertAdjacentHTML('beforeend', `<div class="menu_box">
4      <div class="menu_box_left">
5        <img src="${item.image}" alt="${item.name}" width=120 height=120>
6      </div>
7      <div class="menu_box_right">
8        <p class="menu_name">${item.name}</p>
9        <p class="menu_contents">${item.contents}</p>
10        <p class="menu_price">${item.price}</p>
11      </div></div>`;
12}