Lodash 使えるならせっかくだから使おう
https://gyazo.com/0ebe262000a82c86ade50811da819880
JavaScript ライブラリ
Lodash 公式
某所に Lodash が組み込まれてたのに、全然活用していなかった
別に必要ないと思ってたけど、あるなら使った方がいい
ゴミみたいなコード書かれるよりは、「Lodash 使え」と言った方が早い
軽く見てみただけだけど、普通に使いやすそう
すっきり書ける
ライブラリ使わないでいわゆる Vanilla JS で書いた方がいいって言う人もいるだろうけど
おれはそうは思わない
ちょっとでも可読性が上がるなら、おれはそっちを選ぶ
参考
JavaScriptで関数型プログラミングを強力に後押しするUnderscore.jsのおすすめメソッド12選(lodashもあるよ)
lodash.js (underscore.js)でのtemplateの使い方
準備
code:javascript
const _ = require('lodash');
or
code:html
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js" integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww==" crossorigin="anonymous"></script>
keys/values
https://lodash.com/docs/4.17.15#keys
https://lodash.com/docs/4.17.15#values
code:javascript
const obj = { foo: 1, bar: 2, baz: 3 };
// Object.keys(obj);
_.keys(obj);
//=> 'foo', 'bar', 'baz'
// Object.keys(obj).map((k) => objk);
_.values(obj);
//=> 1, 2, 3
ここら辺、本当に鬱陶しいから Loadash で統一感を出せるのはありがたい
template
https://lodash.com/docs/4.17.15#template
jQuery で動的に組み立てるような HTML は _.template を使った方がいい
React や Vue を使うまでもないようなところは全部これでいいのでは?
code:template.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Lodash Template Sample</title>
<link rel="stylesheet" href="https://unpkg.com/mvp.css">
</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="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js" integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww==" crossorigin="anonymous"></script>
<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
メソッドチェーン
https://lodash.com/docs/4.17.15#lodash
https://www.it-swarm-ja.tech/ja/javascript/lodashを使用して関数をチェーンするにはどうすればよいですか?/823840927/
_(value) から繋げる暗黙的なやり方と
_(value).chain() から繋げる明示的なやり方があるらしい
どういうこと?
.chain() の方が提供されるメソッドが多い?
最後に .value() して _ のガワを外す
chain() vs flow()
lodashのflowやchainを数学的に分析する
Better and more performant than lodash chain