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”);}());
ちゃんと実行されてますね。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
即時関数とは
即時関数は、英語で 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サービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
