質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.53%

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

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 3
  • VIEW 4,343

imamoto_browser

score 1078

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

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

参考にした記事

細かすぎるけど伝わって欲しいlodash.jsの話

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

+9

質問者さんはバックエンドエンジニアなので、
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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/25 10:57

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

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

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

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

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

    キャンセル

  • 2018/03/25 11:41

    > 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個のコードにまとめて配布したいケースでは仰る通りトランスパイルした方が良いかと思います。

    キャンセル

checkベストアンサー

+3

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/24 15:49

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

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

    キャンセル

  • 2018/03/24 15:52

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

    キャンセル

+1

もう解決済みではありますが、私めもひとつ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は細かいところで冗長で、書き味だけでなく、後々の読み心地も違ってくるかと思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.53%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる