以前EJSで変数を使ってmeta情報の設定について書きました
今回はも同じく変数についてですが、別の事例でfor文も交えて書こうと思います
QAセクションを管理しやすくする
こちらが今回変数を使用して管理したい対象です
<!-- QAセクション -->
<section class="qa">
<div class="qa__inner">
<h2 class="section-title">qaタイトルです</h2>
<p class="section-subtitle">qaサブタイトルです</p>
<ul class="qa__list">
<li class="qa__list-item">
<p class="question">question：q1だよおおお </p>
<p class="answer">answer：a1ですううう </p>
</li>
<li class="qa__list-item">
<p class="question">question：q2を書いてるよ </p>
<p class="answer">answer：a2が答えだよ！ </p>
</li>
<li class="qa__list-item">
<p class="question">question：q3ですq3です </p>
<p class="answer">answer：答えa3です </p>
</li>
</ul>
</div>
</section>質問リスト、ちょっとなら良いんですが項目増えてくると面倒ですよね
少しすっきりさせて管理をしやすくすることができるので、やっていきます
セクションタイトルをパーツ化する
セクションタイトルって共通なことが多いと思います。そういった場合は共通パーツとして定義してあげると使い回せるようになり便利です
以下は共通化したものです
<!-- QAセクション -->
<% const qa_title = {
title: 'qaタイトルです',
subtitle: 'qaサブタイトルです',
};
%>
<section class="qa">
<div class="qa__inner">
<%- include('./common/_section-title', { section: qa_title } ) %>
<ul class="qa__list">
<li class="qa__list-item">
<p class="question">question：q1だよおおお </p>
<p class="answer">answer：a1ですううう </p>
</li>
<li class="qa__list-item">
<p class="question">question：q2を書いてるよ </p>
<p class="answer">answer：a2が答えだよ！ </p>
</li>
<li class="qa__list-item">
<p class="question">question：q3ですq3です </p>
<p class="answer">answer：答えa3です </p>
</li>
</ul>
</div>
</section>変数を設定する
まずセクションタイトルに入れる項目を変数化します
今回はタイトルとサブタイトルですので以下のように定義しています
<% const qa_title = {
title: 'qaタイトルです',
subtitle: 'qaサブタイトルです',
};
%>includeでパーツを呼び出す
以下のようにして呼び出します
<%- include('./common/_section-title', { section: qa_title } ) %>第一引数は読み込むファイルのパス（.ejsは省略可）
第二引数は定義した変数qa_titleを読み込んだ_section-title.ejs内ではsectionという名前で渡しています。
つまりsectionほにゃららってやらないと変数引っ張ってこれないよ！ということ
セクションタイトル部分を別ファイルにコピペする
コピペした上でタイトルとサブタイトル部分を変数で指定します
上で言ったとおり、sectionという値を使わないと読めません。
qa_title内ではタイトルはtitle、サブタイトルはsubtitleと定義してあるので
section.titleといったようにピリオドで繋げて指定します
<h2 class="section-title"><%= section.title %></h2>
<p class="section-subtitle"><%= section.subtitle %></p>質問リストを変数と繰り返し文で整理する
以下は完成形です
<!-- QAセクション -->
<% const qa_title = {
title: 'qaタイトルです',
subtitle: 'qaサブタイトルです',
};
%>
<% const qa = [
{
question: 'q1だよおおお',
answer: 'a1ですううう',
},
{
question: 'q2を書いてるよ',
answer: 'a2が答えだよ！',
},
{
question: 'q3ですq3です',
answer: '答えa3です',
},
];
%>
<section class="qa">
<div class="qa__inner">
<%- include('./common/_section-title', { section: qa_title } ) %>
<ul class="qa__list">
<% for( let i in qa ) { %>
<li class="qa__list-item">
<p class="question">question：<%- qa[i].question %>
</p>
<p class="answer">answer：<%- qa[i].answer %>
</p>
</li>
<% } %>
</ul>
</div>
</section>変数を設定する
セクションタイトルと同じように変数を定義します
<% const qa = [
{
question: 'q1だよおおお',
answer: 'a1ですううう',
},
{
question: 'q2を書いてるよ',
answer: 'a2が答えだよ！',
},
{
question: 'q3ですq3です',
answer: '答えa3です',
},
];
%>for文で繰り返す
for(…in…)を使ってます
<section class="qa">
<div class="qa__inner">
<%- include('./common/_section-title', { section: qa_title } ) %>
<ul class="qa__list">
<% for( let i in qa ) { %>
<li class="qa__list-item">
<p class="question">question：<%- qa[i].question %>
</p>
<p class="answer">answer：<%- qa[i].answer %>
</p>
</li>
<% } %>
</ul>
</div>
</section>iにはインデックス番号が入り、それに対応した配列の要素に定義されている変数の中身が代入されます
この例でいうと、インデックス番号0〜2の要素が入っている形ですね
さらにセクションをパーツにする場合
セクション部分をパーツにして、includeで読み込みます
第二引数は最初にやったときと同様の考えで書きます
配列qaはqaで変数を引っ張ってきているため、qaをqaという値で渡しています
セクションタイトル部分は上の方にあるのと同様qa_titleをsectionという値で渡します
<!-- QAセクション -->
<% const qa_title = {
title: 'qaタイトルです',
subtitle: 'qaサブタイトルです',
};
%>
<% const qa = [
{
question: 'q1だよおおお',
answer: 'a1ですううう',
},
{
question: 'q2を書いてるよ',
answer: 'a2が答えだよ！',
},
{
question: 'q3ですq3です',
answer: '答えa3です',
},
];
%>
<%- include('./common/_qa_section', { qa: qa, section: qa_title } ) %>このへんは慣れるまで難しいかもしれません
実際に手を動かして、どうなるかやってみると理解できるんじゃないかと思います
