関数とは
- ここで説明する 関数 とはプログラミングにおける function のことです。
- function
- 読み: ファンクション
意味: 関数、機能する、役割を果たす
関数の概要
まず、関数についてお決まりの説明をします。
「二つの変数、x と y があったとして、 x の値が決まれば、それに伴って y の値がただ一つに決まるとき、y は x の関数である。」
上記の説明で理解できたでしょうか。
数学的に言えば、この説明で十分なのですが、プログラミングにおける関数では、それも当てはまるけど、もっと違う解釈があるとしか言えません。
プログラミングにおける関数というと「処理の集まり」と言ったほうが、しっくりきます。 もちろんプログラミングにおける関数でも、 x の値を引数にして一連の処理をこなし、 y という結果を返すタイプのものもありますが、 これとは別に、プログラムでは複数の処理を一つの塊として扱うものを関数として位置づけることも少なくありません。 これはちょうど、プログラムの中のサブルーチン的な役割を果たします。
とにもかくにも、私的な結論としては、関数とはプログラムにおいて、「何らかの結果を返すもの」ということにさせていただきます。
サンプルコードと実行結果 【戻り値がある関数】
ここでは、シンプルですが、戻り値がある関数のサンプルを見て下さい。 戻り値がある関数には大抵の場合、「引数」というものが必要です。これは概要のところで述べている x と y のことです。 これは引数、 x を元に y という結果を返すからです。
なお、ここで作成している関数は x (引数) に数値を与えて呼び出すと x を 10倍したものを戻り値として返します。
サンプルコード: HTML
<body>
<input type="number" value="5" id="idNumber">
× 10 =
<output id="idOutput">innerText</output>
<script>...</script>
</body>
- 02: input (この要素のvalue値を 引数 x にして関数を呼び出します。)
- 04: output (関数からの戻り値をこの要素のテキストに出力します。)
- 05: script (この要素内にプログラムを記述しています。内容は下記の script コードを参照してください。)
サンプルコード: script
<script>
let elmNumber = document.getElementById("idNumber");
let elmOutput = document.getElementById("idOutput");
function multiplication_10 (x){
return x * 10;
}
elmOutput.innerText = multiplication_10 (elmNumber.value);
</script>
- 02: elmNumber (この変数は、識別子に idNumber を持つ要素を参照します。)
- 03: elmOutput (この変数は、識別子に idOutput を持つ要素を参照します。)
- 04-06: function (ここで multiplication_10 という名前の関数を作成しています。引数は x です。)
- 05: return x * 10; (関数の処理の部分です。return は戻り値を意味します。つまり、ここでの戻り値は [ x * 10 ] の答えになります。)
- 07: multiplication_10 (elmNumber.value) (multiplication_10 関数を呼び出します。 () の中に引数を与えています。ここでの引数は elmNumber.value ということで、識別子に idNumber を持つ要素の value値になります。)
- 07: elmOutput.innerText = 関数の戻り値 (識別子に idOutput を持つ要素のテキストに関数の戻り値を代入します。)
上記のコードでは混乱を避けるために重要な部分だけ表記しています。 全てのコードは以下に掲載しておきます。
<script>
let elmNumber = document.getElementById("idNumber");
let elmOutput = document.getElementById("idOutput");
let evtChange = new Event("change");
function multiplication_10 (x){
return x * 10;
}
elmNumber.addEventListener("change", function(){
elmOutput.innerText = multiplication_10 (this.value);
});
elmNumber.dispatchEvent(evtChange);
</script>
サンプルコードと実行結果 【実行型の関数】
ここでは、実行型の関数を見て下さい。
実行型と言っているのは、私が思いつきで表現した言い方であり、理解しやすいと思ったからそう言っているだけです。
これは、前のセクションで示した【戻り値がある関数】とは違い、何らかの実行処理を立て続けに行うようにしたものです。
ここでの処理を具体的に書くと以下のようになります。
- サンプルとなるdiv要素の背景色をライトピンクにする
- ボタンの表記を「Click されました」に変更する
- ボタンを無効化する
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="idDiv">サンプル</div>
<p><input type="button" id="idButton" value="Click してください"></p>
<script>...</script>
</body>
- 06: div (識別子に idDiv を持つ要素です。これをスクリプトでは elmDiv 変数で参照することにします。)
- 07: input button (input要素のbutton型です。識別子に idButton を持つ要素です。これをスクリプトでは elmButton 変数で参照することにします。)
サンプルコード: script
<script>
let elmDiv = document.getElementById("idDiv");
let elmButton = document.getElementById("idButton");
function funcMyProcessing(){
elmDiv.style = "background-color : lightpink";
elmButton.value = "Click されました";
elmButton.disabled = true;
}
elmButton.addEventListener("click", funcMyProcessing);
</script>
- 04-08: function funcMyProcessing(){ 処理 } (funcMyProcessing() という名前の関数を作成しました。05:~07:行目が 処理 の部分になります。)
- 05: elmDiv.style (ここで、div要素の背景色をライトピンクに設定しています。)
- 06: elmButton.value (ここで、input要素button型の表記を "Click されました" に変更しています。)
- 07: elmButton.disabled (ここで、input要素button型の無効化を行っています。)
- 09: addEventListener (input要素button型がクリックされたときに関数、 funcMyProcessing を呼び出します。)
関数について【まとめ】
このページではプログラミングにおける関数について述べました。 関数とはプログラムにおいて、「何らかの結果を返すもの」と解釈してください。
プログラミングにおける関数とは大まかに分けて、以下の 2つのタイプに分けられます。
- 戻り値がある関数: 関数の引数を関数処理に組み込み戻り値を返すタイプ
- 実行型の関数: 引数を不要とし、何らかの実行処理をまとめたタイプ (サブルーチンの役割)
以上が関数をシンプルに表現した解釈となります。