環境構築と設定方法

LodashはJavaScript開発において、特に配列・オブジェクトの操作を簡素化するための強力なユーティリティライブラリです。npmで簡単に導入できます。

npm install lodash

Viteプロジェクトにおける自動インポート設定

unplugin-auto-import を利用することで、毎回import _ from 'lodash'と記述する手間を省けます。

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'

export default {
  plugins: [
    AutoImport({
      imports: [
        {
          lodash: [['default', '_']],
        },
      ],
    }),
  ],
}

上記の設定により、.tsファイルや<script setup>内では自動的に_が使用可能になります。ただし、ESLintを使用している場合は、グローバル変数として_を登録する必要があります。

// .eslintrc.json
{
  "globals": {
    "_": "writable"
  }
}

注意点： Vueテンプレート（<template>）内で_を使用すると型エラーが発生する場合があります。この問題を回避するには、関数を<script setup>内に定義してテンプレートから参照するようにしてください。

主な配列操作メソッド

1. 配列の分割：chunk

指定したサイズごとに配列を分割し、2次元配列を生成します。

_.chunk(['a', 'b', 'c', 'd'], 3)
// → [['a', 'b', 'c'], ['d']]

2. ファジー値の除去：compact

配列内の`false`, `null`, `0`, `""`, `undefined`, `NaN`などの偽値を除外します。

_.compact([0, 1, false, 2, '', 3])
// → [1, 2, 3]

3. 要素の結合：concat

複数の値や配列を連結します。

_.concat([1], 2, [3, 4])
// → [1, 2, 3, 4]

4. 差集合の取得：difference

最初の配列から、他の配列に含まれる要素を除外します。

_.difference([2, 1, 3], [3, 4])
// → [2, 1]

5. 変換後の差集合：differenceBy

比較前に各要素を変換（例：端数切り捨て）して差分を計算します。

_.differenceBy([2.1, 1.2], [2.3], Math.floor)
// → [1.2] （Math.floor後は[2,1] vs [2]）

6. カスタム比較による除外：differenceWith

カスタム関数を使って要素を比較し、一致するものを除外します。

_.differenceWith(
  [{ id: 1 }, { id: 2 }], 
  [{ id: 2 }], 
  (a, b) => a.id === b.id
)
// → [{ id: 1 }]

7. 先頭・末尾の操作

• drop(array, n): 最初のn個を除外
• dropRight(array, n): 末尾のn個を除外
• head(array): 最初の要素を取得（_.firstと同じ）
• last(array): 最後の要素を取得
• tail(array): 最初の要素以外を取得

8. 条件付き削除：remove / pull系

removeは条件に合致する要素を破壊的に削除し、その要素を返します。

const users = [{ age: 25 }, { age: 35 }, { age: 28 }]
const young = _.remove(users, u => u.age < 30)
// young → [{ age: 25 }, { age: 28 }]
// users → [{ age: 35 }]

pullAllは特定の値を持つ要素をすべて削除します。

_.pullAll(['x', 'y', 'x'], ['x'])
// → ['y']

9. 並び替えと検索

• reverse(array): 配列を逆順に並べ替え（破壊的）
• sortedIndex(array, value): ソートされた配列に値を挿入する適切な位置を検索
• findIndex / findLastIndex: 条件に合致する要素のインデックスを検索

10. 結合と重複排除

unionは複数の配列を結合し、重複を排除します。

_.union(['a'], ['b'], ['a', 'c'])
// → ['a', 'b', 'c']

xorは対称差集合（片方にだけ存在する要素）を抽出します。

_.xor(['a', 'b'], ['b', 'c'])
// → ['a', 'c']

11. 配列の再構成：zip / unzip

zipは複数の配列を行方向に圧縮します。

_.zip(['Alice', 'Bob'], [25, 30])
// → [['Alice', 25], ['Bob', 30]]

unzipはその逆操作です。

_.unzip([['Alice', 25], ['Bob', 30]])
// → [['Alice', 'Bob'], [25, 30]]

12. オブジェクト生成：zipObject

キーと値の配列からオブジェクトを生成します。

_.zipObject(['name', 'age'], ['Charlie', 28])
// → { name: 'Charlie', age: 28 }

zipObjectDeepはネストされたパスもサポートします。

_.zipObjectDeep(['user.name', 'user.role[0]'], ['Dana', 'admin'])
// → { user: { name: 'Dana', role: ['admin'] } }

13. 高度な再構成：zipWith / unzipWith

カスタム関数を使って要素を結合できます。

_.zipWith([1, 2], [10, 20], (a, b) => a + b)
// → [11, 22]

14. ソート済み配列専用処理

• sortedUniq(array): ソート済み配列の重複を排除
• sortedIndexOf(array, value): ソート済み配列内で値のインデックスを検索
• sortedIndexBy: 変換関数付きの挿入位置探索