JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのモジュールパターンとは？匿名クロージャを使った実装例でわかりやすく解説

従来のJavaScriptには、Javaなどの言語にあるようなクラス構文がネイティブには存在しませんでした。そこで開発者の間で広く採用されてきたのがモジュールパターン（Module Pattern）です。これは、公開メソッド（public）・非公開メソッド（private）・変数を、ひとつのオブジェクトの中にまとめて管理するための設計手法です。

モジュールパターンの基本的な考え方

モジュールパターンの中心となるのが匿名クロージャ（Anonymous Closure）です。無名関数をその場で即時実行する（IIFE：Immediately Invoked Function Expression）ことで、内部の変数や関数を外部から直接アクセスできない状態にできます。これにより、グローバルスコープを汚染せず、データを安全にカプセル化することが可能になります。

なお、ES2015（ES6）以降はクラス構文や標準のモジュール機能が導入されましたが、モジュールパターンはクロージャによるカプセル化の本質を学ぶうえで今も非常に重要な概念です。

実例：投票資格のない有権者を抽出する

ここでは、年齢が18歳未満であるために投票資格を満たさない有権者を表示するサンプルコードを通じて、モジュールパターンの使い方を確認してみましょう。

<!DOCTYPE html>
<html>
   <body>
      <script>
         (function () {
            var votersAge = [15, 50, 27, 17, 22, 87, 65, 45];

            // 平均年齢を計算する非公開関数
            var average = function() {
               var total = votersAge.reduce(function(accumulator, age) {
                  return accumulator + age}, 0);
               return total / votersAge.length + '.';
            }

            // 投票資格がない人を抽出する非公開関数
            var notQualified = function(){
               var notAdult = votersAge.filter(function(age) {
                  return age < 18;});
               return 'Voters not qualified to vote (age less than 18) = ' + notAdult.length;
            }

            document.write(notQualified());
         }());
      </script>
   </body>
</html>

実行結果

上記のコードを実行すると、ブラウザには次のように表示されます。

Voters not qualified to vote (age less than 18) = 2

コードのポイント

このサンプルでは、次のような流れで処理が行われています。

  • votersAge：8人の有権者の年齢を格納した配列です。
  • notQualified関数：filter()メソッドを使って18歳未満の年齢だけを抽出します。この例では「15」と「17」が該当するため、件数は2となります。
  • average関数：reduce()メソッドで合計値を求め、平均年齢を計算します。クロージャ内に定義されているため、外部から呼び出すことはできません。
  • IIFE（即時実行関数）：(function () { ... }()) の形式で囲むことで、これらの変数や関数がすべてプライベートになり、グローバルスコープへの影響を防いでいます。

このように、モジュールパターンを使えば、必要な処理をひとつの独立した単位にまとめつつ、内部の実装詳細を隠蔽できます。大規模なアプリケーションでは、公開したい機能だけをオブジェクトとしてreturnすることで、より実践的なモジュールとして拡張することも可能です。

  1. JavaScriptのundefined（未定義）とは？変数の判定方法をサンプルコードで解説

    JavaScriptのundefined（未定義）は、変数がまだ宣言されていない、あるいは宣言されていても値が代入されていないことを示す特殊な値です。変数の状態を確認したい場面で頻繁に登場するため、初心者の方にとって押さえておきたい重要な概念の一つです。 undefinedの基本的な役割 undefinedは、次のような状況で返される値です。 変数を宣言したものの、まだ値を代入していない場合 存在しないオブジェクトのプロパティにアクセスした場合 関数の引数が渡されなかった場合 以下は、JavaScriptのundefinedを使って、変数が定義済みかどうかを判定する実装例です。 サンプルコ

  2. JavaScriptで数字パターンを表示する方法【初心者向けサンプルコード】

    本記事では、テキスト入力欄とボタンを備えたJavaScript・HTMLプログラムの作成方法を解説します。ユーザーが入力欄に任意の数値(例：5)を入力してボタンをクリックすると、画面に以下のような数字パターンが表示される仕組みです。(n = 5 の場合の出力例)01 01 02 01 02 03 01 02 03 04 01 02 03 04 05仕組みのポイントこのパターンは二重ループ(ネストしたforループ)を使うことで実現できます。外側のループが「行」を制御し、内側のループがその行に表示する「数字の個数」を制御します。i 行目には 1 から i までの数字が順番に出力されるため、行が進む