Underscore.jsの入り口

第3回 underscore.jsの関数とユーティリティとChaining

この記事を読むのに必要な時間:およそ 8 分

underscore.jsの関数とユーティリティ(テンプレート等)とChainingの機能をご紹介します。

関数の機能

JavaScriptで関数型プログラミングのテクニックが使いやすくなる便利な関数が揃っています。引数に1つ以上の関数を受け取り,その関数に対して処理を行い,新しい関数を返します。

今回は,関数をオブジェクトで束縛する_.bind(),関数の部分適用を行う_.partial(),メモ化を行う_.memoize()などを紹介していきます。その他の機能につきましては記事の最後にまとめましたので,参考にしていただければと思います。

_.bind()

書式
_.bind(function, object, [*arguments])

指定したobjectにfunctionを束縛(bind)して新しい関数を返します。よって新しい関数の中で使われるthisは指定したobjectになります(functionが呼び出される際のコンテクストを指定できます)⁠

argumentsを渡した場合は引数も部分適用(partial application)する事ができます。ネイティブの機能でbind()が使える環境ではそちらを使います。

var message = function(greeting){
    return greeting + this.name + '!!!'
};

var hello_message = _.bind(message, {name: 'makoto'}, 'hello!!'); 
//message関数を指定したオブジェクトで束縛(bind)する

hello_message();
//=> 'hello!!makoto!!!'
関数の部分適用(partial application)

関数型プログラミングで紹介されるテクニックの1つです。既存の関数に引数をあらかじめ指定して新しい関数(ラッパー関数)を作ります。同様の関数をほとんど同じ引数で使っていたらその関数は部分適用する候補になります。

_.partial()

書式
_.partial(function, [*arguments])

指定した関数の引数を部分適用した新しい関数を返します。

var add = function(a, b) { return a * b; };

add(16,11);
//=> 176

//add関数の引数aを部分適用します。
var add11 = _.partial(add, 11); 

add11(16);
//=> 176


var message = function(greeting){
    return greeting + ' ようこそお越し下さいました。'
};

//message関数の引数をそれぞれ部分適用します。
var daytime_message = _.partial(message,'こんにちは');
var night_message   = _.partial(message,'こんばんは');

daytime_message();
//=> "こんにちは ようこそお越し下さいました。"

night_message();
//=> "こんばんは ようこそお越し下さいました。"

_.memoize()

書式
_.memoize(function, [hashFunction])

引数に渡したfunctionの結果をメモ化する関数として新しく返します。2回目からは問い合わせ内容がキャッシュされるので結果を返すのが高速化されます。

第2引数のhashFunctionはメモ化する際にメモ化されるデータのキーを設定するために使われます。デフォルトでは_.identityにfunctionの引数を渡したものがメモ化されるデータのキーとして使われます。

・メモ化

一度呼び出された結果をそのときの引数と共に記憶しておき,後で同じ引数で呼び出されたときいんは処理を行わずにその記憶していた値を返します。実行速度の遅い計算を何度か行う場合,2回目からは問い合わせ内容がキャッシュされるので結果を返すのが高速化されます。

下記,使用例になります。

//データになります。
var members = [
  { 'name': 'chiba', 'age': 25 },
  { 'name': 'kuhara', 'age': 24 },
  { 'name': 'abe', 'age': 26 },
  { 'name': 'ueno', 'age': 27 }
];

//データを取得する関数です
var get = function(name){
    return _.find(members,
        function(member){ 
            return member.name == name;
        })
};

//データが取得できます。
get('chiba');
// =>  {name: "chiba", age: 25}


//メモ化関数をかえします。
var getmemo = _.memoize(get);

//データが取得できます。データがキャッシュされます。
getmemo('chiba');
// =>  {name: "chiba", age: 25}

//二回目以降はキャッシュから取得します。
getmemo('chiba');
// =>  {name: "chiba", age: 25}


//フィボナッチ数列の計算のメモ化の例です。
var fibonacci = _.memoize(function(n) {
  return n < 2 ? n: fibonacci(n - 1) + fibonacci(n - 2);
});

著者プロフィール

早瀬まこと(はやせまこと)

大規模Webサイトの運用更新にフロントエンドエ ンジニアとして従事しています。

DOMと組み合わせたフロントエンドの開発を主に行っています。

バックナンバー

Underscore.jsの入り口

コメント

コメントの記入