lodashを使うとjqueryより便利なとき

Question

データを持ちまわる時、地味だけど圧倒的に使う頻度が多いらしいlodashですが、jqueryだけでやる場合よりどんなユースケースで便利なのでしょうか。

いまいち、ブログ記事などを見ているだけだとその便利さ、ないと不便と言われる理由がよく分かりません。

#参考にした記事
細かすぎるけど伝わって欲しいlodash.jsの話

Answer 1

質問者さんはバックエンドエンジニアなので、
HTMLをべたーっと出力して、JavaScriptはDOMをちょこちょこ操作するイメージが強いのかも知れませんね。

大体合ってるというか2015年くらいまではまさにそれで、DOM操作はjQuery一択でした。

ただし、2015年くらいからは静的なHTMLとCSSだけで全て表現し、
バックエンドはAjax通信でJSON形式で寄越せという思想のシングルページアプリケーション(SPA)と呼ばれるジャンルが台頭してきました。

---

jQueryはDOM操作が素のJavaScriptより優れているツールです。
静的なHTMLをベースにちょっとしたアクセントを加えるのに最適といったところでしょうか。
例えばページ上部の画像をスライドショーとして動的に見せたりとか…

参考サイト: 2018年も手軽で便利なjQueryスライダープラグイン9選

jQueryはAjax通信のモジュール等も持っていますが、根っこはDOMの手動操作にあります。
SPAと呼ばれる規模のWebアプリになってくると、Vue.jsやReactといった、JSフレームワークの「JavaScript世界の変数を参照して、DOMがテンプレートを元に勝手に切り替わる」機能を駆使しなければとてもじゃないですがやってられません。
その為、最新のフロントエンドではjQueryは少々下火になりつつあります。

まぁ、作りたいものがWebアプリでなければjQueryはまだまだ第一線ですけどね。
Vue.jsやReactと用途的にかち合うツールってことだけ抑えておいて下さい。

---

LodashはJavaScriptの変数の世界で、
値の加工を高度なレベルで行うのに特化したツールです。
えー、そんな配列をゴネゴネ弄るような用途あるん？あります。
もしゲームが身近ならゲームの計算機やシミュレータなんかが身近な例でしょう。

参考サイト: MHW スキルシミュ(泣)

Lodashは値の加工に特化しているので、
Vue.jsやReact等のフロントエンドのJSフレームワークとも見事に共存します。
なんせJSフレームワークはHTMLのDOMツリーをコンポーネント化してるだけの話ですからね。
Ajaxで大量の要素が詰まったJSONを受け取り、加工してコンポーネントに引き渡す部分のロジックでLodashを始めとしたライブラリは大活躍します。

---

まだまだlodash使った方が便利かなと思う機能

LodashのChain機能はガチだと思います。
JavaScriptだとメソッドチェーンしている間にconsole.logを挟むのに苦労しますが、
Lodashは何時でもtapメソッド叩けば自由に挟めますからね。

try Lodash - CodePen

var users = [
  {name: "taro", score: 100},
  {name: "jiro", score: 80},
  {name: "saburo", score: 90}
];
var scores = _(users)
  .map(it => it.score)
  .tap(console.log) // [100, 80, 90]
  .map(it => it + 100)
  .sum();
result = scores; // 570

chainも凄まじいですが、
それとシナジーが効く筆頭としてtoPairsとfromPairsは欠かせないですね。
素のJSはArray→Arrayはそこそこ強くなりましたが、ObjectとArrayの相互変換が弱いのでLodashを始めとした関数型プログラミングライブラリの独壇場だと思います。

JSでもObject.entries(obj).map(fn1).reduce(fn2, {})というルートで可能ですが、
Lodashの_(obj).toPairs().map(fn).fromPairs()のコンボで整形する方がラムダ1個で済みますし何やってるかも簡潔に済むと思います。

var users = [
  {name: "taro", score: 100},
  {name: "jiro", score: 80},
  {name: "saburo", score: 90}
];
result = users
  .map(it => [it.name, it])
  .fromPairs()
  .value();

{
   "taro": {
      "name": "taro",
      "score": 100
   },
   "jiro": {
      "name": "jiro",
      "score": 80
   },
   "saburo": {
      "name": "saburo",
      "score": 90
   }
}

後はcurryですね。
JavaScriptはES2015でクラスが使えるようになってDIが楽になったとはいえ、
Promiseやコールバック関数ではまだまだ普通の関数が要求されるケースが多いです。

