関数の使い方/JavaScript

何度も同じ処理をする時、関数を使うと便利です。一旦定義した関数は、何度も呼び出して使えます。又、関数に数字や文字を渡して処理する事も出来ますし、関数で処理した結果を受け取る事も出来ます。

本項では、関数の利用方法について説明します。

関数宣言

 関数は、名前と共に処理する命令文を記述します。これを関数宣言と言います。動作させたい時は、定義した名前で呼び出します。

関数の利用方法

 以下は、関数宣言と呼び出しの例です。

【関数宣言の例】
<script>
function func1() {
    document.write("テストです");
}
</script>

<script>
func1();
</script>

 赤字部分が関数宣言です。func1は関数の名前で、関数毎に違う名前を付ける必要があります。関数宣言は<head>と</head>の間でも記述出来ます。関数宣言を行っておくと、同じ関数を繰り返し利用出来ます。

 青字が実際に関数を呼び出している部分です。上の例では"テストです"と表示されるため、これを<body>と</body>の間で表示したい部分に記述します。再度func1();と記述すると、同じ処理が出来ます。

 尚、上記では2つの<script>に分けて記述していますが、1つの<script>内に記述しても動作します。

 関数を別ファイルに記述する事も良くあります。赤字部分をtest.js等別ファイルに記述し、jsフォルダ等に保存、<head>と</head>の間に<script src="js/test.js"></script>と記述する事で読み込みます。

関数を別ファイルにして読み込む方法

 関数が長い場合は別ファイルにするとすっきりします。又、複数のHTMLから利用する場合も別ファイルにすると再利用出来ます。

引数

 関数に数字や文字を渡す事も出来ます。

【引数の利用方法】
<script>
function func1(x,y) {
    var z = x + y;
    document.write(z);
}

func1(10,5);
</script>

 赤字部分で10と5の数字を関数に渡しています。これを引数と呼びます。青字部分で、10と5をxとyにセットします。このため、zは15となり、documento.writeで15が表示されます。引数を変えてfunc1(2,3);で呼び出すと、5が表示されます。このように引数を使うと、同じ関数を使っても結果を変える事が出来ます。

 引数はカンマ(,)で区切って羅列しますが、引数が1つの時はカンマを使わずfunc1(10)等で渡し、func1(x)等で受け取ります。又、文字を引数にする時は、"テスト"等ダブルクォーテーションで囲みます。

arguments

 引数の数が可変な時は、argumentsが便利です。

【argumentsの利用方法】
<script>
function func1() {
    var z = 0;
    for ( var i = 0; i < arguments.length; i++ ) {
        z = z + arguments[i];
    }
    document.write(z);
}

func1(10,5);
func1(10,5,2);
</script>

 赤字部分で引数の数を取り出しています。青字部分で引数自体を取り出しています。arguments[0]が1番目の引数でargument[1]が2番目の引数です。for文で引数の数だけ繰り返し足し算しているため、最初のfunc1(10,5);では15、func1(10,5,2);では17が表示されます。

スコープ

 引数の説明で使ったスクリプトを少しだけ変更します。

【ローカル変数は関数の外で認識出来ない例】
<script>
function func1(x,y) {
    var z = x + y;
}

func1(10,5);
document.write(z);
</script>

 変えたのは赤字の部分で、関数の外にdocument.writeを記述していますが、これはエラーでスクリプトが停止します。関数の中でvarを使って宣言した変数は、関数の外では認識出来ないためです。この関数内の変数をローカル変数と言い、この変数が有効な範囲をスコープと言います。

 上記のスクリプトを以下のように変えてみます。

【関数内でグローバル変数を定義する例】
<script>
function func1(x,y) {
    z = x + y;
}

func1(10,5);
document.write(z);
</script>

 変えたのは赤字部分で、varを使わずにzを宣言しています。これはグローバル変数と呼ばれ、関数の外でも認識出来ます。このため、上記は15と表示されます。

 又、以下の赤字部分のように、関数の外で宣言した変数もグローバル変数です。

【関数外で変数を宣言する例】
<script>
var x=10,y=5;
function func1() {
    z = x + y;
}

func1();
document.write(z);
</script>

 赤字部分で定義したグローバル変数は関数内でも使う事が出来るため、関数内のx+yは正常に計算されて15と表示されます。

 尚、関数内のスコープをローカルスコープ、関数外のスコープをグローバルスコープと言います。

