# lodashを使って簡単カスタマイズビュー作成

**URL:** https://community.cybozu.dev/t/topic/3028
**Category:** kintone 開発相談
**Created:** [2018 年 4 月 25 日午後 3:00 UTC](https://community.cybozu.dev/t/topic/3028 "2018-04-25T15:00:00Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![Legacy\_Account1740](https://avatars.discourse-cdn.com/v4/letter/l/ed8c4c/32.png) [@Legacy\_Account1740](https://community.cybozu.dev/u/Legacy_Account1740)
#### Post date: [2018 年 4 月 25 日午後 3:00 UTC](https://community.cybozu.dev/t/topic/3028/1 "2018-04-25T15:00:00Z")

</div>

[lodash](https://lodash.com/)とは汎用的な機能を集めたJavaScriptライブラリです。&nbsp;[Cybozu CDN](https://community.cybozu.dev/hc/ja/articles/202960194)にてサポートされているので手軽に利用できます。 今回はlodashのテンプレート機能を用いて、簡単にカスタマイズビューを作成する方法をご紹介します。

## サンプル

lodashを用いて、[こちらの記事](https://community.cybozu.dev/hc/ja/articles/202905604)のコードを書き換えます。

### コード

#### HTML

```html
<div id="my-customized-view">
  <table border="1">
    <thead>
      <tr>
        <th>レコード番号</th>
        <th>信号機</th>
        <th>作成日時</th>
      </tr>
    </thead>
    <tbody id="my-tbody"></tbody>
  </table>
</div>
<!-- ここから追加 -->
<script type="text/html" id="lodash_template">
  <tr>
    <td><a href="<%= url %>"><%=id%></a></td>
    <td><%=traffic_light%></td>
    <td><%=created%></td>
  </tr>
</script>

```

#### JavaScript

```javascript
(function () {
  "use strict";
  kintone.events.on(["app.record.index.show"], function (event) {
    if (event.viewName !== "カスタマイズビュー") {
      return event;
    }
    var records = event.records;
    if (!records || !records.length) {
      document.getElementById("my-customized-view").innerHTML =
        "表示するレコードがありません";
      return event;
    }
    varrecUrl =
      location.protocol +
      "//" +
      location.hostname +
      "/k/" +
      kintone.app.getId() +
      "/show#record=";
    varmyRecordSpace = document.getElementById("my-tbody");
    myRecordSpace.innerHTML = ""; // ここから変更
    var template = _.template(
      document.getElementById("lodash_template").innerHTML
    );
    myRecordSpace.innerHTML = _.reduce(
      records,
      function (html, record) {
        returnhtml +
          template({
            url: recUrl + record.レコード番号.value,
            id: record.レコード番号.value,
            traffic_light: record.信号の色.value,
            created: newDate(record.作成日時.value).toLocaleString(),
          });
      },
      ""
    );
    return event;
  });
})();

```