JavaScriptのソースコードを読む時に知っておきたいモジュールパターン

JavaScriptの勉強のためにGitHubで公開されているコードを読もうとしたが、なかなか骨が折れた。

おそらく、まだ基礎的な部分が出来ていない可能性があるため、基礎に立ち返る意味を込めてモジュールのまとめをしていく。

モジュールとは?

モジュールとは、スコープを利用することで変数や関数がコードに影響する範囲を極力まで狭めることで、保守性を上げる方法、考え方のこと。

例えば、コードの1行目で var sample = “hello” と定義したとしても、1000行目ぐらいでvar sample = “good bye”と同じ変数や関数を再定義してしまうと、思いも寄らない動作、バグを引き起こしてしまう。

そのため、モジュールを使って変数や関数の範囲を狭めるのが重要になってくる。

以下は、どのようにモジュールを使えば良いのか見ていく。

即時関数を使う

(function() {
  var sample = "hello";

  function test1() {
    console.log(test2());
  }

  function test2() {
    var sample2 = "Test!";
    return sample2;
  }

  test1();
}());

1つ目は即時関数を使ってモジュール化を行う方法。
肝心なのは、一番外側のfunction(匿名関数)の部分を()で囲い、その後()と書いて匿名関数を実行すること。

匿名関数内には、sample等の変数やtest1などの関数を定義しているが、匿名関数外の変数などに一切影響を与えることはない。

var global = "global";

(function() {

  function test1() {
    console.log(global);
  }
  test1();
}());

しかし、上記の例の様に、匿名関数側からグローバル変数(匿名関数の外側の変数)を見ることはできるので便利。

即時関数の引数にグローバル変数を入れる

即時関数の引数にグローバル変数を入れることで、グローバルスコープ(コード全体)に影響を与えることなく、引数に入れたグローバル変数を操作することができる。

例えば、以下の様な例がある。

var grobal = {};

(function(grobal){

  grobal.setKey = function() {
    grobal['Tanaka'] = "I am tarou";
    grobal['Suzuki'] = "I am sena";
  }

  grobal.setKey();
})(grobal);

console.log(grobal);

分かりにくい例だが、まずグローバル変数grobalを即時関数の引数として代入していて、その即時関数の中でgrobal.setKey = function(){…}と定義することで、グローバル変数grobal自身にsetKeyと言うメソッド(プロパティ)を追加している。

そして、setKeyを実行することで、さらにTanakaプロパティとSuzukiプロパティをgrobalに追加している。

変数の即時関数を代入する

以下の様にしてモジュール化するのも良い。

var modulePattern = (function(){

var local = [34,55,64,32,64];

return {
   add: function(){
     ...
   },

   sub: function() {
    ...
   }
}

})();

このようにモジュール化することで、modulePattern.add()とかmodulePattern.sub()のように関数を呼び出すことができる。

もちろん、以下の様にしても関数を呼び出すことが可能だ。

var modulePattern = {
   add: function(){
     ...
   },

   sub: function() {
    ...
   }
}

しかし、最初のコードとの違いはvar local = [34,55,64,32,64];のように即時関数内でローカル変数が置けないという点だ。

つまり、最初のコードのように書いた方が、複数の関数にまたがって使えるローカル変数を置けるという点で優れている。

また、最初のコードは以下の様に書くこともできる。

var modulePattern = (function(){

var local = [34,55,64,32,64];

   var add = function(){
     ...
   },

   var sub = function() {
    ...
   }
}

return {
   add: add,
   sub: sub
}

})();

個人的にはこっちの方がスッキリして好き。

参考記事:JavaScript Modules: A Beginner’s Guide – freeCodeCamp.org

参考記事:【JavaScript】モジュールパターンについて知る – Qiita

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

SNS Shere

Related Post

JavaScriptを使ってスクロールでメニューを固定・追従させる方法

Windowsにnode.js+Electronを入れてwindowsアプリを作る方法

Javascript+HTML5を使って画像アップロードのプレビュー機能を実現する方法

Javascriptの書き方パターン

JavaScriptにおける短絡演算子(ショートカット演算子)の実践的な使い方

JavaScriptの配列で参照渡しではなく値渡しをする方法と注意点