戻り値

 関数の結果を戻り値として返す事が出来ます。

【戻り値の利用例】
<script>
function func1(x) {
    if ( x == 1 ) {
        return 10;
    } else {
        return 20;
    }
}

document.write(func1(1));
document.write(func1(2));
</script>

 赤字部分が戻り値です。xが1であれば10、1以外であれば20を返します。このため、最初のdocument.writeでは10、2つ目のdocument.writeでは20が表示されます。

 return x等、戻り値に変数を使う事も出来ます。

再帰

 関数は、関数内で自身を呼び出す事が出来ます。

【再帰関数の例】
<script>
function func1(x) {
    document.write(x);
    if ( x == 5 ) { return }
    x++;
    func1(x);
}

func1(1);
</script>

 青字部分は、赤字の関数内で自分自身を呼び出しています。これを再帰と呼びます。

 上記は緑字部分で引数1を渡し、再帰呼び出しによって1ずつプラスされて、5になるとreturnで停止します。このため、document.writeにより12345と順番に表示されます。

 このように、for文等でループさせなくても、再帰によって同じ処理を繰り返させる事が出来ます。

関数式

 関数を変数に代入する事も出来ます。これを関数式と言います。

【関数式の例】
<script>
var addition1 = function func1(x,y) {
    return x + y;
};
document.write(addition1(10,5));
</script>

 赤字部分は関数宣言と同じですが、functionを演算子として使っており、addition1という変数に代入しています。上記では、引数として10と5を渡し、足し算の結果を戻り値にしているため、15が表示されます。

 関数宣言では、同じ<script>内であれば呼び出しの後に宣言しても動作しますが、上記はvar addition1が変数宣言のため、addition1を使う前に宣言しないとエラーになります。

無名関数

 関数に名前を付けずに作成し、変数に代入する事も出来ます。

【無名関数の例】
<script>
var addition1 = function(x,y) {
    return x + y;
};
document.write(addition1(10,5));
</script>

 関数式で使ったスクリプトと殆ど同じで結果も15と表示されますが、functionの後に関数名がありません。このように、関数名を省略した場合は無名関数と呼ばれます。

 関数式のメリットは、無名関数を使って名前を省略出来る点です。以下はブラウザ上でクリックが発生すると、「テスト」とアラートを出すスクリプトです。

【クリック時にアラート表示】
<script>
function func1() {
    alert("テスト");
}
addEventListener("click", func1, false);
</script>

 addEventListenerは赤字部分で実行する関数を指定します。直接alert等を実行出来ませんが、無名関数を使うと以下のように書き換える事が出来ます。

【無名関数を使ってクリック時にアラート表示】
<script>
addEventListener("click", function(){alert("テスト");}, false);
</script>

 関数宣言をせずにfunc1という名前も使わなくて済みます。

即時関数

 関数定義と呼び出しを一度に行う事も出来ます。これは即時関数と呼ばれます。

【即時関数の例】
<script>
(function addition1(x,y) {
    var z = x + y;
    document.write(z);
})(10,5);
</script>

 赤字部分が即時関数です。関数を定義しつつ、実行しています。最後の(10,5)は引数で、引数を使わない時は()と記述します。

 これは、無名関数にすると以下のようにも記述出来ます。

【即時無名関数の例】
<script>
(function (x,y) {
    var z = x + y;
    document.write(z);
})(10,5);
</script>

 即時関数のメリットは、スクリプトが長くなった場合に変数の管理が楽になる事です。例えば、上の例では即時関数を使わなくても、以下のように記述すれば同じ結果が得られます。

【即時関数の代わりにグローバル変数を使った場合】
<script>
var x = 10;
var y = 5;
var z = x + y;
document.write(z);
</script>

 この場合、x、y、zがグローバル変数になるため、以後この変数を管理して他の用途で使わないようにする必要があります。

 即時関数ではx、y、zがローカル変数のため、グローバル変数に影響しません。つまり、グローバル変数としてx、y、zを管理する必要がなく、他の用途で使う事が出来ます。

 即時関数のデメリットは、後から呼び出して再利用出来ない事です。

次のページ正規表現の使い方

  • このエントリーをはてなブックマークに追加