\r\n\r\n関数の呼び出しは、sum(1,2);ように、関数名();とすれば呼び出し実行ができる。\r\n上記であれば、console.log(answer);でインスペクタのコンソールログに表記と、関数の呼び出し変数anwerを両方いっぺんに行っている。\r\n\r\n\r\n*無名関数 1回きりしか使わない関数\r\n特徴\r\n・変数に関数の定義そのものを = で直接入れることができる。変数の中で関数の定義作業を行える。\r\n・定義した関数はスコープ外で、呼び出しをしなくても、即時実行できる。\r\n・変数に名前をつける必要がない。\r\n・即時関数は無名関数の一種\r\n・名前がないので何度も使いまわす事ができない。\r\n\r\n例 関数名がない\r\n\r\n\r\n\r\n*即時関数 関数定義と関数呼び出しをセットにしたもの\r\n\r\n特徴\r\n・変数に関数の定義そのものを = で直接入れることができる。変数の中で関数の定義作業を行える。\r\n・定義した関数はスコープ外で、呼び出しをしなくても、即時実行できる。\r\n・変数に名前をつける必要がない。\r\n・即時関数は無名関数の一種\r\n・名前がないので何度も使いまわす事ができない。\r\n・無名関数と違い(function()のようにfunction自体を()で囲む。})の後に引数がある。\r\n\r\n例 \r\n","answerCount":3,"upvoteCount":0,"datePublished":"2016-12-22T07:15:21.391Z","dateModified":"2016-12-22T07:15:21.391Z","acceptedAnswer":{"@type":"Answer","text":"基本\r\n---\r\n関数宣言\r\nfunction 関数名(){ }\r\n\r\n実行するには\r\n関数名();\r\n\r\n関数は変数に入れれる\r\nvar 変数 = function 関数名(){};\r\n\r\n変数にいれた関数を実行する\r\n変数();\r\n\r\n\r\n即時関数\r\n---\r\n関数宣言と同時に実行させるテクニックの事\r\n\r\n( function 関数名(){} )();\r\nこう書くだけ。\r\n※書き方はこれだけではないですが、この書き方が一般的なのでこの形を覚えるだけでよいです。\r\n\r\n即時関数を使う理由は、関数宣言後に即実行する場合、纏めてかけるため可読性がよいという点です。\r\n\r\n```Javascript\r\nfunction hoge(){\r\n :\r\n}\r\n\r\nhoge();\r\n```\r\n\r\n宣言と実行がバラバラなのを\r\n\r\n```Javascript\r\n(function hoge(){\r\n :\r\n}();\r\n```\r\n\r\nこのようにまとめて記述でき可読性があがります。\r\nただのテクニックなので無くても困らない。\r\n\r\n無名関数\r\n---\r\n\r\n関数名を省略したものを、関数名が無いので無名関数といっているだけです。\r\n\r\n即時関数や関数を変数にいれて実行する場合など、関数名無くても問題ない時に使います。\r\n\r\n```Javascript\r\n// 即時関数の例(関数名あり)\r\n(function hoge(){\r\n :\r\n})();\r\n\r\n// 即時関数の例(無名関数)\r\n(function(){\r\n :\r\n})();\r\n```\r\n\r\nとか\r\n\r\n```Javascript\r\n// 引数valに関数をもらって実行\r\nfunction xxxx(val){\r\n val(); \r\n}\r\n\r\n// xxxx関数の引数に関数を渡す(関数名あり)\r\nxxxx(function hoge(){\r\n :\r\n});\r\n\r\n// xxxx関数の引数に関数を渡す(無名関数)\r\nxxxx(function(){\r\n :\r\n});\r\n```\r\n---\r\n追記\r\n\r\n無名関数 1回きりしか使わない関数なの?\r\n---\r\n> 引用テキスト無名関数の呼び出しは関数名でできないので、関数自体を変数に入れて変数名で呼び出すか、 即時関数にして呼び出さないといけない。\r\n\r\nご自身で記載している上記通りで、変数に入れておけばその変数で何度でも呼び出せます。\r\n\r\n var answer = sum(1,2);のansertの中身は何?\r\n---\r\n sum(1,2)の形をみてください。\r\nこれは私が記載した関数を実行する形です。\r\nよって、answerには関数sumの実行結果(return)が入ります。\r\n\r\n即時関数は無名関数の一種ではないの?\r\n---\r\n即時関数と無名関数に何ら関わりはありません。\r\nもう一度記載しますが、\r\n即時関数とは、関数宣言と同時に関数を実行するテクニックであり\r\n無名関数とは、関数名を定義しない事です。\r\n\r\nただ、即時関数は関数の宣言と同時に即実行するので関数名を定義しない事がおおいので\r\nその事をいっているものと思いますが、即時関数と無名関数に関わりはありません。\r\n\r\n即時関数とは関数を()で囲んで)の後に引数を指定すれば即時関数?\r\n---\r\n```Javascript\r\n(function(){})(引数)\r\n```\r\n基本そうです。\r\n\r\n少し難しい話なので、最初の回答ではあえて記載しませんでしたが、\r\njavascriptにはfunction文(以下**文**)とfunction式(以下**式**)があります。\r\nfunction 関数名(){} このような関数宣言は**文**となります。\r\n\r\n**文**の特徴は関数の巻上げが行われます。\r\n関数の巻上げとは、どこで宣言してもその宣言を先頭で宣言したものとして扱います\r\nですので、このように関数宣言より前にその関数を実行しても問題なく実行できます\r\n\r\n```Javascript \r\nhoge();\r\n\r\nfunction hoge(){\r\n}\r\n```\r\n\r\nでは、関数文を即時関数にするために関数宣言の後に()で呼び出して見るとどうなるか\r\n\r\n```Javascript\r\nvar a;\r\n\r\na = 1;\r\n\r\nfunction hoge(){\r\n} (); // ここで即時関数にしようとして、関数宣言の後に()を付けて呼び出す\r\n```\r\n\r\nこれだけではJavascriptはhoge関数を文として認識するため\r\n関数の巻上げが起こり、以下と同等の扱いになり、()が意味不明なものになります\r\n\r\n```Javascript\r\nfunction hoge(){ // 関数の巻上げで先頭で宣言されたものとされる\r\n}\r\n\r\nvar a;\r\n\r\na = 1;\r\n\r\n(); // ()だけ残り意味不明な状態となる\r\n```\r\n\r\nその為、関数の巻き上げが行われない**式**として認識させる必要があります。\r\n\r\nその方法の一つが関数宣言を()で囲むことです。\r\n(function() {})\r\nこれでこの関数を式として認識するので、実行させるため最後に()をつけて実行します。\r\n(function() {})();\r\n\r\n式として認識させる方法は()で囲む他色々ありますが。\r\n人が見て一番分りやすい形が()で囲む方法なので、この形が使われています。\r\n\r\n余談ですが、uglifyなんかすると()だと2文字使用するので!が使われる事が多いです\r\n!function(){}()","dateModified":"2016-12-23T07:10:15.665Z","datePublished":"2016-12-22T13:36:25.599Z","upvoteCount":1,"url":"https://teratail.com/questions/59737#reply-95108"},"suggestedAnswer":[{"@type":"Answer","text":"横やりになってしまいますが代わりに続きを説明します。\r\n\r\nまず「即時関数」という言葉の定義ですが、私は「関数を定義と同時に実行すること」と解釈しています。ですので「即時関数」自体は関数ではありません。\r\n\r\n即時関数で使う関数を囲う「()」は、関数定義文と区別をする目的で付加します。区別すればいいので「()」でなくともよいのです。\r\n\r\n例えば\r\n`(function (){console.log(\"!\")})();`は\r\nこうでも構いません。\r\n`!function (){console.log(\"!\")}();`\r\n`+function (){console.log(\"!\")}();`\r\n`-function (){console.log(\"!\")}();`\r\n`~function (){console.log(\"!\")}();`\r\n\r\n\r\n即時関数の中で使用する関数は、無名関数である必要はありませんし、何度も使いまわすことも可能です。こんな書き方をすることはまずありませんが、JavaScriptの仕様として以下のようにも書けます。\r\n`(s = function x(){console.log(\"!\")})()`\r\n\r\n「x」という名前の関数を変数「s」に代入して、即時実行しています。ですので即時関数と言えます。ですが、あとで「s()」を実行して使いまわすこともできます。また「a.name」で関数の名前を確認すると、「x」であることが確認できます。\r\n\r\nつまり、即時関数はの中身の関数は無名関数である必要はありませんし、あとで使いまわすこともできるのです。\r\n\r\n\r\nhttps://techacademy.jp/magazine/5530\r\nの記事は残念ながら理解の浅い人が書いた文章なのだと思います。明らかに間違っています。\r\n\r\nそんなどこのだれが書いたかわからないような情報はあまり信用せず、オライリーのJavaScriptかEffective JavaScriptなど信頼のできる書籍で勉強をした方がいいですよ。\r\n\r\nそしてJavaScriptの仕様のこういう細かく深い部分は広範囲にわたります。きちんと勉強する前に、とりあえずわからないところを1つ1つ質問していても理解するのに何年もかかると思います。\r\n\r\nオライリーのJavaScriptかEffective JavaScriptなどを最低一度、できれば3回程度繰り返し読み、そのうえで分からない部分を質問するようにした方がいいと思いますよ。","dateModified":"2016-12-23T02:23:35.752Z","datePublished":"2016-12-23T02:23:35.752Z","upvoteCount":2,"url":"https://teratail.com/questions/59737#reply-95159","comment":[{"@type":"Comment","text":">>>\r\nまず「即時関数」という言葉の定義ですが、私は「関数を定義と同時に実行すること」と解釈しています。ですので「即時関数」自体は関数ではありません。\r\n\r\n即時関数で使う関数を囲う「()」は、関数定義文と区別をする目的で付加します。区別すればいいので「()」でなくともよいのです。\r\n\r\n例えば\r\n(function (){console.log(\"!\")})();は\r\nこうでも構いません。\r\n!function (){console.log(\"!\")}();\r\n+function (){console.log(\"!\")}();\r\n-function (){console.log(\"!\")}();\r\n~function (){console.log(\"!\")}();\r\n\r\n即時関数の中で使用する関数は、無名関数である必要はありませんし、何度も使いまわすことも可能です。こんな書き方をすることはまずありませんが、JavaScriptの仕様として以下のようにも書けます。\r\n(s = function x(){console.log(\"!\")})() \r\n\r\n\r\n即時関数で(function())とするのは、これは即時関数だよと人間に伝えるためにわざとつけるものなのですね。\r\nしかも必須ではなくつけたくなればつけなくても良いのですね。\r\nちなみに省略したソースを即時関数と見分けるには、(function (){console.log(\"!\")})();\r\n();と引数を関数に渡す部分か必ずあるという部分でしょうか?\r\n\r\n即時でない関数や無名は確かに最後に関数に渡す引数がないですよね。\r\nスコープ外で、関数名();としてここで引数を渡していますね。\r\nこれをいっぺんにやっているのですね。\r\n\r\nhttp://wp-p.info/tpl_rep.php?cat=js-biginner&fl=r14\r\nのようなサイトも間違いが多いのですかね。\r\n\r\nオライリーはいつか読みたいですが難しすぎて、基礎がわからないと読めなくないですか?","datePublished":"2016-12-23T02:58:28.473Z","dateModified":"2016-12-23T02:58:28.473Z"}]},{"@type":"Answer","text":"##### 下記の認識で間違っているところがあれば教えてください。\r\n> ・変数に関数の定義そのものを = で直接入れることができない。変数の中で関数の定義作業を行えない。 \r\n\r\n微妙です。たとえば、\r\n```javascript\r\nvar func = function notFunc(){};\r\n```\r\nこれはエラーにならない。なぜなら関数定義ではなくて関数式になっているから。\r\n\r\n> 上記であれば、console.log(answer);でインスペクタのコンソールログに表記と、関数の呼び出し変数anwerを両方いっぺんに行っている。 \r\n\r\n間違いです。そのコードではanswerには3が入っていますので、コンソールに表示してるだけ。\r\n\r\n> 無名関数 1回きりしか使わない関数 \r\n\r\n間違いでは。\r\n\r\n> ・名前がないので何度も使いまわす事ができない。\r\n\r\n間違いだと思う。\r\n\r\n> 即時関数は無名関数の一種 \r\n\r\n名前のある関数も即時実行できるので間違いかと。\r\n```javascript\r\nvoid function Func(){}();\r\n```\r\n\r\n> ・無名関数と違い(function()のようにfunction自体を()で囲む。})の後に引数がある。 \r\n\r\n間違いとは言えないですが、かっこは必須ではないので、微妙です。","dateModified":"2016-12-22T08:02:08.807Z","datePublished":"2016-12-22T08:02:08.807Z","upvoteCount":2,"url":"https://teratail.com/questions/59737#reply-95064","comment":[{"@type":"Comment","text":"ありがとうございます。難しいですね。初心者にもわかるように解説してくれるとありがたいのでお願いします。\r\n\r\n\r\n>>>\r\n無名関数 1回きりしか使わない関数 \r\n間違いでは。 \r\n\r\n何度も使うこともあるのですか?\r\nそれだと名前のある関数と何が違うのでしょうか?\r\nただ関数に名前を付けるのが面倒な時に使うだけなのでしょうか?\r\n\r\n\r\n>>>\r\n ・名前がないので何度も使いまわす事ができない。\r\n\r\n名前がないのに、どのように指定するのでしょうか?\r\n使いまわせるなら、名前のある関数とどう違うのですか? \r\n\r\n\r\n>>>\r\nこれはエラーにならない。なぜなら関数定義ではなくて関数式になっているから。 \r\n\r\nこれは初心者の私には、難しくてよくわからない式ですが、\r\n変数の中で名前のある関数の定義はできないが、関数式は入れられるということですかね。\r\n\r\n\r\n\r\n>>>\r\n上記であれば、console.log(answer);でインスペクタのコンソールログに表記と、関数の呼び出し変数anwerを両方いっぺんに行っている。\r\n間違いです。そのコードではanswerには3が入っていますので、コンソールに表示してるだけ。 \r\n\r\nするとどこで呼び出しているのでしょうか?\r\nvar answer = sum(1,2);\r\nで、sum関数へ値を渡すことと、関数の呼び出しを両方行っているということでしょうか?\r\n\r\n\r\n>>>\r\n即時関数は無名関数の一種 \r\n名前のある関数も即時実行できるので間違いかと。 \r\n\r\nhttps://techacademy.jp/magazine/5530\r\nこちらにそのように記載があったのですがこちらも間違えているのですか?\r\n\r\n\r\n>>>\r\n間違いでは。\r\n名前がないので何度も使いまわす事ができない。\r\n\r\nこちらは無名、即時関数のことですね。\r\nこれは確かに記載ミスをしました。\r\n無名、即時関数は、名前がないので何度も使うことができない。一度しか使えない。\r\nということですね。\r\n\r\n\r\n>>>\r\n・無名関数と違い(function()のようにfunction自体を()で囲む。})の後に引数がある。 \r\n間違いとは言えないですが、かっこは必須ではないので、微妙です。 \r\n\r\n(function()をfunction()と記載しても即時関数になるのですか?\r\n\r\n下記のようにできるのですか?\r\n \r\n\r\nもしそうであればどのように区別すればよいのでしょうか?\r\n}(1,2);//この時点ですでに実行している。ここに引数を記載できる。\r\nで判断するしかないのですか?","datePublished":"2016-12-22T09:12:25.426Z","dateModified":"2016-12-22T09:12:25.426Z"},{"@type":"Comment","text":"※細かい用語の間違いには目をつぶってくださいね。\r\n\r\n関数定義には、2種類あります。\r\n・関数定義文\r\n・関数式\r\n\r\nfunctionから始まる文は関数定義文で、それ以外の文字から始まりfunctionが含まれているものが関数式です。\r\n\r\nつまり、\r\nfunction func(){}\r\n以上は関数定義文\r\nvar x = function func(){}\r\n(function func(){})\r\nvoid function func(){}\r\n~function func(){}\r\n以上は全部関数式です。\r\n\r\n次のような特徴があります。\r\n・即時実行できるのは関数式だけ\r\n・無名にできるのは関数式だけ\r\n・代入できるのは関数式だけ\r\n\r\nつまり、webpageさんは以下のものを混同しています。\r\n・名前のある関数定義文\r\n・名前のある関数式\r\n\r\nそして、以下の勘違いをしています。\r\n・即時実行できるのは無名の関数式だけ(実際には名前のある関数式も即時実行できます)\r\n\r\n以上、コメントを受けての補足でした。","datePublished":"2016-12-22T09:35:31.401Z","dateModified":"2016-12-22T09:35:31.401Z"},{"@type":"Comment","text":"あ、間違えていたのは私の方かもしれないです。\r\nもしかして名前のある関数式は無名関数なのかな? 他の回答者の見解をお待ちください。","datePublished":"2016-12-22T09:52:11.903Z","dateModified":"2016-12-22T09:52:11.903Z"},{"@type":"Comment","text":"ありがとうございます。\r\nfunction func(){}のfuncはfunctionの略でしょうか?\r\n初めて見ました。\r\nちょっと初心者には難しいですね。\r\n\r\n関数定義文はググってもあまり情報がありません。\r\n下記にも大した解説がないですね。\r\nhttp://wp-p.info/tpl_rep.php?cat=js-intermediate&fl=r10","datePublished":"2016-12-22T12:11:23.926Z","dateModified":"2016-12-22T12:11:23.926Z"},{"@type":"Comment","text":"http://wp-p.info/tpl_rep.php?cat=js-biginner&fl=r14\r\nに\r\nJavaScriptでの関数定義は『function文』で定義する以外の方法として『関数式』(関数定義式)というものがあります。こちらは変数に関数オブジェクトを代入するという方法です。\r\n\r\n『function文』\r\n\r\n\t1. function 関数名(引数1, 引数2, 引数3){\r\n\t2. // ここに処理\r\n\t3. }\r\n\r\n\r\n『関数式』\r\n\r\n\t1. var fn = function(){\r\n\t2. // ここに処理\r\n\t3. };\r\n\r\nのように記載があります。","datePublished":"2016-12-22T12:37:15.967Z","dateModified":"2016-12-22T12:37:15.967Z"}]}],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"トップ","url":"https://teratail.com"},{"@type":"ListItem","position":2,"name":"JavaScriptに関する質問","url":"https://teratail.com/tags/JavaScript"},{"@type":"ListItem","position":3,"name":"JavaScript","url":"https://teratail.com/tags/JavaScript"}]}}}
質問するログイン新規登録
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

