Underscore.js テンプレートエンジンのサンプルコード

2024-04-26

JavaScript、Node.js、関数型プログラミングにおける Underscore.js をテンプレートエンジンとして使用する

Underscore.js をテンプレートエンジンとして使用することで、HTML テンプレートを動的に生成することができます。これは、Web アプリケーションやサーバーサイドレンダリングアプリケーションを開発する際に役立ちます。

Underscore.js をテンプレートエンジンとして使用する主な利点は次のとおりです。

簡潔なコード: Underscore.js は、コードを簡潔にするための多くの便利な関数を提供しています。テンプレートエンジンを使用すると、HTML テンプレートをより簡潔に記述することができます。
読みやすいコード: Underscore.js を使用すると、コードがより読みやすくなります。これは、チームで開発している場合や、コードを他の開発者に渡す場合に役立ちます。
柔軟性: Underscore.js は非常に柔軟なライブラリです。テンプレートエンジンとして使用するには、さまざまな方法があります。
安全性: Underscore.js は、安全なライブラリです。テンプレートエンジンとして使用すると、テンプレートインジェクションなどの脆弱性を回避することができます。

const _ = require('underscore');

const template = `
  <h1>Hello, <%= name %>!</h1>
  <p>You are <%= age %> years old.</p>
`;

const data = {
  name: 'John Doe',
  age: 30
};

const renderedTemplate = _.template(template)(data);

console.log(renderedTemplate);

この例では、template 変数に HTML テンプレートを格納します。テンプレートには、<%= name %> および <%= age %> などのプレースホルダーが含まれています。これらのプレースホルダーは、data 変数に格納されているデータで置き換えられます。

_.template() 関数は、テンプレートエンジンを作成します。この関数は、テンプレートとデータオブジェクトを受け取り、レンダリングされたテンプレートを返します。

上記の例は、Underscore.js をテンプレートエンジンとして使用する 1 つの方法です。Underscore.js を使用して、テンプレートをレンダリングする方法は他にもたくさんあります。

Underscore.js のドキュメントには、テンプレートエンジンの詳細情報が記載されています。

Underscore.js を使ったテンプレートエンジン - サンプルコード

HTML テンプレート

<!DOCTYPE html>
<html>
<head>
  <title>Underscore テンプレートエンジン</title>
</head>
<body>
  <h1>ユーザー情報</h1>
  <ul>
    <li>名前: <%= name %></li>
    <li>年齢: <%= age %></li>
    <li>メール: <%= email %></li>
  </ul>
</body>
</html>

このテンプレートは、ユーザーの名前、年齢、メールアドレスを表示するシンプルなものです。<%= name %>、<%= age %>、<%= email %> のような記号は、テンプレート内で変数を埋め込むためのプレースホルダーです。

JavaScript コード

// script.js
const _ = require('underscore');

const data = {
  name: '山田 太郎',
  age: 30,
  email: '[email protected]'
};

const template = _.template(require('./index.html'));

const renderedTemplate = template(data);

document.getElementById('app').innerHTML = renderedTemplate;

この JavaScript コードは、以下の処理を行います。

require('underscore') で Underscore.js ライブラリを読み込みます。
data 変数に、ユーザー情報を含むオブジェクトを定義します。
require('./index.html') で HTML テンプレートを読み込みます。
_.template() 関数を使って、HTML テンプレートをテンプレートエンジンに変換します。
template(data) で、テンプレートエンジンを使ってテンプレートをレンダリングし、ユーザー情報で置き換えます。
document.getElementById('app').innerHTML = renderedTemplate で、レンダリングされたテンプレートを #app 要素に挿入します。

実行

上記コードを実行すると、ブラウザに以下の結果が表示されます。

<!DOCTYPE html>
<html>
<head>
  <title>Underscore テンプレートエンジン</title>
</head>
<body>
  <h1>ユーザー情報</h1>
  <ul>
    <li>名前: 山田 太郎</li>
    <li>年齢: 30</li>
    <li>メール: [email protected]</li>
  </ul>
</body>
</html>

この例は、Underscore.js をテンプレートエンジンとして使用する基本的な方法を示しています。 Underscore.js は、より複雑なテンプレートや条件分岐などを処理するための多くの機能を提供しています。

Underscore.js をテンプレートエンジンとして使用するその他の方法

カスタムタグを使用する

Underscore.js を使用して、独自のテンプレートタグを作成することができます。これらのタグを使用して、テンプレート内で複雑なロジックを実装することができます。

_.mixin({
  renderIf: function(condition, content) {
    if (condition) {
      return content;
    } else {
      return '';
    }
  }
});

const template = `
  <h1>ユーザー情報</h1>
  <ul>
    <li>名前: <%= name %></li>
    <li>年齢: <%= age %></li>
    <% if (isAdmin) { %>
      <li>管理者: はい</li>
    <% } %>
    <li>メール: <%= email %></li>
  </ul>
`;

const data = {
  name: '山田 太郎',
  age: 30,
  email: '[email protected]',
  isAdmin: true
};

const renderedTemplate = _.template(template)(data);

document.getElementById('app').innerHTML = renderedTemplate;

この例では、renderIf というカスタムタグを作成しています。このタグは、条件が真の場合にのみコンテンツをレンダリングします。

ネストされたテンプレートを使用する

const userTemplate = `
  <h2>ユーザー情報</h2>
  <ul>
    <li>名前: <%= name %></li>
    <li>年齢: <%= age %></li>
    <li>メール: <%= email %></li>
  </ul>
`;

const postsTemplate = `
  <h3>投稿</h3>
  <ul>
    <% _.each(posts, function(post) { %>
      <li>
        <h4><%= post.title %></h4>
        <p><%= post.content %></p>
      </li>
    <% }); %>
  </ul>
`;

const mainTemplate = `
  <%= userTemplate(data.user) %>
  <%= postsTemplate({ posts: data.posts }) %>
`;

const data = {
  user: {
    name: '山田 太郎',
    age: 30,
    email: '[email protected]'
  },
  posts: [
    { title: '初めての投稿', content: 'これは初めての投稿です。' },
    { title: '二回目の投稿', content: 'これは二回目の投稿です。' }
  ]
};

const renderedTemplate = _.template(mainTemplate)(data);

document.getElementById('app').innerHTML = renderedTemplate;

この例では、userTemplate と postsTemplate という 2 つのネストされたテンプレートを作成しています。 mainTemplate テンプレートは、これらのネストされたテンプレートを使用して、ユーザー情報と投稿を表示します。

ロジックをテンプレート内に埋め込む

Underscore.js を使用して、テンプレート内にロジックを埋め込むことができます。これにより、テンプレートをより動的にすることができます。

const template = `
  <h1>ユーザー情報</h1>
  <ul>
    <li>名前: <%= name %></li>
    <li>年齢: <%= age %> 歳
      <% if (age >= 18) { %>
        （成人）
      <% } %>
    </li>
    <li>メール: <%= email %></li>
  </ul>
`;

const data = {
  name: '山田 太郎',
  age: 30,
  email: '[email protected]'
};

const renderedTemplate = _.template(template)(data);

document.getElementById('app').innerHTML = renderedTemplate;