Lodash/Underscoreは必要ない（かも）

Robert Chang氏によるYou don't (may not) need Lodash/Underscoreを和訳しました。
意訳が含まれるため、誤りやより良い表現などがあればご指摘頂けると助かります。

原文：https://github.com/cht8687/You-Dont-Need-Lodash-Underscore

LodashとUnderscoreは必要ない（かも）

LodashとUnderscoreは素晴らしいモダンなJavaScriptユーティリティライブラリであり、フロントエンド開発者に広く使われています。しかしながら、モダンブラウザがターゲットとなる場合、ES5やES6のおかげでネイティブにサポートされたメソッドが多くあることに気づくでしょう。プロジェクトの依存関係を減らし、ターゲットブラウザが明確になっているのであれば、LodashとUnderscoreは必要ないかも知れません。

下記項目への貢献を歓迎します。

** ES5メソッドでレガシーJavaScriptエンジンをターゲットに含めるのであれば、es5-shimを使うと良いでしょう。
** 下記の事例は特定のタスクを実行するネイティブの代替手段を示していることに注意してください。Lodashのいくつかの関数は、ネイティブの組み込み関数よりも多くのオプションを提供します。このリストは一対の比較ではありません。

開発者の声

大げさにする前にネイティブJavaScriptのオブジェクトおよび配列ユーティリティを活用するといいよ。
jQueryクックブックと開眼！JavaScriptの著者Cody lindley氏

Lodashはもはや必要なくなったようだ。ネイティブで使えるJavaScriptメソッドの良いリストが出揃った今となっては。
コンピュータ科学者であり、JavaScript Ninjaの極意 ライブラリ開発のための知識とコーディングのテクニカルレビュアーでもあるDaniel Lamb氏

そうかも知れないけど、僕には必要かな。
build-your-own-angularの著者Tero Parviainen氏

これは認めざるを得ない。僕は#lodash乱用の罪を犯してきた。良いリソースだね。
Webクリエイターであり、Node.js/io.jsのファシリテーターでもあるtherebelrobot氏

Quick links

1. _.each
2. _.map
3. _.every
4. _.some
5. _.reduce
6. _.reduceRight
7. _.filter
8. _.find
9. _.findIndex
10. _.indexOf
11. _.lastIndexOf
12. _.includes
13. _.keys
14. _.size
15. _.isNaN
16. _.reverse
17. _.join
18. _.toUpper
19. _.toLower
20. _.trim
21. _.repeat
22. _.after

_.each

配列に含まれた各要素に対してコールバック関数を一度ずつ呼び出す。

