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

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

新規登録して質問してみよう
ただいま回答率
86.12%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

解決済

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

imamoto_browser
imamoto_browser

総合スコア1159

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

4回答

0グッド

4クリップ

795閲覧

投稿2018/03/24 06:16

編集2018/03/24 06:18

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

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

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

以下のような質問にはグッドを送りましょう

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

グッドが多くついた質問は、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

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
miyabi-sun

総合スコア21039

okumurakengo708, henohenomoheJT, MasatofromMGSV, imamoto_browser, TetsuyaZama, kei344, so87, aruto, maisumakun👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

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

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

このような回答には修正を依頼しましょう。

回答へのコメント

imamoto_browser

2018/03/25 01:57

詳しく書いていただき、ありがとうございます。 arrayのobject化は非常に簡潔に書けますね。他記事で見ましたが_fromPairsを使うとurlのクエリストリングのオブジェクト化とかすごいシンプルに書けていてすごいなと思いました。 jqueryじゃやってられない理由は正直そういう場面に直面したことがないので イメージしずらいのですが、テキストボックスへの入力を感知してアクションを起こすみたいなAnglarやreactの得意分野またはMVCモデルになっているところがやはり優位なのかなと思いました。 _.curryは正直普段違和感ありますが、引数を一個束縛してあとは自由にどうぞって感じが自由度があっていいですね。おっしゃるとおり、ゲームの複雑な数値計算やunity使いなんかは重宝しそうですね。 githubみると、lodashはES2015?で書かれていて、そのまま使えなかったのですが、やはり毎度トランスパイルする必要があるのでしょうか。
miyabi-sun

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

3

ベストアンサー

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

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

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

投稿2018/03/24 06:31

maisumakun

総合スコア141318

miyabi-sun, kei344, defghi1977👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

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

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

このような回答には修正を依頼しましょう。

回答へのコメント

imamoto_browser

2018/03/24 06:49

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

2018/03/24 06: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は細かいところで冗長で、書き味だけでなく、後々の読み心地も違ってくるかと思います。

投稿2018/03/28 04:11

編集2018/03/28 04:18
so87

総合スコア753

HayatoKamono👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

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

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

このような回答には修正を依頼しましょう。

0

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

投稿2018/03/24 07:51

HayatoKamono

総合スコア2409

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

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

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

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。