Edited at

Lodash/Underscoreは必要ない(かも)

More than 1 year has passed since last update.

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

:exclamation: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の _.reverseArray#reverse を呼びだして _.map(arrays, _.reverse) のような構成を利用可能にするためだけのものです。

それは前もって Underscore のようにチェーン構文中でのみ晒されるため、 _ 上に晒されます。

--- jdalton



Browser Support





1.0✔
1.0✔
5.5✔

⬆ トップへ戻る


_.join

:exclamation: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

:exclamation:Lodas限定

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

  // Lodash

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

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


Browser Support









⬆ トップへ戻る


_.toLower

:exclamation:Lodash限定

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

  // Lodash

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

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


Browser Support









⬆ トップへ戻る


_.trim

:exclamation: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

:exclamation: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

:exclamation:これは代替の実装であることに注意してください。

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

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









⬆ トップへ戻る


参考文献


着想を得た記事


ライセンス

MIT