ビューヘルパーを作成する

次のように、アプリケーションの中に、「 helpers/viewhelper.js 」というディレクトリとファイルを作成します。

example
- ...
- helpers
  - viewhelper.js
- ...
- app.js

ファイルの内容

helpers/viewhelper.js

module.exports = {
  hello: () => {
      return "hello, World";
  }
}

「 var app = express(); 」より後に、以下を追加します。

app.js

app.locals.viewhelper = require('./helpers/viewhelper');

ビューヘルパーの呼び出し

テンプレート上で次のように記述すると、ビューヘルパーが呼び出せます。

<%= viewhelper.hello() %>

自作クラス

以下は、フォームタグの自作のビューヘルパーのクラスです。

helpers/FormHelpers.js

class FormHelpers {
  _buildAttributes(attributes) {
    return Object.entries(attributes)
      .filter(([_, value]) => value !== false && value != null)
      .map(([key, value]) => {
        if (value === true) return key;
        return `${key}="${this._escapeHtml(value)}"`; // ← ここでもエスケープすべき
      })
      .join(' ');
  }

  _normalizeClass(attr = '') {
    return attr.split(' ').filter(Boolean).join(' ');
  }

  _escapeHtml(str) {
    return String(str ?? '').replace(/[&<>"']/g, s => ({
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;',
    }[s]));
  }

  textInput(name, attributes = {}) {
      const {
        value = '',
        class: classAttr = '',
        ...restAttributes
      } = attributes;

      restAttributes.class = this._normalizeClass(classAttr);

      return `<input type="text" name="${this._escapeHtml(name)}" value="${this._escapeHtml(value)}" ${this._buildAttributes(restAttributes)}>`;
  }

  passwordInput(name, attributes = {}) {
      const {
        value = '',
        class: classAttr = '',
        ...restAttributes
      } = attributes;

      restAttributes.class = this._normalizeClass(classAttr);

      return `<input type="password" name="${this._escapeHtml(name)}" value="${this._escapeHtml(value)}" ${this._buildAttributes(attributes)}>`;
  }

  textArea(name, attributes = {}) {
    const {
      value = '',
      class: classAttr = '',
      ...restAttributes
    } = attributes;
  
    restAttributes.class = this._normalizeClass(classAttr);
  
    return `<textarea name="${this._escapeHtml(name)}" ${this._buildAttributes(restAttributes)}>${this._escapeHtml(value)}</textarea>`;
  }

  hiddenInput(name, attributes = {}) {
    const {
      value = '',
      ...restAttributes
    } = attributes;
    return `<input type="hidden" name="${this._escapeHtml(name)}" value="${this._escapeHtml(value)}" ${this._buildAttributes(restAttributes)}>`;
  }

  checkBox(name, attributes = {}) {
      const {
          value = '',
          class: classAttr = '',
          checked = false,
          ...restAttributes
      } = attributes;

      restAttributes.class = this._normalizeClass(classAttr);
      const checkedAttr = checked === true ? 'checked' : '';

      return `<input type="checkbox" name="${this._escapeHtml(name)}" value="${this._escapeHtml(value)}" ${this._buildAttributes(restAttributes)} ${checkedAttr}>`;
  }

   radioButton(name, attributes = {}) {
      const {
          value = '',
          class: classAttr = '',
          checked = false,
          ...restAttributes
      } = attributes;
    
      restAttributes.class = this._normalizeClass(classAttr);
      const checkedAttr = checked === true ? 'checked' : '';

      return `<input type="radio" name="${this._escapeHtml(name)}" value="${this._escapeHtml(value)}" ${this._buildAttributes(restAttributes)} ${checkedAttr}>`;
  }

  selectBox(name, optionsArray = [], attributes = {}) {
    const {
      class: classAttr = '',
      value: selectedValue,
      placeholder = '--選択してください--',
      includePlaceholder = true, // ← 明示的に出すかどうか切り替えられる
      ...restAttributes
    } = attributes;
  
    restAttributes.class = this._normalizeClass(classAttr);

    if (!Array.isArray(optionsArray)) {
      throw new TypeError('optionsArray must be an array');
    }
  
    const optionsHtml = [
      // プレースホルダーの option（先頭に追加）
      includePlaceholder ? `<option value="">${this._escapeHtml(placeholder)}</option>` : null,
  
      // その他の option
      ...optionsArray.map(option => {
        const isSelected = selectedValue !== undefined
          ? String(option.value) === String(selectedValue)
          : option.selected === true;
  
        const selectedAttr = isSelected ? 'selected' : '';
        return `<option value="${this._escapeHtml(option.value)}" ${selectedAttr}>${this._escapeHtml(option.text)}</option>`;
      })
    ].filter(Boolean).join('');
  
    return `<select name="${this._escapeHtml(name)}" ${this._buildAttributes(restAttributes)}>${optionsHtml}</select>`;
  }

  label(forId, text, attributes = {}) {
      return `<label for="${this._escapeHtml(forId)}" ${this._buildAttributes(attributes)}>${this._escapeHtml(text)}</label>`;
  }
}

module.exports = FormHelpers;

すべてのルーターで利用するために、app.jsに以下の設定を追加します。

app.js

const FormHelpers = require('./helpers/FormHelpers');
app.use((req, res, next) => {
  res.locals.form = new FormHelpers();
  next()
});

ejs ファイル上で、ヘルパー関数を使うには、以下のようにします。

<div>
    <p><%- form.textInput('username', { class: 'form-control' }) %></p>
    <p><%- form.passwordInput('password', { id: 'password', class: 'form-control' }) %></p>
    <p><%- form.textArea('textarea', { class: 'form-control textare', value: "hoge" }) %></p>
    <p><%- form.hiddenInput('hidden_input', { id: 'hidden_input', rows: 5, class: 'form-control' }) %></p>
    <p><%- form.checkBox('role', { id: 'role', class: 'form-check-input', checked: true, value: "admin" }) %></p>
    <p><%- form.radioButton('gender', { id: 'gender_male', class: 'form-check-input', value: 'maile', checked: true }) %></p>
    <p><%- form.radioButton('gender', { id: 'gender_female', class: 'form-check-input', value: 'female' }) %></p>
    <p>
      <%- form.selectBox('country', [
    { value: '', text: '選択してください' },
    { value: 'JP', text: '日本' },
    { value: 'US', text: 'アメリカ', selected: true },
    { value: 'CA', text: 'カナダ' }
], { id: 'country', class: 'form-control' }) %>
    </p>
  </div>