JavaScriptのクロージャの使い方を現役エンジニアが解説【初心者向け】

JavaScriptのクロージャの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

 

クロージャとは

クロージャとは、関数とその関数を作った場所をまとめたものです。平たく例えるなら、マイルールや自分専用の何かを持っている人のようなものです。マイルールや自分専用のものは、他人は関与できないですよね。

とは言え、JavaScriptのクロージャーがどのように便利なのかこれではピンとこないかと思います。まずは自分専用の変数や処理をもつものとだけ捉えて、具体的なソースをふまえて見ていきましょう。

スコープとは

スコープとは、有効な範囲のことです。有効な範囲を利用して、その関数専用の変数や処理を用意することができます。JavaScriptでは、変数や関数などに呼び出せる範囲が決まっていて呼び出せる範囲、もしくは参照できる範囲をスコープと呼びます。

スコープは、大きく分けて2種類あります。

1、グローバルスコープ

これは平たく言うと、JavaScriptのどこからでもアクセスできて全部の範囲が有効ということです。

2、ローカルスコープ

ローカルスコープには更に細かく2種類あり、「関数スコープ」と「ブロックスコープ」に別れます。関数スコープは関数の中だけ有効で、ブロックスコープは{から}に囲まれた中だけ有効となります。

クロージャでは、関数スコープを利用しますので関数の中で作られた変数や処理は、関数の中でしかアクセスできないということを覚えておいてください。

[PR] フロントエンドで挫折しない学習方法を動画で公開中

クロージャの使い方

では具体的なソースをふまえて使い方を紹介します。「makePlayer」という変数に「function (initMoney)」という無名関数（名前のない関数）の戻り値が格納されています。この戻り値は「addMoney」と「getMoney」という2つのメソッドを持つオブジェクトになっています。

最後の行の「makePlayer()」にて、yamadaという変数にこの戻り値のオブジェクトを格納しています。このyamadaがクロージャです。

「var money」はyamada専用となっていて、直接呼び出すとエラーになり操作できません。「yamada.getMoney()」のようにyamadaのメソッドを呼び出すことで操作ができます。

関数スコープによって、関数の中の変数が閉じ込められ、それを格納した変数の専用のものとなりました。

var makePlayer = function (){
  var money = 0;
  return {
    addMoney:function(a){ money += a},
    getMoney:function(){ return money},
  }

}
var yamada = makePlayer();
console.log(yamada.getMoney());

 

クロージャを使うメリット

関数スコープを使い、変数や処理を閉じ込めて専用にするクロージャのメリットは大きく2つあります。

1つ目は、関数スコープで守られているので間違って他の処理に値を変えられたりすることがないということです。特にソースの行数が長くなってくると、同じ変数名を作ってしまうこともあるかと思います。その場合でも同じ変数名でも別の変数として扱われるので、動作が保証できます。

2つ目は、同じようなデータや処理をたくさん作る際に変数や処理を何度も書かなくて良いということです。こちらのメリットは特に大きく差が付きますので、先程のクロージャの例で紹介したソースで説明します。

このソースではmoneyという変数のみが、クロージャの中にあります。そこで、ゲームのキャラクターのステータスのような場合を考えてみてください。おそらくmoney（お金）の他にもpower（力）やspeed（スピード）など多くの項目が加わることになるかと思います。

そして、ゲームのキャラクターが増えたり減ったりしたらどうでしょうか。キャラクターごとに、キャラ1のmoney、power、speed、キャラ2のmoney、power、speed、キャラ3の・・・と変数が果てしなく増えていきます。

クロージャを使えば、下記のように記述するだけで専用の変数が内包されるので追加で変数を用意する必要はありません。

var suzuki = makePlayer();
var sato = makePlayer();

もちろん、専用の変数なのでyamadaのmoney（お金）を増やしても、suzukiやsatoのmoney（お金）には変化はありません。処理と値をセットにしたい場合や、専用の値がほしい場合にぜひクロージャを使ってみてください。

筆者プロフィール

横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

 

TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。