2017.01.14: 追記

以下の2リンクを読んでようやくしっかり理解できた(気がする)
(function(){})() と function(){}() - IT戦記
知ってて当然?初級者のためのJavaScriptで使う即時関数(function(){...})()の全て - 三等兵
これ読むまでは「誰かが書いたコード」を参考に「一部を書き直し」レベルのコトしか出来なかったけど、ようやく即時関数・無名関数を自分でイチから作れるようになった。

# 私はごくたまにしかJavascriptのお勉強をしないのだけど、このページ初出時から7年もたっているのか・・・・(^_^;

追記おわり。
以下、初出時の文章。


 

アチコチのサイトのソースを覗き見しまくって、『(function (){hoge;hoge;})();』みたいな関数定義がしてあるjavascriptを色々な所で発見。なにこれ?

序文:function

私の知っているfunctionの使い方は二つ。

  • function aaar() {hoge;hoge;}  
  • var bbb = function(c, d, d) {hoge;hoge;}

みたいな感じで 変数に関数を定義して後から呼び出す方法。
しかしこの『(function (){hoge;hoge;})();』ってのは、、、

  1. なんで変数を定義しないの?
  2. なんでコレで作動するの?
  3. ドコで呼び出しているの?
  4. 前と後ろ、二つ()があるのは何なの?

いやもう、謎だらけ。
私はjavascriptに関してはかなりの素人です。

サイト内のアチコチに自作javascriptを書いたりしてますが、その全てが「他所のサイトで利用されているモノ」、「Tipサイトで紹介されているモノ」、「フリーで配布しているモノ」を組み合わせて殆ど山勘で「多分ココを弄れば自分の好みに変わるだろう」とカスタマイズしたものばかりです。

今回は何がどうなっているのかサッパリ解らず、マネしてみたいものの、完全にお手上げ状態でした。

プログラムの正体は「無名関数」、そして「クロージャ」

上記の様な変数定義をしていない関数を、無名関数と呼び、「関数の中で利用する関数」として使うんだそうです。

で、さらに「関数の中で使う」「クロージャ」ってモノがあるらしいです。
(↑これ後日訂正した文章。当初このページは、無名関数とクロージャをかなり混同して記載していました。クロージャについては、この下で紹介しているリンクを参照のこと)

関数の名前さえ解ってしまえば後は何とかなります(^_^;

ほぼ素人でもよく解る解説サイト

[JavaScript] 猿でもわかるクロージャ超入門 1 問題 - DQNEO起業日記
6ページに渡って、凄く丁寧に解説されてます。
ここを読むとクロージャの仕組みや作り方が解るだけでなく「なぜクロージャが便利なのか」まで解りました。クロージャを使った関数は、複数回呼び出したときに、以前の状態を保持しているんですね。

で、無名関数を使わなくても、関数内で別の関数を定義すればこの「状態の保持」は出来るみたい。なるほどなるほど。

上記が解った上で、以下のサイト
(function(){})() と function(){}() - IT戦記
これを読むと「なんで前後に()をくっつけているか」が解って来る。

で、さらに
第ニ章 JavaScript関数の基本を知る
恐らく基本中の基本が書いてあるんだろうけど、ようやく内容が理解できるようになって来た。

あとがき

今まで「オブジェクト指向」って言葉の意味とか、「何が便利なのか」とか、サッパリ解らなかったけど、今日ようやくその一部が理解できた感じ。

 JavaScriptの知識がレベルアップしてきたぞぉ。