2514閲覧

JSの関数について教えてください。

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2016/12/22 07:15

0

1

疑問
即時関数は、即時実行できるが、結局関数は、下記例だとどこで実行している?
return result;は返り値として、関数の処理結果を変数resultに渡す、教えるということ?
即時関数と無名関数の違い(function()のようにfunction自体を()で囲まない、})の後に引数がある。のみ?いまいち違いが判らない。

下記の認識で間違っているところがあれば教えてください。

*関数 名前をつけて何度も使いまわす場合に選択する。
関数とは同じ処理を定義し、何度も使い回しができるかたちにしたもの

特徴
・変数に関数の定義そのものを = で直接入れることができない。変数の中で関数の定義作業を行えない。
・定義した関数はスコープ外で、呼び出しをしないと実行できない。
・変数に名前を付けないといけない。

<script> function sum(a,b){ var result = a + b; return result; } var answer = sum(1,2);//引数をスコープの外に記載し、わざわざ関数SUMに引数を渡さないといけない console.log(answer);//定義した関数の呼び出しをしないと定義した関数が実行できない。 </script>

関数の呼び出しは、sum(1,2);ように、関数名();とすれば呼び出し実行ができる。
上記であれば、console.log(answer);でインスペクタのコンソールログに表記と、関数の呼び出し変数anwerを両方いっぺんに行っている。