// Underscore/Lodash
_.each([1, 2, 3], function(value, index) {
  console.log(value);
}
// output: 1 2 3

// Native
[1, 2, 3].forEach(function(value, index) {
  console.log(value);
});
// output: 1, 2, 3

Browser Support

✔	1.5 ✔	9 ✔	✔	✔

⬆ トップへ戻る

_.map

配列もしくはオブジェクト内の全てのアイテムを新しい配列に変換します。

// Underscore/Lodash
var array1 = [1, 2, 3];
var array2 = _.map(array1, function(value, index) {
  return value * 2;
}
console.log(array2);
// output: [2, 4, 6]

// Native
var array1 = [1, 2, 3];
var array2 = array1.map(function(value, index) {
  return value * 2;
});
console.log(array2);
// output: [2, 4, 6]

Browser Support

✔	1.5 ✔	9 ✔	✔	✔

⬆ トップへ戻る

_.every

配列のすべての要素が与えられた関数によって実行されるテストに合格するかどうかテストします。

// Underscore/Lodash
function isLargerThanTen(element, index, array) {
  return element >=10;
}
var array = [10, 20, 30];
var result = _.every(array, isLargerThanTen);
console.log(result);
// output: true

// Native
function isLargerThanTen(element, index, array) {
  return element >=10;
}

var array = [10, 20, 30];
var result = array.every(isLargerThanTen);
console.log(result);
// output: true

Browser Support

✔	1.5 ✔	9 ✔	✔	✔

⬆ トップへ戻る

_.some

配列のいくつかの要素が与えられた関数によって実行されるテストに合格するかどうかテストします。

// Underscore/Lodash
function isLargerThanTen(element, index, array) {
  return element >=10;
}
var array = [10, 9, 8];
var result = _.some(array, isLargerThanTen);
console.log(result);
// output: true

// Native
function isLargerThanTen(element, index, array) {
  return element >=10;
}

var array = [10, 9, 8];
var result = array.some(isLargerThanTen);
console.log(result);
// output: true

Browser Support

✔	1.5 ✔	9 ✔	✔	✔

⬆ トップへ戻る

_.reduce

累積した値と配列のそれぞれの値（左から右へ）を単一の値に減らすために関数を適用します。

// Underscore/Lodash
var array = [0, 1, 2, 3, 4];
var result = _.reduce(array, function (previousValue, currentValue, currentIndex, array) {
  return previousValue + currentValue;
});
console.log(result);
// output: 10

// Native
var array = [0, 1, 2, 3, 4];
var result = array.reduce(function (previousValue, currentValue, currentIndex, array) {
  return previousValue + currentValue;
});
console.log(result);
// output: 10

Browser Support

✔	3.0 ✔	9 ✔	10.5	4.0

⬆ トップへ戻る

_.reduceRight

このメソッドは、右から左にコレクションの要素を反復処理することを除けば _.reduce のようなものです。

// Underscore/Lodash
var array = [0, 1, 2, 3, 4];
var result = _.reduceRight(array, function (previousValue, currentValue, currentIndex, array) {
  return previousValue - currentValue;
});
console.log(result);
// output: -2

// Native
var array = [0, 1, 2, 3, 4];
var result = array.reduceRight(function (previousValue, currentValue, currentIndex, array) {
  return previousValue - currentValue;
});
console.log(result);
// output: -2

Browser Support

✔	3.0 ✔	9 ✔	10.5	4.0

⬆ トップへ戻る

_.filter

提供された関数によって実行されるテストをパスした全ての要素を含む新たな配列を生成します。

// Underscore/Lodash
function isBigEnough(value) {
  return value >= 10;
}
var array = [12, 5, 8, 130, 44];
var filtered = _.filter(array, isBigEnough);
console.log(filtered);
// output: [12, 130, 44]

// Native
function isBigEnough(value) {
  return value >= 10;
}
var array = [12, 5, 8, 130, 44];
var filtered = array.filter(isBigEnough);
console.log(filtered);
// output: [12, 130, 44]

Browser Support

✔	1.5 ✔	9 ✔	✔	✔

⬆ トップへ戻る

_.find

配列内の要素が提供されたテスト関数をパスした場合、配列の値を返します。それ以外の場合は、 undefined が返されます。

// Underscore/Lodash
var users = [
  { 'user': 'barney',  'age': 36, 'active': true },
  { 'user': 'fred',    'age': 40, 'active': false },
  { 'user': 'pebbles', 'age': 1,  'active': true }
];

_.find(users, function(o) { return o.age < 40; });
// output: object for 'barney'

// Native
var users = [
  { 'user': 'barney',  'age': 36, 'active': true },
  { 'user': 'fred',    'age': 40, 'active': false },
  { 'user': 'pebbles', 'age': 1,  'active': true }
];

users.find(function(o) { return o.age < 40; });
// output: object for 'barney'

Browser Support

45.0	25.0 ✔	Not supported	Not supported	7.1

⬆ トップへ戻る

_.findIndex

配列の要素が与えられたテスト関数をパスした場合、配列のインデックスを返します。

// Underscore/Lodash
var users = [
  { 'user': 'barney',  'age': 36, 'active': true },
  { 'user': 'fred',    'age': 40, 'active': false },
  { 'user': 'pebbles', 'age': 1,  'active': true }
];

var index =  _.findIndex(users, function(o) { return o.age >= 40; });
console.log(index);
// output: 1

// Native
var users = [
  { 'user': 'barney',  'age': 36, 'active': true },
  { 'user': 'fred',    'age': 40, 'active': false },
  { 'user': 'pebbles', 'age': 1,  'active': true }
];

var index =  users.findIndex(function(o) { return o.age >= 40; });
console.log(index);
// output: 1

Browser Support

45.0	25.0 ✔	Not supported	Not supported	7.1

⬆ トップへ戻る

_.indexOf

与えられた要素に該当する配列内の最初のインデックス、もしくはそれが存在しない場合は、 -1 を返します。

// Underscore/Lodash
var array = [2, 9, 9];
var result = _.indexOf(array, 2);
console.log(result);
// output: 0

// Native
var array = [2, 9, 9];
var result = array.indexOf(2);
console.log(result);
// output: 0

Browser Support

✔	1.5 ✔	9 ✔	✔	✔

⬆ トップへ戻る

_.lastIndexOf

与えられた要素に該当する配列内の最後のインデックス、もしくはそれが存在しない場合は、 -1 を返します。

// Underscore/Lodash
var array = [2, 9, 9, 4, 3, 6];
var result = _.lastIndexOf(array, 9);
console.log(result);
// output: 2

// Native
var array = [2, 9, 9, 4, 3, 6];
var result = array.lastIndexOf(9);
console.log(result);
// output: 2

Browser Support

✔	✔	9 ✔	✔	✔

⬆ トップへ戻る

_.includes

コレクション内に値があるかどうかを確認します。

var array = [1, 2, 3];
// Underscore/Lodash - also called with _.contains
_.includes(array, 1);
// → true

// Native
var array = [1, 2, 3];
array.includes(1);
// → true

Browser Support

47✔	43 ✔	Not supported	34	9

⬆ トップへ戻る

_.keys

オブジェクト自身の列挙可能なプロパティの全ての名前を取得します。

// Underscore/Lodash
var result = _.keys({one: 1, two: 2, three: 3});
console.log(result);
// output: ["one", "two", "three"]

// Native
var result2 = Object.keys({one: 1, two: 2, three: 3});
console.log(result2);
// output: ["one", "two", "three"]

Browser Support

5✔	4.0 ✔	9	12	5

⬆ トップへ戻る

_.size

コレクション内の値の数を返します。

// Underscore/Lodash
var result = _.size({one: 1, two: 2, three: 3});
console.log(result);
// output: 3

// Native
var result2 = Object.keys({one: 1, two: 2, three: 3}).length;
console.log(result2);
// output: 3

Browser Support

5✔	4.0 ✔	9	12	5

⬆ トップへ戻る

_.isNaN

値が NaN かどうかを確認します。

// Underscore/Lodash
console.log(_.isNaN(NaN));
// output: true

// Native
console.log(isNaN(NaN));
// output: true

// ES6
console.log(Number.isNaN(NaN));
// output: true

MDN:

グローバルの isNaN() 関数と較べて、 Number.isNaN() はパラメータを数値に強制的に変換する問題に悩むことはありません。これは通常 NaN に変換される値を安全に渡せることを意味しますが、実際の NaN と同じ値ではありません。これは数値型の値が NaN でもあるということを意味し、 true を返します。 Number.isNaN()

Lodashの著者の声:

Lodashの _.isNaN は、グローバルの isNan とは異なるES6の Number.isNaN に等しいです。
--- jdalton

Browser Support for isNaN

✔	✔	✔	✔	✔

Browser Support for Number.isNaN

25	15	Not supported	✔	9

⬆ トップへ戻る

_.reverse

Lodash限定
最初の要素が最後に、2番目の要素が最後から2番目となるように配列を反転します。

// Lodash
var array = [1, 2, 3];
console.log(_.reverse(array));
// output: [3, 2, 1]

// Native
var array = [1, 2, 3];
console.log(array.reverse());
// output: [3, 2, 1]

Lodashの著者の声:

Lodashの _.reverse は Array#reverse を呼びだして _.map(arrays, _.reverse) のような構成を利用可能にするためだけのものです。
それは前もって Underscore のようにチェーン構文中でのみ晒されるため、 _ 上に晒されます。
--- jdalton

Browser Support

1.0✔	1.0✔	5.5✔	✔	✔

⬆ トップへ戻る

_.join

Lodash限定
与えられたセパレータで配列内の要素を結合します。

// Lodash
var result = _.join(['one', 'two', 'three'], '--');
console.log(result);
// output: 'one--two--three'

// Native
var result = ['one', 'two', 'three'].join('--');
console.log(result)
// output: 'one--two--three'

Browser Support

1.0✔	1.0✔	5.5✔	✔	✔

⬆ トップへ戻る

_.toUpper

Lodas限定
与えられた文字列を大文字に変換します。

// Lodash
var result = _.toUpper('foobar');
console.log(result);
// output: 'FOOBAR'

// Native
var result = 'foobar'.toUpperCase();
console.log(result);
// output: 'FOOBAR'

Browser Support

✔	✔	✔	✔	✔

⬆ トップへ戻る

_.toLower

Lodash限定
与えられた文字列を小文字に変換します。

// Lodash
var result = _.toLower('FOOBAR');
console.log(result);
// output: 'foobar'

// Native
var result = 'FOOBAR'.toLowerCase();
console.log(result);
// output: 'foobar'

Browser Support

✔	✔	✔	✔	✔

⬆ トップへ戻る

_.trim

Lodash限定
文字列から先頭と末尾の空白文字を削除します。

// Lodash
var result = _.trim(' abc ');
console.log(result);
// output: 'abc'

// Native
var result = ' abc '.trim();
console.log(result);
// output: 'abc'

Browser Support

5.0✔	3.5✔	9.0✔	10.5✔	5.0✔

⬆ トップへ戻る

_.repeat

Lodash限定
与えられた文字列をn回繰り返します。

// Lodash
var result = _.repeat('abc', 2);
// output: 'abcabc'

// Native
var result = 'abc'.repeat(2);
console.log(result);
// output: 'abcabc'

Browser Support

41✔	24✔	Not supported	Not supported	9

⬆ トップへ戻る

_.after

これは代替の実装であることに注意してください。
最初のカウント数分呼び出された後に実行される関数のバージョンを作成します。次に進む前に、全ての非同期呼び出しが完了したことを確認するための非同期応答のグルーピングに役立ちます。

var notes = ['profile', 'settings'];
// Underscore/Lodash
var renderNotes = _.after(notes.length, render);
   notes.forEach(function(note) {
   console.log(note);
   renderNotes();
});

 // Native
notes.forEach(function(note, index) {
 console.log(note);
 if (notes.length === (index + 1)) {
   render();
 }
});

Browser Support

✔	✔	✔	✔	✔

⬆ トップへ戻る

参考文献

• Mozilla Developer Network
• Underscore.js
• Lodash.js

着想を得た記事

• You-Dont-Need-jQuery
• Rui's blog

ライセンス

MIT