jQuery | そもそも関数って?基礎のおさらい

どうもかわうそです!

今日は『jQuery|そもそも関数って?基礎のおさらい』ということで解説していきます。

  • 関数ってなんだっけ?
  • 引数がよく分からない・・・
  • 関数わ分かるけれど、理解に自信がない

そんな方に向け、簡単に解説していきたいと思います!

もともとこの記事に書いてあった内容をまとめたものなので、

かんたん!初心者でも分かるcallback関数[JavaScript]
どうもかわうそです! 今日はJavaScriptやjQueryを学んでいるとよく出てくる『callback関数』の簡単なサンプルコードを書き、説明していきたいなと思っています。 call...
">
かんたん!初心者でも分かるcallback関数[JavaScript]
どうもかわうそです! 今日はJavaScriptやjQueryを学んでいるとよく出てくる『callback関数』の簡単なサンプルコードを書き、説明していきたいなと思っています。 call...

最終的にはcallback関数が分かるようになる、そのための知識をここでお伝えしていきますね!

console.log()の使い方が分からない方は、先にこちらを読んでおいてもらえると理解しやすくなると思います。

そもそもの関数定義と関数実行

割とここが大事なポイントなので、ちょっとでも知識に不安がある方は一緒に振り返りたいと思います。

functionの構成

callback関数を理解するために、そもそものfunctionの構成をおさらいしておきましょう。

無名関数と関数名

まず、functionには名前を付けることができます。

関数の構成

関数の構成を説明します

functionの後の()には変数を入れることができます。
入れたら(変数)、入れなければ()ですね。

()の後ろには関数の処理命令を書く{}があります。
{—処理—}と書きますよね。
この{}の中では、(変数)を受け取ることができます。

受け取るには、
{—-処理 変数 —–}
と書くだけです。

例えば、var x = 変数 とすれば、xに変数の値が保存されるし、

とすれば、5+引数名の”値”を計算してくれるわけです。(あえてreturnは書いていません。)

でも今のところ、”変数に値を渡す方法”はお伝えしていません。

これに関しては、次の関数実行の方法をおさらいしながらお話します!

関数実行の方法

関数は実行処理をしないと、基本的に実行されません。

関数に名前が設定されている場合、関数を実行するには

関数名の後ろに();

を付けることで、実行されます。

これ、実はコールバック関数を理解深めるポイントです。

例えば

という関数を実行するには、

と記述すればokです。

じゃあ、名前がない無名関数を実行するには??

こうしましょう。

これを即時関数と言ったりします。

function(){} の最後に()をつけて、全体を()でくくって、ok!

※厳密に言うと、(引数)として、ファンクションが渡されると、実行される。

じゃあ、関数は実行させたくないけど、関数の記述だけ知りたい!
って場合があるかも・・・??

そんな場合は、

だけでok!

試しに、console.log(orange)やalert(orange)をしてみてください。

orangeの関数の内容が出力されるはずです。

ではここで、改めて

でも今のところ、”変数に値を入れる方法”はお伝えしていません。

先ほどの、この変数にどうやって値を入れるの!?この方法をお伝えしていきます。

つまり今から、引数を説明します。

引数

まず、この変数。これらは変数であり、そして’引数’と呼ばれます。

分かったから、この引数に値をどうやって入れるの??

答えは、

関数を呼び出す時に入れます

関数を呼び出すには、関数名の後ろに();を付けてあげるんでしたね。
関数orangeを呼び出すと

この時、関数名(引数の値)とすることで、引数に値を渡すことができます。
やってみましょう。

引数が’変数’のままなので、味を意味するtasteにしましょう。

するとコンソール画面に

と文字列が出力されたはずです。

何が起きてるかというと
orange(‘甘い’)によって、引数tasteに値が渡されました。
taste=’甘い’と定義されたんです。


taste=’甘い’だから’甘い’が出力されたんですね。

これが引数です。

じゃあ、以下のような

  • 引数はtaste
  • 引数の値は “甘い”
  • 引数の受け取りは price

こんな場合はどうなるでしょうか。

orangeの引数がtaste、console.log()で受けとる引数がpriceになっています。

orange(‘甘い’)で関数を呼び出したとき、引数tasteとなりますので
console.log(price)では何も呼び出されない。

どころか、

priceってそれ引数じゃねーし、引数って変数だけれど、priceって変数も定義されてないので、そんなんないのに使うな!ってエラーですね。

とりあえず

引数を使いたければ、引数の名前は一緒にして受け取れ!ってのがポイントです。

無名関数に引数を渡す方法

ちょっと発展系です。

関数名がある関数に引数を渡す方法は分かったけれど、無名関数に引数を渡すにはどうしたらいいの!?って思いますよね!

これも実は、あるんです!

ファンクションの最後に、(値)をつけましょう。

でも、これだけだと、実行はされない!

じゃあどうするか!

そう、即時関数ですね!

function(){} の最後に()をつけて、全体を()でくくって、ok!

あれ、でもこれって

これに

()でくくっただけですよね!?

そう!即時関数のおしりにつける()は、引数に値を渡すための()だったんですね!!

おもしろいですね~!!

伝えたいことのポイント

今回伝えたいことのポイントは

関数呼び出し時に引数を使うには、

・呼び出し時、関数名(引数の値) ★この時、引数(変数)=引数の値 が設定される
・関数名(引数){ 引数 } ★引数は同じ名前にして初めて使える

この2つがめちゃくちゃ重要ということです。
極論、この引数名さえ一緒であれば、aでもbでもcでもどんな名前だっていいんです。

これがしーっかり分かっていると、callback関数の基本的な仕組みはもう90%理解できています!

callback関数について詳しくはこちらをどうぞ!

http://kawauso-29.com/web/callback/

フォローする