宮水の日記

宮水の日記

主に書評や資格取得について記事を書いています。

lodash【JSライブラリ1日1個】

JSライブラリを1日1つ紹介する

1日1つJSのライブラリを調べます。

① ライブラリに関するドキュメントを最初から最後まで読む
② 実際に使ってみる or 使い方を調べる
③ ライブラリを3行で説明する

本日は、lodashのドキュメントを読んで実際に業務で使っているところを調べました。

ドキュメント

今回読んだドキュメントはこちらです。
github.com

lodashとは?

lodashとは、便利な関数を提供してくれるライブラリです。

例えば、弊社のコードではこんな関数が使われていました。

  • isEmpty

github.com

isEmptyは、nullもしくはobject, collection, map, setが空だとtrueを返す関数なのですね。
1だとtrueになってしまうので、名前だけでなんとなく仕様を予想するのではなくちゃんと読むことが大事だと思いました。

  • camelCase

この関数は、以下のように様々な文字列をcamelCaseに変換してくれる関数です。

* camelCase('Foo Bar')
* // => 'fooBar'
*
* camelCase('--foo-bar--')
* // => 'fooBar'
*
* camelCase('__FOO_BAR__')
* // => 'fooBar'

これを使うと、例えば変数名によってclassやidを変えることが簡単になりますね!便利!

今回のライブラリは、一つ一つの関数が1ファイルにまとまっていて、コードが実質ドキュメントのようになっていて読みやすかったです。
JSの関数を勉強するのにぴったりなライブラリだと思いました。

3行以内でまとめる

lodashを導入すると、

  • 便利な関数が使えるようになる
  • 関数を勉強するのに便利そう

フィードバック

  • lodash と lodash-esがある。lodash-esなら build する時に全ての関数を取り込むのではなく、 import されているものだけを取り込むので最終的な JS ファイルが軽くなる。
  • LJavaScriptのArrayに便利なメソッドが生えていなかったのでLodashのようなライブラリが作られた。最近は機能拡張やBabelの恩恵もありネイティブのAPIでも便利に使えるようになってきている。
  • Array以外にも、便利なメソッドが色々ある。

たとえば _.curry とか。「カリー化」というプログラミングのテクニックを簡単に扱える。
https://lodash.com/docs/4.17.15#curry
カリー化については: https://ja.javascript.info/currying-partials

  • 以前 debounce-promise というライブラリも調べてもらったと思いますが、その _.debounce をするメソッドもある。

https://lodash.com/docs/4.17.15#debounce

以上です!