JavaScript

JavaScriptの即時関数とは【スコープの限定・プライベート化】

どうも、つよぽんです!

今回は、JavaScriptの「即時関数」について解説をします。

JavaScriptの即時関数を使うことで「変数・関数のスコープの範囲を限定」することができます。

上記の説明が現時点でピンとこなくても問題ありません。

この記事で「そもそも即時関数とは何か?」「即時関数はどういうときに使うのか?」について解説していきます。

今回の記事は次のような方に向けて書きました。

想定読者
  • 即時関数って何?
  • 即時関数の書き方を知りたい
  • 即時関数はどういうときに使うの?

今回の記事は以下の学習コンテンツのスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
JavaScriptの即時関数を理解するJavaScriptの「即時関数」について学習します。即時関数とは関数の定義と実行を同時に行うものです。即時関数を使うことによって、変数・関数の影響範囲(スコープ)を限定することが出来ます。つまりプライベートな変数・関数を作ることが出来ます。...

それでは次の内容で話を進めていきます。

今回の内容
  1. JavaScriptの即時関数とは
  2. JavaScriptの即時関数の書き方
  3. JavaScriptの即時関数を使う意味(スコープの限定)

 

JavaScriptの即時関数とは

この章では、「JavaScriptの即時関数とは何か?」について解説していきます。

JavaScriptの即時関数について一言で説明すると、「関数の定義と実行を同時に行う」ことです。

JavaScriptでは関数を定義するときは次の3つ方法がありました。

3つの関数定義方法
  1. 関数宣言
  2. 関数式
  3. アロー関数

上記3つの方法で関数を定義した場合は、あくまでもまだ「関数を定義」しただけで、「関数の実行」は行っておりません。

関数を実行する際には、①関数宣言のときには「関数名()」、②関数式③アロー関数では、「変数名()」のように「()」を後ろにつける必要があります。

もちろんコールバック関数のときも同じで、「引数名()」のように、後ろに「()」をつけて実行できました。

即時関数も基本的に考え方は同じで、関数定義の後ろに「()」をつけることで関数を実行することが出来ます。

しかし、ただ後ろに「()」をつけるだけでは動かず、もう1つ付け加える必要があります。

実際にどのように記述すれば「関数の定義と実行」を同時に行えるのか、つまり即時関数の書き方を次の章で説明していきます。

JavaScriptの即時関数の書き方

この章では、「JavaScriptの即時関数の書き方」を解説していきます。

引数の無い即時関数の文法

この項目では、引数がないときの「即時関数の書き方」を説明します。

前の章の終わりで、即時関数の書き方について次のように説明しました。

  1. 通常の関数の実行と同じように、関数定義の後ろに「()」をつける
  2. しかし、関数の後ろに「()」をつけるだけではダメで、もう1つ何かを加える必要がある

上記2つの内、についてはそのままですが、「もう1つ何かを加える必要がある」では、いったい何を加える必要があるのでしょうか?

結論から言うと、「定義した関数を「()」で囲む」ことです。

以下の画像は、の説明をまとめたものとなります。

即時関数の基本文法即時関数の基本文法

上の画像でも記述している通り「(関数定義)()」の形式で記述すると「関数の定義と実行」が同時に行われます。

通常関数の実行と、即時関数の実行を比較したものです。

通常関数の実行と即時関数の実行を比較したサンプルコード通常関数の実行と即時関数の実行を比較したサンプルコード

画像右側の「Console」で出力されている通りどちらも関数が実行されているのがわかります。

それでは、次に「引数ありの即時関数」の書き方を見ていきましょう。

上の画像で使われているサンプルコードは以下のリンクから直接確認できます。

即時関数のサンプル1

引数がある即時関数の文法

引数ありの即時関数」の書き方は以下の画像にまとめているようにとおりです。

引数のある即時関数の書き方引数のある即時関数の書き方

通常の関数と同じように、関数定義で引数名をセットして、関数実行時に値を「()」の中に引数に渡したい値をセットするだけです。

以下の画像は「引数ありの即時関数」の実行をあらわしたものです。

引数ありの即時関数を使ったサンプルコード引数ありの即時関数を使ったサンプルコード

上の画像で使われているサンプルコードは以下のリンクから直接確認できます。

即時関数のサンプル2

JavaScriptの即時関数を使う意味(スコープの限定)

この章では、「JavaScriptの即時関数を使う意味?」について解説します。

JavaScriptの即時関数の存在意義を認識するには「JavaScriptのスコープ」について理解しているとすぐにわかるでしょう。

あわせて読みたい
JavaScriptのスコープとは【関数とブロックの2種類】JavaScriptでは変数宣言で使うキーワード(var, let, const)によって、変数にアクセスできる範囲(=スコープ)が変わってきます。具体的には①ブロックスコープ、②関数スコープの2つがあります。それぞれの挙動の違いを解説します。...

JavaScriptはもともと関数スコープだけだった

JavaScriptの変数や関数のスコープは関数で区切られる、つまり「関数スコープ」でした。

そのため、if, for, whileなどで使われるブロック(「{}」)の中には、ブロック外からもアクセスできていました。

この挙動はJavaやPHPなど他の一般的なプログラミング言語とは異なる挙動で、いくつかの問題を抱えていました。

抱えていた問題例
  1. ブロック内の変数にブロック外からもアクセスできるため変数の上書きをしてしまう可能性がある
  2. ブロック内で使っている変数名と同じ変数名を使うことが出来ない(同じ意味を表す値でも異なる変数名を使う必要がある)

そのため、他のプログラミング言語と同じように、変数をブロック外からアクセスできないようにするためには「関数内に閉じ込める」必要がありました。

しかし、関数の中で記述されたコードは当然、関数を実行しない限り使われません。

そこで「関数内に閉じ込めた」コードをすぐに実行する即時関数を利用することで、先程の抱えていた問題を解決することが出来ます。

つまり次の2点が実現されることになります。

解消された問題点
  1. 関数外からは関数内の変数にアクセスできないため、変数がプライベート化される
  2. 関数内と関数外で同じ変名を使うことが出来る

ここまで、スコープの観点からJavaScriptの即時関数の存在意義について解説してきました。

以下のQiita記事でも即時関数を使う理由についてまとめられているので、もう少し詳しく知りたい方はそちらも参考にして頂けたらと思います。

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  1. JavaScriptの即時関数とは「関数の定義と実行を同時に行うもの」である
  2. 即時関数の書き方は、通常の関数定義を「()」で囲み、関す定義の後ろに関数の実行をあらわす「()」である。つまり「( function(){} )()」となる。
  3. 即時関数では引数を渡すことも出来て、その場合は「( function(value){} )(‘引数で渡す値’)」となる。
  4. 即時関数は変数のスコープの範囲を限定するのに使われる

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
JavaScriptの即時関数を理解するJavaScriptの「即時関数」について学習します。即時関数とは関数の定義と実行を同時に行うものです。即時関数を使うことによって、変数・関数の影響範囲(スコープ)を限定することが出来ます。つまりプライベートな変数・関数を作ることが出来ます。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

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