*無名関数 1回きりしか使わない関数
特徴
・変数に関数の定義そのものを = で直接入れることができる。変数の中で関数の定義作業を行える。
・定義した関数はスコープ外で、呼び出しをしなくても、即時実行できる。
・変数に名前をつける必要がない。
・即時関数は無名関数の一種
・名前がないので何度も使いまわす事ができない。

例 関数名がない

<script> var sum = function (a,b){//変数に関数の定義そのものを = で直接入れることができる。ここに関数名SUMがない。 var result = a + b; return result; } var answer = sum(1,2);//引数をスコープの外に記載し、変数に引数を渡している。関数SUMに引数を渡している名前のある関数とは違う。 console.log(answcer); </script>

*即時関数 関数定義と関数呼び出しをセットにしたもの

特徴
・変数に関数の定義そのものを = で直接入れることができる。変数の中で関数の定義作業を行える。
・定義した関数はスコープ外で、呼び出しをしなくても、即時実行できる。
・変数に名前をつける必要がない。
・即時関数は無名関数の一種
・名前がないので何度も使いまわす事ができない。
・無名関数と違い(function()のようにfunction自体を()で囲む。})の後に引数がある。

<script> var sum = (function (a,b){//変数に関数の定義そのものを = で直接入れることができる。ここに関数名がない。 var result = a + b; return result;//ここで変数を呼び出している? })(1,2);//この時点ですでに実行している。ここに引数を記載できる。 console.log(sum);//これは実行ではなくコンソールに表記しているだけ。 //var answer = sum(1,2);という定義した関数の呼び出しが、ここに、上記二つはあるがこちらはない。 </script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

横やりになってしまいますが代わりに続きを説明します。

まず「即時関数」という言葉の定義ですが、私は「関数を定義と同時に実行すること」と解釈しています。ですので「即時関数」自体は関数ではありません。

即時関数で使う関数を囲う「()」は、関数定義文と区別をする目的で付加します。区別すればいいので「()」でなくともよいのです。

例えば
(function (){console.log("!")})();
こうでも構いません。
!function (){console.log("!")}();
+function (){console.log("!")}();
-function (){console.log("!")}();
~function (){console.log("!")}();

即時関数の中で使用する関数は、無名関数である必要はありませんし、何度も使いまわすことも可能です。こんな書き方をすることはまずありませんが、JavaScriptの仕様として以下のようにも書けます。
(s = function x(){console.log("!")})()

「x」という名前の関数を変数「s」に代入して、即時実行しています。ですので即時関数と言えます。ですが、あとで「s()」を実行して使いまわすこともできます。また「a.name」で関数の名前を確認すると、「x」であることが確認できます。

つまり、即時関数はの中身の関数は無名関数である必要はありませんし、あとで使いまわすこともできるのです。

https://techacademy.jp/magazine/5530
の記事は残念ながら理解の浅い人が書いた文章なのだと思います。明らかに間違っています。

そんなどこのだれが書いたかわからないような情報はあまり信用せず、オライリーのJavaScriptかEffective JavaScriptなど信頼のできる書籍で勉強をした方がいいですよ。

そしてJavaScriptの仕様のこういう細かく深い部分は広範囲にわたります。きちんと勉強する前に、とりあえずわからないところを1つ1つ質問していても理解するのに何年もかかると思います。

オライリーのJavaScriptかEffective JavaScriptなどを最低一度、できれば3回程度繰り返し読み、そのうえで分からない部分を質問するようにした方がいいと思いますよ。

投稿2016/12/23 02:23

miu_ras

総合スコア902

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/12/23 02:58

>>> まず「即時関数」という言葉の定義ですが、私は「関数を定義と同時に実行すること」と解釈しています。ですので「即時関数」自体は関数ではありません。 即時関数で使う関数を囲う「()」は、関数定義文と区別をする目的で付加します。区別すればいいので「()」でなくともよいのです。 例えば (function (){console.log("!")})();は こうでも構いません。 !function (){console.log("!")}(); +function (){console.log("!")}(); -function (){console.log("!")}(); ~function (){console.log("!")}(); 即時関数の中で使用する関数は、無名関数である必要はありませんし、何度も使いまわすことも可能です。こんな書き方をすることはまずありませんが、JavaScriptの仕様として以下のようにも書けます。 (s = function x(){console.log("!")})() 即時関数で(function())とするのは、これは即時関数だよと人間に伝えるためにわざとつけるものなのですね。 しかも必須ではなくつけたくなればつけなくても良いのですね。 ちなみに省略したソースを即時関数と見分けるには、(function (){console.log("!")})(); ();と引数を関数に渡す部分か必ずあるという部分でしょうか? 即時でない関数や無名は確かに最後に関数に渡す引数がないですよね。 スコープ外で、関数名();としてここで引数を渡していますね。 これをいっぺんにやっているのですね。 http://wp-p.info/tpl_rep.php?cat=js-biginner&fl=r14 のようなサイトも間違いが多いのですかね。 オライリーはいつか読みたいですが難しすぎて、基礎がわからないと読めなくないですか?
guest

0

下記の認識で間違っているところがあれば教えてください。

・変数に関数の定義そのものを = で直接入れることができない。変数の中で関数の定義作業を行えない。

微妙です。たとえば、

javascript

1var func = function notFunc(){};

これはエラーにならない。なぜなら関数定義ではなくて関数式になっているから。

上記であれば、console.log(answer);でインスペクタのコンソールログに表記と、関数の呼び出し変数anwerを両方いっぺんに行っている。

間違いです。そのコードではanswerには3が入っていますので、コンソールに表示してるだけ。

無名関数 1回きりしか使わない関数

間違いでは。

・名前がないので何度も使いまわす事ができない。

間違いだと思う。

即時関数は無名関数の一種

名前のある関数も即時実行できるので間違いかと。

javascript

1void function Func(){}();

・無名関数と違い(function()のようにfunction自体を()で囲む。})の後に引数がある。

間違いとは言えないですが、かっこは必須ではないので、微妙です。

投稿2016/12/22 08:02

Lhankor_Mhy

総合スコア37634

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/12/22 09:12

ありがとうございます。難しいですね。初心者にもわかるように解説してくれるとありがたいのでお願いします。 >>> 無名関数 1回きりしか使わない関数 間違いでは。 何度も使うこともあるのですか? それだと名前のある関数と何が違うのでしょうか? ただ関数に名前を付けるのが面倒な時に使うだけなのでしょうか? >>> ・名前がないので何度も使いまわす事ができない。 名前がないのに、どのように指定するのでしょうか? 使いまわせるなら、名前のある関数とどう違うのですか? >>> これはエラーにならない。なぜなら関数定義ではなくて関数式になっているから。 これは初心者の私には、難しくてよくわからない式ですが、 変数の中で名前のある関数の定義はできないが、関数式は入れられるということですかね。 >>> 上記であれば、console.log(answer);でインスペクタのコンソールログに表記と、関数の呼び出し変数anwerを両方いっぺんに行っている。 間違いです。そのコードではanswerには3が入っていますので、コンソールに表示してるだけ。 するとどこで呼び出しているのでしょうか? var answer = sum(1,2); で、sum関数へ値を渡すことと、関数の呼び出しを両方行っているということでしょうか? >>> 即時関数は無名関数の一種 名前のある関数も即時実行できるので間違いかと。 https://techacademy.jp/magazine/5530 こちらにそのように記載があったのですがこちらも間違えているのですか? >>> 間違いでは。 名前がないので何度も使いまわす事ができない。 こちらは無名、即時関数のことですね。 これは確かに記載ミスをしました。 無名、即時関数は、名前がないので何度も使うことができない。一度しか使えない。 ということですね。 >>> ・無名関数と違い(function()のようにfunction自体を()で囲む。})の後に引数がある。 間違いとは言えないですが、かっこは必須ではないので、微妙です。 (function()をfunction()と記載しても即時関数になるのですか? 下記のようにできるのですか? <script> var sum = function (a,b){//変数に関数の定義そのものを = で直接入れることができる。ここに関数名がない。 var result = a + b; return result;//ここで変数を呼び出している? }(1,2);//この時点ですでに実行している。ここに引数を記載できる。 console.log(sum);//これは実行ではなくコンソールに表記しているだけ。 //var answer = sum(1,2);という定義した関数の呼び出しが、ここに、上記二つはあるがこちらはない。 </script> もしそうであればどのように区別すればよいのでしょうか? }(1,2);//この時点ですでに実行している。ここに引数を記載できる。 で判断するしかないのですか?
Lhankor_Mhy

2016/12/22 09:35

※細かい用語の間違いには目をつぶってくださいね。 関数定義には、2種類あります。 ・関数定義文 ・関数式 functionから始まる文は関数定義文で、それ以外の文字から始まりfunctionが含まれているものが関数式です。 つまり、 function func(){} 以上は関数定義文 var x = function func(){} (function func(){}) void function func(){} ~function func(){} 以上は全部関数式です。 次のような特徴があります。 ・即時実行できるのは関数式だけ ・無名にできるのは関数式だけ ・代入できるのは関数式だけ つまり、webpageさんは以下のものを混同しています。 ・名前のある関数定義文 ・名前のある関数式 そして、以下の勘違いをしています。 ・即時実行できるのは無名の関数式だけ(実際には名前のある関数式も即時実行できます) 以上、コメントを受けての補足でした。
Lhankor_Mhy

2016/12/22 09:52

あ、間違えていたのは私の方かもしれないです。 もしかして名前のある関数式は無名関数なのかな? 他の回答者の見解をお待ちください。
退会済みユーザー

退会済みユーザー

2016/12/22 12:11

ありがとうございます。 function func(){}のfuncはfunctionの略でしょうか? 初めて見ました。 ちょっと初心者には難しいですね。 関数定義文はググってもあまり情報がありません。 下記にも大した解説がないですね。 http://wp-p.info/tpl_rep.php?cat=js-intermediate&fl=r10
退会済みユーザー

退会済みユーザー

2016/12/22 12:37

http://wp-p.info/tpl_rep.php?cat=js-biginner&fl=r14 に JavaScriptでの関数定義は『function文』で定義する以外の方法として『関数式』(関数定義式)というものがあります。こちらは変数に関数オブジェクトを代入するという方法です。 『function文』 1. function 関数名(引数1, 引数2, 引数3){ 2. // ここに処理 3. } 『関数式』 1. var fn = function(){ 2. // ここに処理 3. }; のように記載があります。
guest

0

ベストアンサー

基本

関数宣言
function 関数名(){ }

実行するには
関数名();

関数は変数に入れれる
var 変数 = function 関数名(){};

変数にいれた関数を実行する
変数();

即時関数

関数宣言と同時に実行させるテクニックの事

( function 関数名(){} )();
こう書くだけ。
※書き方はこれだけではないですが、この書き方が一般的なのでこの形を覚えるだけでよいです。

即時関数を使う理由は、関数宣言後に即実行する場合、纏めてかけるため可読性がよいという点です。

Javascript

1function hoge(){ 23} 4 5hoge();

宣言と実行がバラバラなのを

Javascript

1(function hoge(){ 23}();

このようにまとめて記述でき可読性があがります。
ただのテクニックなので無くても困らない。

無名関数

関数名を省略したものを、関数名が無いので無名関数といっているだけです。

即時関数や関数を変数にいれて実行する場合など、関数名無くても問題ない時に使います。

Javascript

1// 即時関数の例(関数名あり) 2(function hoge(){ 3 : 4})(); 5 6// 即時関数の例(無名関数) 7(function(){ 8 : 9})();

とか

Javascript

1// 引数valに関数をもらって実行 2function xxxx(val){ 3 val(); 4} 5 6// xxxx関数の引数に関数を渡す(関数名あり) 7xxxx(function hoge(){ 8 : 9}); 10 11// xxxx関数の引数に関数を渡す(無名関数) 12xxxx(function(){ 13 : 14});

追記

無名関数 1回きりしか使わない関数なの?

引用テキスト無名関数の呼び出しは関数名でできないので、関数自体を変数に入れて変数名で呼び出すか、 即時関数にして呼び出さないといけない。

ご自身で記載している上記通りで、変数に入れておけばその変数で何度でも呼び出せます。

var answer = sum(1,2);のansertの中身は何?

sum(1,2)の形をみてください。
これは私が記載した関数を実行する形です。
よって、answerには関数sumの実行結果(return)が入ります。

即時関数は無名関数の一種ではないの?

即時関数と無名関数に何ら関わりはありません。
もう一度記載しますが、
即時関数とは、関数宣言と同時に関数を実行するテクニックであり
無名関数とは、関数名を定義しない事です。

ただ、即時関数は関数の宣言と同時に即実行するので関数名を定義しない事がおおいので
その事をいっているものと思いますが、即時関数と無名関数に関わりはありません。

即時関数とは関数を()で囲んで)の後に引数を指定すれば即時関数?

Javascript

1(function(){})(引数)

基本そうです。

少し難しい話なので、最初の回答ではあえて記載しませんでしたが、
javascriptにはfunction文(以下)とfunction式(以下)があります。
function 関数名(){} このような関数宣言はとなります。

の特徴は関数の巻上げが行われます。
関数の巻上げとは、どこで宣言してもその宣言を先頭で宣言したものとして扱います
ですので、このように関数宣言より前にその関数を実行しても問題なく実行できます

Javascript

1hoge(); 2 3function hoge(){ 4}

では、関数文を即時関数にするために関数宣言の後に()で呼び出して見るとどうなるか

Javascript

1var a; 2 3a = 1; 4 5function hoge(){ 6} (); // ここで即時関数にしようとして、関数宣言の後に()を付けて呼び出す

これだけではJavascriptはhoge関数を文として認識するため
関数の巻上げが起こり、以下と同等の扱いになり、()が意味不明なものになります

Javascript

1function hoge(){ // 関数の巻上げで先頭で宣言されたものとされる 2} 3 4var a; 5 6a = 1; 7 8(); // ()だけ残り意味不明な状態となる

その為、関数の巻き上げが行われないとして認識させる必要があります。

その方法の一つが関数宣言を()で囲むことです。
(function() {})
これでこの関数を式として認識するので、実行させるため最後に()をつけて実行します。
(function() {})();

式として認識させる方法は()で囲む他色々ありますが。
人が見て一番分りやすい形が()で囲む方法なので、この形が使われています。

余談ですが、uglifyなんかすると()だと2文字使用するので!が使われる事が多いです
!function(){}()

投稿2016/12/22 13:36

編集2016/12/23 07:10
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/12/23 01:33

とても分かりやすいご回答ありがとうございます。 >>> 無名関数 1回きりしか使わない関数 間違いでは。 何度も使うこともあるのですか? それだと名前のある関数と何が違うのでしょうか? ただ関数に名前を付けるのが面倒な時に使うだけなのでしょうか? 関数名を省略したものを、関数名が無いので無名関数といっているだけです。 ということなので名前のある関数との違いは名前がないだけで複数回使うことも可能ということでしょうか? 名前がないのにどうやって複数回使うのでしょうか? また、下記の方も回答をくれるのはありがたいのですが、下記返信にお答えいただけないので、 もしよろしければ代わりにご回答いただければ幸いです。 >>> >>> 無名関数 1回きりしか使わない関数 間違いでは。 何度も使うこともあるのですか? それだと名前のある関数と何が違うのでしょうか? ただ関数に名前を付けるのが面倒な時に使うだけなのでしょうか? >>> ・名前がないので何度も使いまわす事ができない。 名前がないのに、どのように指定するのでしょうか? 使いまわせるなら、名前のある関数とどう違うのですか? >>> これはエラーにならない。なぜなら関数定義ではなくて関数式になっているから。 これは初心者の私には、難しくてよくわからない式ですが、 変数の中で名前のある関数の定義はできないが、関数式は入れられるということですかね。 >>> 上記であれば、console.log(answer);でインスペクタのコンソールログに表記と、関数の呼び出し変数anwerを両方いっぺんに行っている。 間違いです。そのコードではanswerには3が入っていますので、コンソールに表示してるだけ。 するとどこで呼び出しているのでしょうか? var answer = sum(1,2); で、sum関数へ値を渡すことと、関数の呼び出しを両方行っているということでしょうか? >>> 即時関数は無名関数の一種 名前のある関数も即時実行できるので間違いかと。 https://techacademy.jp/magazine/5530 こちらにそのように記載があったのですがこちらも間違えているのですか? >>> 間違いでは。 名前がないので何度も使いまわす事ができない。 こちらは無名、即時関数のことですね。 これは確かに記載ミスをしました。 無名、即時関数は、名前がないので何度も使うことができない。一度しか使えない。 ということですね。 >>> ・無名関数と違い(function()のようにfunction自体を()で囲む。})の後に引数がある。 間違いとは言えないですが、かっこは必須ではないので、微妙です。 (function()をfunction()と記載しても即時関数になるのですか? 下記のようにできるのですか? <script> var sum = function (a,b){//変数に関数の定義そのものを = で直接入れることができる。ここに関数名がない。 var result = a + b; return result;//ここで変数を呼び出している? }(1,2);//この時点ですでに実行している。ここに引数を記載できる。 console.log(sum);//これは実行ではなくコンソールに表記しているだけ。 //var answer = sum(1,2);という定義した関数の呼び出しが、ここに、上記二つはあるがこちらはない。 </script> もしそうであればどのように区別すればよいのでしょうか? }(1,2);//この時点ですでに実行している。ここに引数を記載できる。 で判断するしかないのですか?
退会済みユーザー

退会済みユーザー

2016/12/23 04:09

// 関数の例 function otameshi(name, hear) { const text = name + 'の髪型は' + hear + 'です。'; return text; } const hearstyle = otameshi('大君', 'ボーズ'); alert(hearstyle); // /関数の例 であれば text変数の中身と'大君', 'ボーズ'という引数ががotameshi関数に渡され、 name + 'の髪型は' + hear + 'です。'('大君', 'ボーズ')となり 結果的に大君の髪型はボーズですとなるということでよいでしょうか? 下記値は順番で対応付けされているのですね。 (name, hear) ('大君', 'ボーズ')
退会済みユーザー

退会済みユーザー

2016/12/23 04:56

無名関数の一種に即時関数があるのは間違えなのですね。 関数の中に名前のない無名関数もあり、即実行する即時関数もあるということでしょうか? 即時と無名の違いは下記でよいでしょうか? 名前があるので即時関数 const doSoon = (function HearDoSoon(name, hear) { const nonametext = name + 'の髪型は' + hear + 'です。'; return nonametext; })('daikunn', 'longhear'); alert(doSoon); 名前がないので無名関数 const noName = (function (name, hear) { const nonametext = name + 'の髪型は' + hear + 'です。'; return nonametext; })('pocyari', 'kenzan'); alert(noName); 2. const noName = function (name, hear) { const text = name + 'の髪型は' + hear + 'です。'; return text; } 無名関数の呼び出しは関数名でできないので、関数自体を変数に入れて変数名で呼び出すか、 即時関数にして呼び出さないといけない。
退会済みユーザー

退会済みユーザー

2016/12/23 07:11

質問の回答を追記しました。
退会済みユーザー

退会済みユーザー

2016/12/23 09:14

ありがとうございます。 >>> ご自身で記載している上記通りで、変数に入れておけばその変数で何度でも呼び出せます。 無名関数の呼び出しは関数名でできないので、関数自体を変数に入れて変数名で呼び出すか、 即時関数にして呼び出さないといけないが、 変数に入れれば何度も使えるので、無名関数は一回しか使えないわけではない。 あくまで関数名で関数を呼び出せないというところのみが、名前のある関数との唯一の違いで、ほかはまったく一緒なのですね。 >>> var answer = sum(1,2);のansertの中身は何? 関数名sumという関数を呼び出して、その関数に値1,2を渡して、 関数が実行されその実行結果がanswer変数の中身に代入されるということですね。 つまり上記の部分で関数の呼び出し、実行と関数に値を渡すことをいっぺんに行っているという認識でよいのですね。 >>> 上記であれば、console.log(answer);でインスペクタのコンソールログに表記と、関数の呼び出し変数anwerを両方いっぺんに行っている。 間違いです。そのコードではanswerには3が入っていますので、コンソールに表示してるだけ。 するとどこで呼び出しているのでしょうか? var answer = sum(1,2); で、sum関数へ値を渡すことと、関数の呼び出しを両方行っているということでしょうか? var alertJSON = $('#js-height-adjustment').css('height','+=1000px');window.alert(JSON.stringify(alertJSON)); var get = $('.js-is-input-error1').val();window.alert(get); var answer = sum(1,2);という定義した関数の呼び出しが、ここに、上記二つはあるがこちらはない。 >>> 即時関数と無名関数に何ら関わりはありません。 なんのかかわりもないとはびっくりです。無名関数の一種というのは完全なデマだったのですね。 下記2種類も関数であることに変わりはない。呼び名が違うだけ。  1 名前をつけない関数を無名関数と呼ぶ。ただ関数に名前を付けないときにこのように呼ぶだけ。ただの呼び名。   リンゴにふじというブランド名を付けて、ふじと呼ぶのと同じ。リンゴであることに変わりはない。             2 関数定義に時に、値も一緒に渡してしまい、定義と呼び出しをいっぺんに行うテクニックのことを即時関数と呼ぶ。  即時関数と無名関数に何ら関わりはありません。  テクニックに名前を付けてので、料理で言う低温調理法と一緒。あくまでテクニックの名前で、別の関数があるわけではない。  即時関数は関数の宣言と同時に即実行するので関数名を定義しない事がおおい。 これでいいですか? ・javascriptにはfunction文(以下文)とfunction式(以下式)があります。 function 関数名(){} function文。このような関数宣言は文となります。 (function() {})();  function式。即時関数とそっくりですね。即時関数は式なのですかね? function文 文の特徴は関数の巻上げが行われます。 関数の巻上げとは、どこで宣言してもその宣言を先頭で宣言したものとして扱います ですので、このように関数宣言より前にその関数を実行しても問題なく実行できます hoge(); function hoge(){ } function式 式として認識させる方法は()で囲む他色々ありますが、 人が見て一番分りやすい形が()で囲む方法なので、この形が使われています。 では、関数文を即時関数にするために関数宣言の後に()で呼び出して見るとどうなるか var a; a = 1; function hoge(){ } (); // ここで即時関数にしようとして、関数宣言の後に()を付けて呼び出す これだけではJavascriptはhoge関数を文として認識するため 関数の巻上げが起こり、以下と同等の扱いになり、()が意味不明なものになります function hoge(){ // 関数の巻上げで先頭で宣言されたものとされる } var a; a = 1; (); // ()だけ残り意味不明な状態となる これだけではJavascriptはhoge関数を文として認識するため 関数の巻上げが起こり、以下と同等の扱いになり、()が意味不明なものになります function hoge(){ // 関数の巻上げで先頭で宣言されたものとされる } var a; a = 1; (); // ()だけ残り意味不明な状態となる その為、関数の巻き上げが行われない式として認識させる必要があります。 その方法の一つが関数宣言を()で囲むことです。 (function() {}) これでこの関数を式として認識するので、実行させるため最後に()をつけて実行します。 (function() {})(); 式として認識させる方法は()で囲む他色々ありますが。 人が見て一番分りやすい形が()で囲む方法なので、この形が使われています。 これでいいですか? ただ最後は難しくてよくわかりませんでした。
退会済みユーザー

退会済みユーザー

2016/12/23 11:38

>無名関数の呼び出しは関数名でできないので~ はいそうです。 >関数の呼び出し、実行と関数に値を渡すことをいっぺんに行っている 概ねそうです。 var answer = sum(1,2); はまず、sum(1,2)でsum関数に引数として1,2を渡して実行します。 関数はreturnで戻り値を返す事ができます。 その戻り値をanserにいれています。 sum関数は引数と足してreturnする関数なので、この場合answerには3が入ります。 > console.log(answer);は関数の呼び出し変数anwerを両方いっぺんに行っている。 違います。 変数answerを引数として、console.log関数を実行しています。 なんとなく、無名関数や即時関数以前に基礎ができていないように感じるので 一旦無名関数や即時関数は忘れて書籍で基礎を学ぶ事をお勧めします。
退会済みユーザー

退会済みユーザー

2016/12/23 13:05

ありがとうございます。 >>> 例 <script> function sum(a,b){ var result = a + b; return result; } var answer = sum(1,2); はまず、sum(1,2)でsum関数に引数として1,2を渡して、sum関数が受け取った引数を使いa + b;を実行します。(a=1値 + b=2値) 関数はreturnで戻り値を返す事ができます。 その戻り値を左にある変数answerにいれています。 上記の、returnで戻り値を返す事ができますという部分がよくわからないのですが、 戻り値を返すということはどういうことなのでしょうか? 変数answerに渡すことを戻り値を返すというのでしょうか? また、たにくちまことのjsの本を持っているのでもちろんこれも読んでいます。
退会済みユーザー

退会済みユーザー

2016/12/24 13:14

下記の認識でよいのですね。 ・ 即時関数は関数の宣言と同時に即実行するので関数名をつける必要性があまりなく、 名前を定義しない事がおおいが、名前を定義することもできる。 即時関数を使った関数に名前を付けなかった場合、この関数をなんと呼ぶのですか? ただの関数と呼ぶべきなのでしょうか?
退会済みユーザー

退会済みユーザー

2016/12/25 00:02

申し訳ないですが、やはり基礎が分ってないように感じます。 なので、回答する前に少し質問させてください。 function sum(a,b){ var result = a + b; return result; } 質問1.この関数は足し算を行う関数だという事は理解しているでしょうか? 質問2.この関数を使って、2+5と6+4の結果をそれぞれ表示するJavascriptを書く事は出来るでしょうか?(かけるのであれば書いて見て下さい)
退会済みユーザー

退会済みユーザー

2016/12/25 02:04

sum(2,5); sum(6,4); でしょうか? 私がわかっていないのは返り値についてです。 帰るとはどこに渡されることを言っているのでしょうか?
退会済みユーザー

退会済みユーザー

2016/12/25 03:35

はい、sum関数を実行するだけであればそれで良いのですが。 足し算の結果を受け取るには、どのように書くかわかっているでしょうか? (この結果を受け取る事を、sum関数が戻り値を返すと表現しました。)
退会済みユーザー

退会済みユーザー

2016/12/25 04:19

返り値について ・その『関数』が呼び出された場所まで処理が戻ります。 下記の例ならvar answerの中身のsum(1,2);に処理結果が入る。つまり、var answer=3となる 例 <script> function sum(a,b){ var result = a + b; return result; } var answer = sum(1,2);//引数をスコープの外に記載し、わざわざ関数SUMに引数を渡さないといけない console.log(answer);//定義した関数の呼び出しをしないと定義した関数が実行できない。 </script> おそらく return result;に3という結果が渡され 関数が呼び出された下の変数ないに3がreturnに渡され var answer = sum(1,2); その後console.log(answer);でanswer内にある3がアラートされる。 という認識でよろしいでしょうか。
退会済みユーザー

退会済みユーザー

2016/12/25 04:49

その通りです。
退会済みユーザー

退会済みユーザー

2016/12/25 05:10

上記であっているのですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問