LoginSignup
470
424

More than 5 years have passed since last update.

@ossan-engineer

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

Last updated at Posted at 2016-02-27

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

Chrome Firefox IE Opera Safari
✔ 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

Chrome Firefox IE Opera Safari
✔ 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

Chrome Firefox IE Opera Safari
✔ 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

Chrome Firefox IE Opera Safari
✔ 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

Chrome Firefox IE Opera Safari
✔ 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

Chrome Firefox IE Opera Safari
✔ 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

Chrome Firefox IE Opera Safari
✔ 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

Chrome Firefox IE Opera Safari
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

Chrome Firefox IE Opera Safari
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

Chrome Firefox IE Opera Safari
✔ 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

Chrome Firefox IE Opera Safari
✔ ✔ 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

Chrome Firefox IE Opera Safari
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

Chrome Firefox IE Opera Safari
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

Chrome Firefox IE Opera Safari
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

Chrome Firefox IE Opera Safari
✔ ✔ ✔ ✔ ✔

Browser Support for Number.isNaN

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

Browser Support

Chrome Firefox IE Opera Safari
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

Chrome Firefox IE Opera Safari
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

Chrome Firefox IE Opera Safari
✔ ✔ ✔ ✔ ✔

⬆ トップへ戻る

_.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

Chrome Firefox IE Opera Safari
✔ ✔ ✔ ✔ ✔

⬆ トップへ戻る

_.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

Chrome Firefox IE Opera Safari
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

Chrome Firefox IE Opera Safari
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

Chrome Firefox IE Opera Safari
✔ ✔ ✔ ✔ ✔

⬆ トップへ戻る

参考文献

着想を得た記事

ライセンス

MIT

470
424
5

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
470
424