functionはファンクションと読みます。日本語にすると数学用語の関数になります。
そもそも関数ってどんなものでしょう。「中身の分からない箱」をイメージしてください。箱には「入口」と「出口」が付いています。この中身の分からない箱の入り口に適当な数字を入れてみましょう。入り口に数字を入れると、別の数字が出口から出てきます。
入り口から「1」を入れたら、出口から「2」が出てきました。次に、「2」を入れたら、今度は「4」が出てきました。そして,「3」を入れたら、今度は「6」が出てきました。
どうやら、この箱に数字を入れると、入れた数字が2倍になって出てくるようです。これを仮に「数字が2倍になる箱」と呼びます。
今度は別の箱に数字を入れてみます。見た目は同じ箱ですが、入り口から「1」を入れたら「1」が出てきます。数字を入れても変化がないのでしょうか。
次に、「2」を入れたら、今度は「4」が出てきました。2倍になったのでしょうか。そして、「3」を入れたら、今度は「9」が出てきました。
分かりましたか。この箱は「数字が2乗になる箱」ですね。このように、箱に「入れた数に対応した数が出てくる」のが関数のイメージです。関数のイメージがつかめたら、最初の「数字が2倍になる箱」をJavaScriptの関数で書いてみましょう。
function nibai(x) {
var y=x*2;
return y;
}
javaScriptで関数を使うには、最初にfunctionと書きます。続いて、関数に名前を付けます。この関数は、「入れた数が2倍になる関数」なので、ローマ字で「nibai」という名前を付けました。
関数の名前のルールは、変数と同じです。英字の「a~z、A~Z」、数字「0~9」、「_(アンダースコア)」を使うことができます。2倍だからといって「2bai」のように名前の最初に数字を付けることはできません。名前の次に、「(x)」と書いてあります。これは、関数の入り口になります。どんな数が入るか分からないので、数字の代わりにxという変数が書いてあります。数字ではなく、変数を使うことで入れる数字が自由に変えられるというわけです。
関数の入り口に使う変数のことを、特別に引数(ひきすう)と呼びます。
引数として入り口の変数を用意するときに、varを付ける必要はありません。
次の「{」は関数の始まりを表しています。最後の「}」と対応していて、この{ }に囲まれた部分が関数の中身になります。
2行目の「var y=x*2;」には、どんな意味があるのでしょうか。var yのyは変数です。varは変数に名前を付ける時に使う約束でしたね。最後に付いている「;」はJavaScriptの区切りです。
このように、変数には別の変数や、変数の計算結果を入れることもできます。ここでは、変数yにxを2倍した計算結果を入れています。こうすることで、入り口の変数xの値が変化すると、自動的に変数yの値も変化します。
次の「return y;」は、箱の出口にあたります。returnはリターンと読みます。英語そのままの「返す」という意味で、変数yを返すというJavaScriptになります。
先ほどからの流れで、変数yはxを2倍した数字なので、「xを2倍した数字を返す」と読み換えることができます。つまり、これで「数字が2倍になる関数」となっているわけです。
という具合に、たった4行のコードでこんなにも分かりやすく説明をしてくれるサイトがあるのです。いろいろサイトを探しましたが、自分みたいな初心者の方には、こんなにも分かりやすく説明してくれるサイトはありませんでした。ここのサイトで説明してくれるのは本当に基礎の基礎ですが、曖昧な理解で学習しているよりも、こういう事を知っているのと知らないとでは学習のリズムが全然違うかと思われます。javascriptをやる方はぜひ見てみてください。「ようこそjavascriptの世界へ」です。一番上にでるのですぐ分かるかと思います。
11月8日 宮本 勇