JavaScriptで即時関数を使う方法【初心者向け】
プログラミング初心者向けに、JavaScriptで【即時関数を使う方法】を解説した記事です。関数とは、関数とは、処理に名前をつけてまとめたものです。無名関数とは、関数名のない関数です。即時関数は、即時実行関数式です。サンプルコードもあり。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptをプログラミング初心者向けに紹介した記事です。
今回は、JavaScriptで即時関数を使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発できます。
目次
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
注意書き
本記事で解説されている「無名関数」「即時関数」という概念は、現在のJavaScript開発においてはあまり意識されなくなりました。
もともと即時関数はグローバル汚染といって、むやみにグローバル変数を増やさないための方法の1つでもありました。
アロー関数という関数の記述法や、constやletといった宣言法が新たに生まれた今、即時関数をあまり意識せずとも安全なコードが書けるようになっているのです。
参考：JavaScriptのアロー関数の使い方を現役エンジニアが解説【初心者向け】
参考 : JavaScriptで書く「var,let,const」の違いと使い分け方法
とはいえ、教養として「無名関数」「即時関数」を学んでおくと、今まで気づかなかったJavaScriptの仕組みが見えてくるかもしれません。
上記の注意書きを踏まえた上で、ぜひ記事を閲覧してみてください。
関数とは、処理に名前をつけてまとめたものです。
無名関数とは、関数名のない関数です。
即時関数は、英語で IIFE (Immediately Invoked Function Expression）と呼ばれる即時実行関数式です。
関数とは
関数とは、処理に名前をつけてまとめたものです。
これにより、他の場所から関数を呼び出して使用できます。
つまり、何度も利用する処理の場合、呼び出すだけで簡単に利用できます。
fonctionを使い、次のように定義します。
function 関数名( ) {
処理
}
関数は名前を付けて処理を定義するものですよね？functionで定義すると後ろのほうに書いても、前で使えるんでしたっけ？
その通り！ただ、JavaScriptの関数には名前をつけないで書くことができる無名関数というのもあるんだよね。
名前がない関数も書くことができるんですか？
無名関数とは
無名関数とは、その名の通り関数名なしに関数を定義できるものです。
無名関数を利用することは、高階関数を利用する際にコードがシンプルになるというメリットにもつながります。
高階関数とは、関数自体を引数や戻り値として扱うことができる関数のことをいいます。
高階関数では、引数になる関数が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」が出力されますね。
無名関数
次は、同じプログラムを無名関数で書いてみます。
<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を入れて呼び出しました。
それに対し無名関数では、変数に関数の定義そのものを = で直接入れることができるようになります。
このように、変数に関数定義そのものを格納できるというのが、無名関数のメリットでもあります。
結果も同じです。
無名といっても変数に関数を代入した場合は、再度使えますね。
本当に名前なしでも書けるんだよね。例えば、こんな感じで。(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);を使って関数を呼び出す必要もなくなりますので、プログラムが非常にスッキリしますね。
このように1ケ所しか使わない定義に関しては即時関数を使ってシンプルに書くことができます。
結果も「3」で変わりませんね。
JavaScriptで即時関数を使う方法は以上です。
JavaScriptをさらに勉強したい場合は、JavaScriptで配列を使う方法もあわせてご覧ください。
また、入門向けのJavaScriptの学習サイトも紹介しているので、あわせてご覧ください。
関数を書いて、即実行できるんですねー。少し急ぎ過ぎの感じもしますけど。
最初のうちは、こういうこともできるって覚えておくだけでいいね。一度しか使わないような関数は、そのまま即時関数として書いてもいいね。
そうですね。
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
