データを持ちまわる時、地味だけど圧倒的に使う頻度が多いらしいlodashですが、jqueryだけでやる場合よりどんなユースケースで便利なのでしょうか。
いまいち、ブログ記事などを見ているだけだとその便利さ、ないと不便と言われる理由がよく分かりません。
#参考にした記事
細かすぎるけど伝わって欲しいlodash.jsの話
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答4件
0
質問者さんはバックエンドエンジニアなので、
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メソッド叩けば自由に挟めますからね。
JavaScript
1var users = [ 2 {name: "taro", score: 100}, 3 {name: "jiro", score: 80}, 4 {name: "saburo", score: 90} 5]; 6var scores = _(users) 7 .map(it => it.score) 8 .tap(console.log) // [100, 80, 90] 9 .map(it => it + 100) 10 .sum(); 11result = 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個で済みますし何やってるかも簡潔に済むと思います。
JavaScript
1var users = [ 2 {name: "taro", score: 100}, 3 {name: "jiro", score: 80}, 4 {name: "saburo", score: 90} 5]; 6result = users 7 .map(it => [it.name, it]) 8 .fromPairs() 9 .value();
JSON
1{ 2 "taro": { 3 "name": "taro", 4 "score": 100 5 }, 6 "jiro": { 7 "name": "jiro", 8 "score": 80 9 }, 10 "saburo": { 11 "name": "saburo", 12 "score": 90 13 } 14}
後はcurryですね。
JavaScriptはES2015でクラスが使えるようになってDIが楽になったとはいえ、
Promiseやコールバック関数ではまだまだ普通の関数が要求されるケースが多いです。
その時にDIのように1個だけ引数を束縛しておくという使い方が出来るので非常にはかどります。
(使いすぎるとキモくなるので設計はよく考えるべきだと思いますけどね)
JavaScript
1var add = _.curry((a, b) => a + b); 2var add5 = add(5); 3result = add5(10); // 15
投稿2018/03/24 13:43
編集2018/03/24 14:04総合スコア21203
0
ベストアンサー
まず、lodashとjQueryは、対立するものではありません。
- lodash…配列やオブジェクトの操作用ライブラリ
- jQuery…DOM要素の操作用ライブラリ
そして、JavaScript自体でもArray
系のメソッドの強化は続いていますので、個人的にはlodashの役割は大半がなくなったかなと考えています。
投稿2018/03/24 06:31
総合スコア146063
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/24 06:52
0
もう解決済みではありますが、私めもひとつ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は細かいところで冗長で、書き味だけでなく、後々の読み心地も違ってくるかと思います。
投稿2018/03/28 04:11
編集2018/03/28 04:18総合スコア764
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
throttleやdebounceはイベント間引く時に使ったりしますかね。lodash丸ごとインポートして使うというのは最近のJSで配列操作結構出来てしまうのでしないです。
投稿2018/03/24 07:51
総合スコア2415
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/25 01:57
2018/03/25 02:41