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

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

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

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

JavaScript

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

解決済

EJSでforを使って効率化したい

harigoE8
harigoE8

総合スコア10

EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

JavaScript

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

2回答

0評価

0クリップ

220閲覧

投稿2022/01/19 03:22

実現したい事

現在、ejsを使用しながらHPを作成しております。
似たようなコンテンツが多いのでforEachを使ってまとめて書きたいと考えました。
しかし、上手く行かずハマっているので、是非ご教授頂きたいです。
ちなみに完成形のイメージとしてはこちらです。↓

イメージ説明
上記のようなboxを12個作ります。

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

現状はこんな感じになっています。↓

イメージ説明
一つのboxで各画像を12回繰り返している感じになっています。

該当のソースコード

index.ejs

<% var title= "TOP"; var description = "トップのdescription"; %> <% var mainName = ['01','04','06','08','10','12','14','14','14','14','14','14']; %> <% var mainIcon = ['46','48','50','52','54','56','58','60','62','63','65','66']; %> <% var mainTitle = ['16','19','21','23','26','28','31','33','35','37','40','43']; %> <% include src/ejs/template/_head %> <div class="l-main"> <% include src/ejs/template/_sidebar %> <div class="l-main__menu"> <% for (var i = 0; i < 12; i++) { %> <div class="p-menuBox"> <% mainName.forEach(function (value) { %> <div class="p-menuBox__name"><img src="../assets/images/mainmenu/menu/spr_top01_<%= value %>.png"></div> <% }); %> <div class="p-menuBox__inner"> <% mainIcon.forEach(function (value) { %> <div class="p-menuBox__icon"><img src="../assets/images/mainmenu/icon/spr_top01_<%= value %>.png"></div> <% }); %> <% mainTitle.forEach(function (value) { %> <div class="p-menuBox__title"><img src="../assets/images/mainmenu/menu2/spr_top01_<%= value %>.png"></div> <% }); %> <div class="p-menuBox__text"> <p>グッピーズは、人材採用をITで革新し続ける企業です。</p> </div> </div> </div><% } %> </div> <% include src/ejs/template/_footer %>

_menuBox.scss

.p-menuBox { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; height: 230px; width: 230px; border: solid 1px #cc9933; &:nth-of-type(n + 4) { margin-top: 10px; } &:hover { background-color: #bbb; } #{&}__name { display: inline-block; width: 100%; height: 15px; margin-top: 10px; } #{&}__inner { display: flex; flex-wrap: wrap; justify-content: center; width: 200px; } #{&}__icon { width: 80px; height: 80px; } #{&}__title { margin-top: 10px; width: 100%; height: 20px; } #{&}__text { margin-top: 10px; font-size: 5px; font-size: 0.5rem; } }

なぜこうなっているのか現在原因を究明している所です。
詳しい方ございましたら、アドバイスまた参考サイトをご教授頂けますと幸いです。

補足情報(FW/ツールのバージョンなど)

・npm -v 6.9.0
・node -v 12.6.0
・webpack -v 5.65.0
・ yarn -v 1.22.17

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

JavaScript

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