JavaScript【 関数 】 ～ メソッドとユーザー定義関数

JavaScriptのメソッドとは、JavaScriptで予め用意された関数のことです。
ポップアップでメッセージを表示させる時に使う「alert(“メッセージ”);」の「alert()」もメソッドの１つです。
今回は、JavaScriptのメソッドとユーザー定義関数を紹介したいと思います。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

１．関数とは

関数とは、プログラムで実行させたい処理を定義しておいて、その処理が必要な場所で呼び出せるような形にしたもののことです。

プログラムが大きくなると、あちこちで似たような処理を行うことになります。
その際に、同じ処理内容を繰り返し記述するのは、プログラムが無駄に長くなってしまったり、後で処理内容を変更する場合などメンテナスの面からも好ましくありません。

そこで、共通する処理を定義して、必要な時に呼び出して使用する、というのが関数の考え方です。
処理が必要な場所で、処理そのものを書く代わりに、定義した関数を呼び出すという形にすると、プログラムの内容も分かりやすく、メンテナンスもしやすくなります。
ですので、似たような処理を何度も行う場合は、共通の処理内容をまとめて関数を定義します。

JavaScriptの関数は、必ず関数名の後にカッコを付けて記述します。
そして、必要な場合は、カッコの中に引数（パラメータ）を渡します。

▲目次へ戻る

２．メソッドとは

他のプログラミング言語でもそうですが、JavaScriptには定義済みの関数があり、これをメソッドといいます。
予め処理内容が定義されているので、呼び出すだけですぐに使用できます。

JavaScriptでは、大文字と小文字は区別されるので、メソッドを使う際には大文字と小文字を、定義されている通りに記述する必要があります。
例えば、現在の日にちを取得する getDate() というメソッドがありますが、これを GETDATE() や getdate() と書いても、getDate()メソッドは呼び出されないので、現在の日にちを取得することはできません。

▲目次へ戻る

３．ユーザー定義関数

メソッドで実現できる処理は、メソッドを呼び出すだけで実行できますが、メソッドだけでは実現できない処理は、新たに関数を定義して、その関数を呼び出します。
このような関数を、ユーザー定義関数ともいいます。

ユーザー定義関数は、HTML文書内のscript要素内（<script>?</script>の間）か、外部スクリプトファイル（.js ファイル）で定義します。

定義の書き方は、次の通りです。

function 関数名 (引数) {
    処理内容
}

関数名は、任意に関数の名前を付けます（JavaScriptでは大文字と小文字を区別します）。
引数は、関数に渡す値です（引数がない場合もあります）。
中カッコ内（ { ? } ）に、関数として定義したい処理内容を記述します。

関数を定義する際には、次のようなルールがあります。

定義した関数を実行する際には、次のような書き方で関数を呼び出します。

関数名(引数);

　
次のサンプルは、「１番目と２番目の入力欄に数字を入力して、計算ボタンをクリックすると、計算結果が表示される」という内容のプログラムです。

＋＝

　
ソースは次の通りです。

<script type="text/javascript">
<!--
function culculate() {
     var d1 = document.sample.data1.value;
     var d2 = document.sample.data2.value;
     document.sample.data3.value=eval(d1)+eval(d2);
}
//-->
</script>

<form name="sample">
    <input type="text" name="data1">
    ＋
    <input type="text" name="data2">
    ＝
    <input type="text" name="data3">
    <input type="button" value="計算" onClick="culculate()">
</form>

計算ボタンをクリックすると、イベントハンドラのonClickによって、culculate()という関数が呼び出されます。

culculate()内では、次のような処理をしています。
・変数d1に、sample という名前のフォームの中にある data1 という名前のテキストボックスの入力値を代入する
・変数d2に、sample という名前のフォームの中にある data2 という名前のテキストボックスの入力値を代入する
・sample という名前のフォームの中にある data3 という名前のテキストボックスに、変数d1と変数d2の和を表示させる

計算ボタンをクリックしたことによって、culculate()関数の処理内容が行われた結果、足し算の答えが表示されます。
　
上のculculate()関数は、引数なしの関数でしたが、今度は、引数を渡して同じ処理内容を定義してみます。

<script type="text/javascript">
<!--
function culculate(d1, d2) {
     document.sample.data3.value=eval(d1)+eval(d2);
}
//-->
</script>

<form name="sample">
    <input type="text" name="data1">
    ＋
    <input type="text" name="data2">
    ＝
    <input type="text" name="data3">
    <input type="button" value="計算" onClick="culculate(data1.value, data2.value)">
</form>

先ほどは、引数なしのculculate()関数の中で、２つのテキストボックスの入力値を取得していました。

var d1 = document.sample.data1.value;
var d2 = document.sample.data2.value;

今回は、この２つの入力値を、culculate(d1, d2)関数を呼び出す際に、引数として渡しています。

onClick="culculate(data1.value, data2.value)

onClick を指定するボタンと、入力値を取得するテキストボックスは、同じフォーム内にあるため、onClick の値の中では、「document.sample.data1.value」という書き方ではなく「data1.value」という書き方で、テキストボックスの入力値を取得することができます。

culculate(d1, d2)関数を呼び出した時点で、テキストボックスの入力値を引数として渡しているので、culculate(d1, d2)の中では、「sample という名前のフォームの中にある data3 という名前のテキストボックスに、２つの引数の和を表示させる」という処理のみが行われています。

▲目次へ戻る