[JavaScript] 配列の操作はLodashを使いこなせると便利

こんにちは、CX事業本部 Delivery部の若槻です。

Lodashは、軽量なJavaScriptユーティリティライブラリです。

• Lodash

配列やオブジェクト、文字列などに対して頻用される処理がモジュールとして用意されています。

今回は、Lodashで配列操作を行える便利そうなモジュールをいくつか見つけたので紹介します。

インストール

Lodashをnpmでインストールします。

npm install lodash

TypeScript環境で使う場合は型定義も合わせてインストールします。

npm -D install @types/lodash

インポート

Lodashをインポートします。

// Load the full build.
var _ = require('lodash');
// Load the core build.
var _ = require('lodash/core');
// Load the FP build for immutable auto-curried iteratee-first data-last methods.
var fp = require('lodash/fp');

import構文の場合。

import * as lodash from 'lodash'

import { fp } from 'lodash'

便利なモジュール

chunk()

chunk()は、配列を指定数ごとの要素のチャンクに分割できます。

• chunk - Lodash Documentation

_.chunk(['a', 'b', 'c', 'd'], 2);
// => [['a', 'b'], ['c', 'd']]
 
_.chunk(['a', 'b', 'c', 'd'], 3);
// => [['a', 'b', 'c'], ['d']]

Lodashを使わない場合は複雑な処理の記述が必要となります。

const chunk = (arr, chunkSize) => {
  const res = [];
  for (let i = 0; i < arr.length; i += chunkSize) {
    const chunk = arr.slice(i, i + chunkSize);
    res.push(chunk);
  }
  return res;
}

chunk(['a', 'b', 'c', 'd'], 2)
// => [['a', 'b'], ['c', 'd']]

chunk(['a', 'b', 'c', 'd'], 3)
// => [[ 'a', 'b', 'c' ], [ 'd' ] ]

fromPairs()

fromPairs()は、key-valueペアをオブジェクト化できます。

• fromPairs - Lodash Documentation

_.fromPairs([['a', 1], ['b', 2]]);
// => { 'a': 1, 'b': 2 }

_.fromPairs([['a', 1], ['b', 2], ['a', 3]]);
// => { a: 3, b: 2 }

Lodashを使わない場合はfromEntriesというモジュール名が処理内容を想起しづらいですね。

Object.fromEntries([['a', 1], ['b', 2]])
// => { a: 1, b: 2 }

union()

union()は、配列をマージできます。

• union - Lodash Documentation

_.union([2], [1, 2]);
// => [2, 1]

Lodashを使わない場合はパッと見でどんな処理をしているか分かりづらいですね。

[...new Set([...[2], ...[1, 2]])];
// => [ 2, 1 ]

uniq()

union()は、配列をユニーク化できます。

• uniq - Lodash Documentation

_.uniq([2, 1, 2]);
// => [2, 1]

Lodashを使わない場合はパッと見でどんな処理をしているか分かりづらいですね。

[...new Set([2, 1, 2])];
// => [2, 1]

orderBy()

orderBy()は、オブジェクトの配列をソートできます。すべてのiteratees（キー）に順序を指定可能で、指定されていないiterateesは照準で並び替えられます。

var users = [
  { 'user': 'fred',   'age': 48 },
  { 'user': 'barney', 'age': 34 },
  { 'user': 'fred',   'age': 40 },
  { 'user': 'barney', 'age': 36 }
];
 
// Sort by `user` in ascending order and by `age` in descending order.
_.orderBy(users, ['user', 'age'], ['asc', 'desc']);
// => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]

sortBy()

sortBy()も、オブジェクトの配列をソートできます。iterateesに指定できるキーは1つだけで、iteratees以外はすべての値が元の順を維持します。（安定した並び替え）

var users = [
  { 'user': 'fred',   'age': 48 },
  { 'user': 'barney', 'age': 36 },
  { 'user': 'fred',   'age': 40 },
  { 'user': 'barney', 'age': 34 }
];
 
_.sortBy(users, [(o) => o.user]);
// => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]
 
_.sortBy(users, ['user', 'age']);
// => objects for [['barney', 34], ['barney', 36], ['fred', 40], ['fred', 48]]

おわりに

Lodashで配列操作を行える便利そうなモジュールをいくつか見つけたので紹介しました。

今回紹介したのはほんの一部で、ドキュメントには他にも多くのモジュールが載っているのでぜひ目を通してみてください。

• Lodash Documentation

2023/02/05 追記

本記事の公開後に、社内でyou-dont-need/You-Dont-Need-Lodash-Underscore: List of JavaScript methods which you can use natively + ESLint Pluginを教えてもらいました。（始めからこれを見つけられれば良かった...）

今回紹介したLodashや、同じくJSのユーティリティライブラリであるUnderscorをJSネイティブの機能で如何に置き換えられるかが纏まっています。最新のブラウザであればES5やES6以降を使用することによりほとんどがLodashおよびUnderscoreを置き換えられるため、Dependencyにわざわざこれらを含めるメリットは小さいというものです。

Lodashのようなユーティリティライブラリを導入したい場合は、ネイティブ機能で代替できないか？Dependencyを重くしてまで解決したいほどの記述の処理か？をちゃんと検討した上で、導入可否を決めるようにしたいですね。

参考

• lodashが便利。

以上