【Rails】Underscore.jsとRailsを組み合わせる時に気をつけたいこと

【Rails】Underscore.jsとRailsを組み合わせる時に気をつけたいこと

Underscore.js(以下Underscore)って便利ですよね。配列やオブジェクトを操作する時に何かと使います。
今日はUnderscoreとRailsアプリを一緒に使うときのお話です。

Underscore.jsのtemplate()

Underscoreにはテンプレートエンジンが備わっています。
JSONからDOMを生成したい時など、Javascriptのコードの中にhtmlを書くことなく、生成するhtmlコードをViewとして切り離してすっきり簡潔に書くことが出来ます。
Backbone.jsなどでも使用する機会は多く、ものすごく重宝しています。

記法の問題

ただ、Railsと組み合わせて使う場合は気をつけなければいけない点があります。
テンプレートの変数出力の記法がERBのそれと変わらないので、そのままの記法ではRailsで参照エラーになってしまうのです。

htmlに埋め込む場合

<script type="text/template" id="TemplateList">
    <li class="item">
        <a href="<%= link %>">
            <h3 class="name"><%= name %></h3>
            <p class="description"><%= text %></p>
            <code><%- html %></code>
        </a>
    </li>
</script>

RailsのView.html.erbの場合(エラーになる)

<%= yield %>

<script type="text/template" id="TemplateList">
    <li class="item">
        <a href="<%= link %>"> # NG
            <h3 class="name"><%= name %></h3> # NG
            <p class="description"><%= text %></p> # NG
            <code><%- html %></code> # NG
        </a>
    </li>
</script>

解決策(正規表現で置換)

幸い、Underscoreでは_.templateSettingsプロパティに正規表現を指定することで記法を変更することが可能です。
これ作った人、すごく頭良くないですか?
http://underscorejs.org/#template

デフォルトでは以下の設定になっています。

_.templateSettings = {
  evaluate    : /<%([\s\S]+?)%>/g,
  interpolate : /<%=([\s\S]+?)%>/g,
  escape      : /<%-([\s\S]+?)%>/g
};

公式のドキュメントの例では、Mustache, Handlebarsの記法に変えることも出来ます。

_.templateSettings = {
  interpolate: /\{\{(.+?)\}\}/g
};

var template = _.template("Hello {{ name }}!");
template({ name: "Mustache" });
=> "Hello Mustache!"

そこで、以下の様に変更することで<% %>{{ }}に置き換えることができます。

_.templateSettings = {
  evaluate: /\{\{(.+?)\}\}/g,
  interpolate : /\{\{=(.+?)\}\}/g,
  escape : /\{\{-(.+?)\}\}/g
};

これでRailsでエラーにならなくなります。

Underscoreの方がMustacheやHandlebarsとは違い、ツールベルトとして汎用性があって取り回しがしやすいという点で使いやすいですね。
また、Lo-dashの方もオススメです。

参考サイト

undefined local variables in templates

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。 また、Udemyのプログラミング解説の講師、writer.appの自主開発や上越TechMeetupの主催などを行っています。

プロフィール

©Copyright 2022 Yohei Isokawa All Rights Reserved.