JavaScriptにおけるクロージャーを使ったライブラリ

JavaScriptでは、他のプログラマーが利用するための関数の集合体であるライブラリがよく作成されます。

このようなライブラリは通常、クロージャーを介してモジュールにラップされます。これは、ライブラリを接続したときに外部の世界に現れる関数をできるだけ少なくするためです。

一般に、各ライブラリは外部の世界に作成する変数を、ライブラリの関数を持つオブジェクトという1つの変数だけに抑えようとします。このとき、ライブラリのコード内では、一部の関数は主要なものであり、一部は補助的なものです。明らかに、外部の世界には補助的な関数でエクスポートするオブジェクトを散らかさずに、必要な関数だけをエクスポートしたいのです。

例を見てみましょう。以下の関数のセットがあり、これをライブラリにしたいとします：

math.jsfunction square(num) {
  return num ** 2;
}
function cube(num) {
  return num ** 3;
}
function avg(arr) {
  return sum(arr, 1) / arr.length;
}
function digitsSum(num) {
  return sum(String(num).split(''));
}

// 補助関数
function sum(arr) {
  let res = 0;
  
  for (let elem of arr) {
    res += +elem;
  }
  
  return res;
}

これらの関数をモジュールとして構成してみましょう：

math.js;(function() {
  function square(num) {
    return num ** 2;
  }
  function cube(num) {
    return num ** 3;
  }
  function avg(arr) {
    return sum(arr, 1) / arr.length;
  }
  function digitsSum(num) {
    return sum(String(num).split(''));
  }
  
  // 補助関数
  function sum(arr) {
    let res = 0;
    
    for (let elem of arr) {
      res += +elem;
    }
    
    return res;
  }
})();

では、補助関数を除くすべての関数をエクスポートしましょう：

math.js;(function() {
  function square(num) {
    return num ** 2;
  }
  function cube(num) {
    return num ** 3;
  }
  function avg(arr) {
    return sum(arr, 1) / arr.length;
  }
  function digitsSum(num) {
    return sum(String(num).split(''));
  }
  
  // 補助関数
  function sum(arr) {
    let res = 0;
    
    for (let elem of arr) {
      res += +elem;
    }
    
    return res;
  }
  
  window.math = {square, cube, avg, digitsSum};
})();

HTMLページindex.htmlがあるとします：

index.html<html>
  <head>
    <script>
      
    </script>
  </head>
</html>

このページにライブラリを接続しましょう：

index.html<html>
  <head>
    <script src="math.js"></script>
    <script>
      
    </script>
  </head>
</html>

ライブラリの関数を使ってみましょう：

index.html<html>
  <head>
    <script src="math.js"></script>
    <script>
      alert(math.avg([1, 2, 3]) + math.square());
    </script>
  </head>
</html>

javascriptfunction avg1(arr) {
  return sum(arr, 1) / arr.length;
}

function avg2(arr) {
  return sum(arr, 2) / arr.length;
}

function avg3(arr) {
  return sum(arr, 3) / arr.length;
}

// 補助関数
function sum(arr, pow) {
  let res = 0;
  
  for (let elem of arr) {
    res += elem ** pow;
  }
  
  return res;
}