Chapter.5 省略記法としての関数 - JavaScript

スクリプト処理を関数にまとめる

関数の役割と記述方法

「関数」とは、特定の情報を処理するスクリプトをまとめたものです。スクリプトを何度も書かなくても、関数を呼び出せば、その中に書かれたスクリプトを何度でも実行することができます。関数には、主に次のような役割があります。

同じようなことをするスクリプトを何回も書かずに、1つの関数にまとめて何度も実行できる。
長大なスクリプトをいくつかの関数に分けることで、ソースが読みやすくなります。
数学の関数と同様に、「y = f(x)」のようにある値を与えると、値に応じた結果が返ってくるようなスクリプトを書くことが可能です。

関数を定義するには『function 関数名()』という形をとります。『()』の中に引数を指定できますが、必要が無い場合は空のままで大丈夫です。

i = 1;
function numberCount() {
document.write(i + "、");
i++;
}

定義した関数はそのままでは実行されません。呼び出すには『関数名()』と記述します。下記の例では『numberCount()』が3回実行されて、ブラウザには「1、2、3、」と表示されます。

i = 1;
function numberCount() {
document.write(i + "、");
i++;
}
numberCount();
numberCount();
numberCount();

※関数は呼び出しのあとに定義してもかまいません。どこで定義しても正しく動作します。

※関数名は変数名と同様に、先頭は半角英字から始めなければなりません。2文字目以降は数字、アンダースコア（_）、ドル（$）を使用することができます。全角の漢字やひらがなも使用できますが、余り使用されません。

引数で動作を変える

関数には引数をしようして、関数に数値や文字列などの情報を与えることができます。同じ関数でも、引数を変えれば動作を変えることができます。『function 関数名()』のカッコ中に引数を指定します。

function circleArea(r) {
area = r * r * 3.14;
document.write("円の面積は" + area + "メートルです。<br>");
}
circleArea(5);
circleArea(7);

関数に2つの引数を与える場合は、因数を『,（カンマ）』で区切ります。

function triangleArea(b, h) {
area = b * h / 2;
document.write("三角形の面積は" + area + "メートルです。<br>");
}
triangleArea(3, 5);
triangleArea(5, 7);

▲page top

戻り値を呼び出す

関数が返す結果を「戻り値」といいます。戻り値を使用すると、因数を与えて計算した結果に対して、さまざまな値を返すことができます。戻り値を記述するには『return』を使用します。

function triangleArea(b, h) {
area = b * h / 2;
return area;
}
document.write("三角形の面積は" + triangleArea(3, 5) + "メートルです。");

※関数で『return』が使用されると、そこで関数の実行が中断されます。なお、関数が戻り値を返さなかったり、戻り値のない『return』を使用した場合、関数の戻り値は『undefined』になりますので注意してください。

▲page top

ローカル変数

関数の中だけで有効な変数を「ローカル変数」と呼びます。ローカル変数を使用すると、同じ名前の変数を関数の中と外で使い分けたり、複数の関数で使い分けることができます。ローカル変数を定義するには、変数名の前に『var』をつけます。
下記の例では、ローカル変数の『area』に『var』をつけることで、グローバル変数とローカル変数を区別して『三角形の面積は17.5メートルです。三角形の面積は7.5メートルです。』と表示されます。『var』をつけないと、『三角形の面積は17.5メートルです。三角形の面積は17.5メートルです。』と同じ値が表示されてしまいます。

area = 3 * 5 / 2;
function triangleArea(b, h) {
var area = b * h / 2;
document.write("三角形の面積は" + area + "メートルです。<br />");
}
triangleArea(5, 7);
document.write("三角形の面積は" + area + "メートルです。");

※関数の中でfor文を使用するときは、変数がグローバル変数になっていないか注意してください。ローカル変数として定義したfor文の変数に『var』をつけ忘れると、関数の中と外で同じ値になっていしまいます。

※HTMLの中に複数のScript要素を記述した場合は、グローバル変数や関数はどのScript要素でも共有されますので、注意してください。

▲page top

引数の数が一定しない関数

関数の中でのみ、『arguments』という個数不定の引数を受け取るオブジェクトを使用することができます。『arguments』は関数が呼び出されたときの引数を表すもので、因数を配列の形で保持します。因数の数はいくつでも指定可能です。

function circleArea() {
    for(var i = 0; i < arguments.length; i++) {
        var area = arguments[i] * arguments[i] * 3.14;
        document.write("円の面積は" + area + "メートルです。<br />");
   }
}
circleArea(1, 2, 3, 4, 5);
circleArea(6, 7, 8, 9, 10);

JavaScriptでは、特定の働きをするスクリプトの処理を関数にまとめることができます

スクリプト処理を関数にまとめる

関数の役割と記述方法

引数で動作を変える

戻り値を呼び出す

ローカル変数

引数の数が一定しない関数