なぜEJSを使うとコーディングが楽しくなるのか③ buttonカスタマイズ編

2024年12月21日

静的コーディングが圧倒的に楽になる、EJS。
前回までで、forEachとheaderの共通化についてまとめました。

第3回目の今日は、Web制作必須のbuttonの効率化です。
全ページで使うbuttonだけど、場所によってテキストが変わったり色が変わったりと面倒。

これを簡単にする実装方法について解説します。

↓以下前回までのEJSのまとめ記事。

①forEach文

②header共通化

buttonを毎回毎回書くのは面倒臭い

buttonってテキストとか色が少しずつ違っていて面倒くさい。
↓例えばこんなやつ。

テキストが違うし、削除ボタンだけ赤色。
コードが少ないからと侮ると、buttonの数が増えるほどに管理の難易度が爆上がりします。

こういった同じ構造の場合、EJSを使えば圧倒的に効率化します。

今回もHTMLで書いた場合と、EJSで書いた場合の２パターンを比較します。

HTMLで直接書くと後々めんどくさい事態になる。

HTMLでそのまま書く場合こんな感じです。↓

<body>
  <div class="button-container">
    <button class="btn btn-primary">送信する <span class="arrow">→</span></button>
    <button class="btn btn-primary">変更する <span class="arrow">→</span></button>
    <button class="btn btn-danger">削除する <span class="arrow">→</span></button>
  </div>
</body>

buttonタグは1行だけですが、もしもこのbuttonが10個、20個と増えていったらどうでしょうか。

矢印アイコンの形を変えたいという場合、HTMLを10個分全て変えなくてはなりません。
その場合修正漏れなどが発生したりと想定の何倍も時間がかかったりします。

他にもテキストの文字を間違えてしまったり、
色の指定方法をいちいち探さないといけないなど、ストレスがかかります。

ううう、めんどくさい…

EJSで書くと一度に修正できる。

一方でEJSでは1箇所でコードをまとめられるので、一気に効率化します。

①button.ejsでコードを一元管理する。

button.ejs
<%
  let buttonText = '';
  let buttonColor = '';

  switch (type) {
    case 'send':
      buttonText = '送信する';
      buttonColor = 'btn-blue';
      break;
    case 'edit':
      buttonText = '変更する';
      buttonColor = 'btn-blue';
      break;
    case 'delete':
      buttonText = '削除する';
      buttonColor = 'btn-red';
      break;
    default:
      buttonText = 'ボタン';
      buttonColor = 'btn-gray';
  }
%>

<button class="btn <%= buttonColor %>">
  <%= buttonText %>
  <span class="arrow">→</span>
</button>

・swich文について。
冒頭のswich文で、buttonの状態を定義します。

・状態に合わせてHTMLを変える。
<%= buttonText %>という部分で、swich文で定義したテキストを表示。
<%= buttonColor %>という部分で、class名を変えることで色も柔軟に変更できる。

②それぞれのページでbutton.ejsを呼び出す。
次に上記で定義したbutton.ejsを呼び出します。

<div class="button-container">
    <!-- 送信ボタン -->
    <%- include('button.ejs', { type: 'send'}) %>

    <!-- 変更ボタン -->
    <%- include('button.ejs', { type: 'edit'}) %>

    <!-- 削除ボタン -->
    <%- include('button.ejs', { type: 'delete'}) %>
  </div>

・<%- include(‘button.ejs’, { type: ‘send’}) %>
incluedという書き方で、作ったbutton.ejsを呼び出せます。
swich文で定義した条件を、 { type: ‘send’}で定義します。

この1行を呼び出すだけなので、修正漏れを極限まで減らせるし、何よりシンプルです。

swich文について。
swich文はjavascriptでよく使う条件分岐の一つです。
if文でも同様の記述はできるのですが、変数を管理する場合はswichの方がシンプルで見やすいです。

let buttonText = ”;
let buttonColor = ”;
switch (type) {
case ‘send’:
　buttonText = ‘送信する’;
　 buttonColor = ‘btn-blue’;
　break;
case ‘edit’:
　buttonText = ‘変更する’;
　buttonColor = ‘btn-blue’;
　break;
case ‘delete’:
　buttonText = ‘削除する’;
　buttonColor = ‘btn-red’;
　break;
default:
　buttonText = ‘ボタン’;
　buttonColor = ‘btn-gray’;
}

この記述は定義したtypeの属性によって、
テキストやボタンの色を変えるために使います。

↓例えばこれはtype＝sendなので、swich文の「case ‘send’」の値が適用されます。
<%- include(‘button.ejs’, { type: ‘send’}) %>

一つのページで一元管理できるのでぱっと見で分かりやすく、修正もしやすくなります。