JavaScriptで即時関数を使う方法【初心者向け】

プログラミング初心者向けに、JavaScriptで【即時関数を使う方法】を解説した記事です。関数とは、関数とは、処理に名前をつけてまとめたものです。無名関数とは、関数名のない関数です。即時関数は、即時実行関数式です。サンプルコードもあり。

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

JavaScriptをプログラミング初心者向けに紹介した記事です。

今回は、JavaScriptで即時関数を使う方法について解説します。

 

本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

目次

関数とは、関数とは、処理に名前をつけてまとめたものです。

無名関数とは、関数名のない関数です。

即時関数は、英語で IIFE (Immediately Invoked Function Expression)と呼ばれる即時実行関数式です。

 

 

関数とは

関数とは、処理に名前をつけてまとめたものです。

これにより、他の場所から関数を呼び出して使用することができます。

つまり、何度も利用する処理の場合、呼び出すだけで簡単に利用することができます。

fonctionを使い、次のように定義します。

function 関数名( ) {
  処理
}

 

大石ゆかり

関数は名前を付けて処理を定義するものですよね?functionで定義すると後ろのほうに書いても、前で使えるんでしたっけ?

田島悠介

その通り!ただ、JavaScriptの関数には名前をつけないで書くことが出来る無名関数というのもあるんだよね。

大石ゆかり

名前が無い関数も書くことが出来るんですか?

 

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

無名関数とは

無名関数とは、その名の通り関数名なしに関数を定義できるものです。

無名関数を利用することは、高階関数を利用する際にコードがシンプルになるというメリットにも繋がります。

高階関数とは、関数自体を引数や戻り値として扱うことができる関数のことをいいます。

高階関数では、引数になる関数が1回きりしか使わない関数の場合が多く、そのため無名関数にすることでコードをシンプルにすることができます。

また、無名関数にすることでグローバルスコープ名を定義する必要がないため、結果的に関数名の重複によるエラーを減らすことにもつながります。

 

通常の関数と無名関数の比較

次のプログラムをもとに名前付き関数と無名関数を比較してみましょう。

function( ) {
  処理
}

通常の関数

sumという関数名で定義した関数を、変数answerに代入してconsole.logで呼び出します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScriptの練習</title>
  </head>
  <body>
    <script>
      function sum(a,b){
        var result = a + b;
        return result;
      }
      var answer = sum(1,2);
      console.log(answer);
    </script>
  </body>
</html>

 

console.logで呼び出すと、引数の1,2に応じて、「3」が出力されますね。

3

 

 

無名関数

次は、同じプログラムを無名関数で書いてみます。

<script>
  var sum = function (a,b){
    var result = a + b;
    return result;
  }
  var answer = sum(1,2);
  console.log(answer);
</script>

名前付き関数では、まず関数sumを定義し、そのsumをのちほど変数answerに代入し、引数1,2を入れて呼び出しました。

それに対し、無名関数では、変数関数の定義そのものを = で直接入れることができるようになります。

このように、変数に関数定義そのものを格納できるというのが、無名関数のメリットでもあります。

結果も同じです。

3

 

大石ゆかり

無名といっても変数に関数を代入した場合は、再度使えますね。

田島悠介

本当に名前無しでも書けるんだよね。例えば、こんな感じで。(function(){console.log(“a”);}());

大石ゆかり

ちゃんと実行されてますね。

 

即時関数とは

即時関数は、英語で IIFE (Immediately Invoked Function Expression)と呼ばれる即時実行関数式です。

即時関数は定義すると即時に実行されます。

このため、即時関数とよばれます。

即時関数を利用することで、関数を定義するだけで即実行する事ができます。

また、ブロック内からのホイスト回避や、グローバルスコープ名の汚染回避などが可能となります。

ブロックとは、JavaScriptで0個以上の文をグループ化するために利用される、{}で囲まれた部分を意味します。

ホイストとは、関数の最初に関数内ローカル変数が宣言されることです。

ローカル変数とは、関数内で宣言され、宣言された関数全体で利用されます。

グローバルスコープ名とは、グローバルスコープで宣言される変数や関数です。

グローバルスコープとは、変数や関数をJavaScriptプログラムのどこからでも利用することができるという範囲を意味しています。

例えば、グローバル変数とは、関数外で宣言され、関数内外で利用可能です。

グローバル変数は、グローバルスコープで宣言された変数ですので、JavaScriptプログラムのどこからでも利用することができます。

 

即時関数の例

varで宣言して変数に格納することもせずに、functionからはじまる関数定義そのものを(  )でくくって、即実行するということができるようになります。

すると、関数呼び出しといったまどろっこしいことをせずに済みます。

<script>
  var sum = (function (a,b){
    var result = a + b;
    return result;
  })(1,2);
  console.log(sum);
</script>

 

実際に関数を定義したものに、すぐに引数を与えて実行しています。

これまでは関数sumを変数answerに代入し、引数を渡していました。それが、変数answerに入れることも省略して、

定義した関数に直に引数を渡し、内容を実行することができるようになったということです。

さきのようにvar answer = sum(1,2);を使って関数を呼び出す必要もなくなりますので、プログラムが非常にスッキリしますね。

 

このように一箇所しか使わない定義に関しては即時関数を使ってシンプルに書くことができます。

結果も「3」で変わりませんね。

3

 

 

JavaScriptで即時関数を使う方法は以上です。

JavaScriptをさらに勉強したい場合は、JavaScriptで配列を使う方法も合わせてご覧ください。

また、入門向けのJavaScriptの学習サイトも紹介しているので、合わせてご覧ください。

 

大石ゆかり

関数を書いて、即実行できるんですねー。少し急ぎ過ぎの感じもしますけど。

田島悠介

最初のうちは、こういうことも出来るって覚えておくだけでいいね。一度しか使わないような関数は、そのまま即時関数として書いてもいいね。

大石ゆかり

そうですね。

 

[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。