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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

監修してくれたメンター

高田 悠

JavaScriptを用いた実装などフロントエンド領域の開発が得意。Web上での3D表現に興味がありWebARの実装案件を複数経験。ワークライフバランスを重視してフリーランス生活を送っている。

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

今回は、JavaScriptで即時関数を使う方法について、テックアカデミーのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

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

目次

1時間でできる無料体験!

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

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

 

注意書き

本記事で解説されている「無名関数」「即時関数」という概念は、現在のJavaScript開発においてはあまり意識されなくなりました。

もともと即時関数はグローバル汚染といって、むやみにグローバル変数を増やさないための方法の1つでもありました。

アロー関数という関数の記述法や、constやletといった宣言法が新たに生まれた今、即時関数をあまり意識せずとも安全なコードが書けるようになっているのです。

参考:JavaScriptのアロー関数の使い方を現役エンジニアが解説【初心者向け】

参考 :  JavaScriptで書く「var,let,const」の違いと使い分け方法

 

とはいえ、教養として「無名関数」「即時関数」を学んでおくと、今まで気づかなかったJavaScriptの仕組みが見えてくるかもしれません。

上記の注意書きを踏まえた上で、ぜひ記事を閲覧してみてください。

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

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

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

 

関数とは

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

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

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

 

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

function 関数名( ) {
  処理
}

 

大石ゆかり

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

田島悠介

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

大石ゆかり

名前がない関数も書くことができるんですか?

 

[PR] フロントエンドで副業する学習方法を動画で公開中

無名関数とは

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

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

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

高階関数では、引数になる関数が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”);}());

大石ゆかり

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

 

コラム

実は私も!?独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料相談 に参加してみませんか?

現役エンジニア・デザイナーに何でも気軽に相談できる30分すべて無料で できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き! 無料相談はこちら

即時関数とは

即時関数は、英語で 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);を使って関数を呼び出す必要もなくなりますので、プログラムが非常にスッキリしますね。

 

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

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

3

 

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

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

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

そうですね。

 

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか?

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします!

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料相談を予約する