Lodash 使えるならせっかくだから使おう
https://gyazo.com/0ebe262000a82c86ade50811da819880
某所に Lodash が組み込まれてたのに、全然活用していなかった
別に必要ないと思ってたけど、あるなら使った方がいい
ゴミみたいなコード書かれるよりは、「Lodash 使え」と言った方が早い
軽く見てみただけだけど、普通に使いやすそう
すっきり書ける
ライブラリ使わないでいわゆる Vanilla JS で書いた方がいいって言う人もいるだろうけど
おれはそうは思わない
ちょっとでも可読性が上がるなら、おれはそっちを選ぶ
参考
準備
code:javascript
const _ = require('lodash');
or
code:html
keys/values
code:javascript
const obj = { foo: 1, bar: 2, baz: 3 };
// Object.keys(obj);
_.keys(obj);
// Object.keys(obj).map((k) => objk); _.values(obj);
ここら辺、本当に鬱陶しいから Loadash で統一感を出せるのはありがたい
template
jQuery で動的に組み立てるような HTML は _.template を使った方がいい
React や Vue を使うまでもないようなところは全部これでいいのでは？
code:template.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Lodash Template Sample</title>
</head>
<body>
<script type="text/template" id="js-lodash-template">
<h1><%- title %></h1>
<ol id="js-list">
<% list.forEach(function (elem) { %>
<li id="<%- elem.id %>" <%= elem.attr %>><%- elem.value %></li>
<% }); %>
</ol>
</script>
<div id="js-lodash-template-placeholder"></div>
<script src="template_sample.js"></script>
</body>
</html>
<script type="text/template" id="js-lodash-template"></script> 内部にテンプレートを定期
<% %> で JavaScript のコードを書ける
<%= %> でエスケープなしで値を展開
<%- %> でエスケープありで値を展開
なるべく <%- だけを使うようにした方が無難
<%= を見たら XSS を疑う
code:template_sample.js
const $template = $('#js-lodash-template');
const compiled = _.template($template.html());
// この compiled がわかりづらい、個人的には render とかの方がいい
// $('#js-lodash-template-placeholder').html(render({ foo: 'FOO'}));
$('#js-lodash-template-placeholder').html(
compiled({
title: 'foobarbaz',
list: [
{ id: 'foo', value: 'foo', attr: 'style="color: red;"' },
{ id: 'bar', value: 'bar', attr: '' },
{ id: 'baz', value: 'baz', attr: '' },
],
})
);
結果
https://gyazo.com/5dae470b20f3067566d648a9493c5841
メソッドチェーン
_(value) から繋げる暗黙的なやり方と
_(value).chain() から繋げる明示的なやり方があるらしい
どういうこと？
.chain() の方が提供されるメソッドが多い？
最後に .value() して _ のガワを外す
chain() vs flow()