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

初心者向けにJavaScriptのクロージャの使い方について現役エンジニアが解説しています。クロージャとは関数とその関数を作った場所をまとめたものです。クラスと同じように変数のスコープを切って、独自に扱うことが出来ます。実際にサンプルプログラムでクロージャを作成してみましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

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

 

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

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptのクロージャの使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

クロージャとは

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

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

スコープとは

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

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

1、グローバルスコープ

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

2、ローカルスコープ

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

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

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

クロージャの使い方

では具体的なソースをふまえて使い方を紹介します。「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では、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

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