その時にDIのように1個だけ引数を束縛しておくという使い方が出来るので非常にはかどります。
（使いすぎるとキモくなるので設計はよく考えるべきだと思いますけどね）

var add = _.curry((a, b) => a + b);
var add5 = add(5);
result = add5(10); // 15

Comments

[imamoto_browser]

詳しく書いていただき、ありがとうございます。

arrayのobject化は非常に簡潔に書けますね。他記事で見ましたが_fromPairsを使うとurlのクエリストリングのオブジェクト化とかすごいシンプルに書けていてすごいなと思いました。

jqueryじゃやってられない理由は正直そういう場面に直面したことがないので
イメージしずらいのですが、テキストボックスへの入力を感知してアクションを起こすみたいなAnglarやreactの得意分野またはMVCモデルになっているところがやはり優位なのかなと思いました。

_.curryは正直普段違和感ありますが、引数を一個束縛してあとは自由にどうぞって感じが自由度があっていいですね。おっしゃるとおり、ゲームの複雑な数値計算やunity使いなんかは重宝しそうですね。

githubみると、lodashはES2015?で書かれていて、そのまま使えなかったのですが、やはり毎度トランスパイルする必要があるのでしょうか。

[miyabi-sun]

> githubみると、lodashはES2015?で書かれていて、そのまま使えなかったのですが、やはり毎度トランスパイルする必要があるのでしょうか。
https://lodash.com/
公式サイトを見ると「Tested in Chrome 54-55, Firefox 49-50, IE 11, Edge 14, Safari 9-10, Node.js 6-7, & PhantomJS 2.1.1.」と書かれており、
ES2015がろくに動作しないIE11もサポート範囲内であると明記されています。
フロントエンドで使いたい場合、素直にCDNからsrcで引っ張ってくる手法が一般的でしょう。

ですが、webpackやらBrowserify等で1個のコードにまとめて配布したいケースでは仰る通りトランスパイルした方が良いかと思います。

Answer 2

まず、lodashとjQueryは、対立するものではありません。

• lodash…配列やオブジェクトの操作用ライブラリ
• jQuery…DOM要素の操作用ライブラリ

そして、JavaScript自体でもArray系のメソッドの強化は続いていますので、個人的にはlodashの役割は大半がなくなったかなと考えています。

Comments

[imamoto_browser]

回答ありがとうございます。

個人的にはメソッドチェーンの際に、配列の中身をいじれるlodashの_.tapなどは非常に書きやすく可読性も高く使いやすいと思うのですが、まだまだlodash使った方が便利かなと思う機能をひとつ上げるとしたらどんなのがありますか。

[maisumakun]

Rubyにもあるので、sortByは使いたくなることもあります。

Answer 3

もう解決済みではありますが、私めもひとつlodashの有用性を示す特徴をひとつ紹介させてください。
v3から実装された遅延評価です。
http://yohshiy.blog.fc2.com/blog-entry-308.html

上記リンク先にあるとおり、sortByといった一部の最適化が不可能な場面もありますが、普通にぐるぐる回すループ処理に関してはちゃんと遅延評価が効きます。その効果は絶大だと自分は思っています。

jQueryに関しては皆さんの仰る通り用途が別なのでlodashと共存可能ですが、jQueryにもeachやmapといった似たAPIがありますよね。jQueryのイテレータは第一引数にindexがバインドされて来るので、$('div').each((ignore, elem)=>{ /*elem操作*/ })という冗長な書き方となり、うざいなと思ってしまいます。
Array.prototype.forEachや_.eachのように、indexが第二引数だったならば、必要な時にだけ定義できたのに…(後出しジャンケンなのでしょうがないですが)

あと、$.eachはreturn falseでbreakできるのは解りやすいかもしれませんが、Arrayとlodashにはsomeがあるので困りませんし、なんならsomeのほうが「このループ、途中で抜ける可能性あるのね」とメソッドをみただけで判断できる利点があります。

最後にオブジェクトのディープコピーな場面もlodashの旨味はあるかと。
Object.assignは大変便利ですがシャローでIEアウトです。
jQueryはconst obj2 = $.extend(true, {}, obj)初見では意味不明です。
lodashはconst obj2 = _.cloneDeep(obj)そのまんまです。

というようにjQueryは細かいところで冗長で、書き味だけでなく、後々の読み心地も違ってくるかと思います。

Answer 4

throttleやdebounceはイベント間引く時に使ったりしますかね。lodash丸ごとインポートして使うというのは最近のJSで配列操作結構出来てしまうのでしないです。