[JS] Object.entries や Template Strings による簡単なテンプレート

JavaScriptでオブジェクトをループさせたいと思った時は Object.keys でキーだけ配列にしたものを
Array.forEach で回すっていうのが鉄板だったが、
ES2017の Object.entries の方が見た目エレガントやなあと思った。

Object.entries は key:value のペア１つずつを配列化してくれるので、

{ 'nyan': 'cat', 'wan': 'dog' }

が、

[ ['nyan', 'cat'], ['wan', 'dog'] ]

こうなる。

Array.forEachすると値取り出すのにindex使わなアカンやん…ってなるが、

Object.entries({ 'nyan': 'cat', 'wan': 'dog' }).forEach( dat => {
  console.log(dat[0]) //'nyan'
  console.log(dat[1]) //'cat'
} )

分割代入使えば大変わかりやすい。

Object.entries({ 'nyan': 'cat', 'wan': 'dog' }).forEach(([key, val]) => {
  console.log(key) //'nyan'
  console.log(val) //'cat'
} )

Object.keysでArray.forEachの場合：

let data = { 'nyan': 'cat', 'wan': 'dog' };
Object.keys(data).forEach( key => {
  console.log(key) //'nyan'
  console.log(data[key]) //'cat'
}, data)

値へのアクセスが data[key] になる。

これで簡易テンプレート作ったサンプル：

let data = {
  date: '2018/08/14',
  title: 'Hello World',
  content: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.'
}

let template = '<div class="sample"><p class="meta"><time><%date%></time><strong class="title"><%title%></strong></p><p class="content"><%content%></p></div>';

Object.entries(data).forEach( ([key, val]) => {
  template = template.replace(new RegExp('<%' + key + '%>', 'igm'), val);
})

console.log(template)

See the Pen A simple JS template using Object.entries by Tenderfeel (@Tenderfeel) on CodePen.

ES6のテンプレート文字列を使うと、

`<div class="sample"><p class="meta"><time>${data.date}</time><strong class="title">${data.title}</strong></p><p class="content">${data.content}</p></div>`

まさにテンプレートな趣があって便利だけど、
このテンプレート部分を使いまわそうとするなら関数にしないとエラーになる。

const template = (html, data) => {
  return html + `<div class="sample"><p class="meta"><time>${data.date}</time><strong class="title">${data.title}</strong></p><p class="content">${data.content}</p></div>`;
}

document.body.innerHTML = data.reduce(template, '');

See the Pen ES6 Template Strings Sample by Tenderfeel (@Tenderfeel) on CodePen.

なにかライブラリ的なものでテンプレートを変更できるようにするなら、（使う人によりけりだけど）単なる文字列である方が扱いやすいと思う。