AMG Solution

JavaScriptが楽になる!? Underscoreによるソースコードのスマート化

こんにちは。樋口です。
 
本日は、JavaScriptの便利関数ライブラリである、Underscore.jsについてご紹介します。このライブラリを使用することにより、複雑になりやすいJSのコードをスマートに書くことができます。
 
今回は、Underscoreのバージョン1.8.3を使用して、よく使用するおすすめメソットをサンプル付きで簡単にご紹介します。

1. ライブラリの読み込み

Underscoreは、ライブラリ本体を読み込むことにより使用可能となります。
 
ライブラリの読み込みは下記コードです。

2. _.each

まずは、配列の中身を順番にコンソールログに出力する例です。

 
次に、_.each関数での書き方です。

 
_.each関数では、配列のデータを順番に処理します。
 
1つ目の引数には順番に取り出すオブジェクトを、2つ目の引数には取り出したデータ処理を行うコールバック関数を受け渡します。
 
なので、下記のように第2引数部分を分割することもできます。

3. _.map

基本的な使用方法としては、_.each関数と同じです。違いとして、_.map関数では処理を行った結果を配列として返却してくれます。

4. _.reduce

基本的な使用方法としては、_.each関数と同じです。違いとして、第3引数に渡した値が、第2引数の関数の第1引数に引き渡されます。
 
さらに、第2引数の関数の戻り値が次回呼び出しの、関数の第1引数に再度引き渡されます。

5. _.filter

第1引数に渡された配列の内、一致する要素全てを配列として返却します。

 
また、一致する初めの要素1つを返却する、_.find関数もあります。

6. _.uniq

配列内の重複データを1つにします。

まとめ

今回紹介したUnderscore.jsのメゾットには、他にも様々な便利な機能がたくさんあります。
 
また、Underscore.jsの互換性を持つLo-Dashというライブラリもありますので、こちらもぜひ調べてみてください。

HIGUCHI'S BLOG

樋口一成の記事

樋口一成の記事の最新情報をお届けいたします。

SAME CATEGORY BLOG

この記事と同様のカテゴリー記事

新卒採用
はじめました。
LOADING