もじゃもじゃラボ/JavaScriptでプログラミングの基本的概念を学ぼう！/関数
HTMLCSSJavaScriptJava
HTMLCSSJavaScriptJava

関数

CSSデザインの基礎を学ぼう！Webデザインに最低限必要な知識
JavaScriptでプログラミングの基本的概念を学ぼう！
Webページに動きをつけるプログラミングを学ぼう！
ライン公式アカウント
オンラインレッスンのお得なクーポン配信しています！
このチャプターの目次

関数

関数とは、あるまとまった処理に名前をつけたものです。変数と同様に、名前を自由につけることができます。また、処理についても、関数に何をさせるかを考え中身を自由にまとめることができます。
よく使う機能を後から何度でも使えるように、まとめて名前をつけておくと、必要に応じて関数を呼び出すことができます。
また、値を渡すと値を処理して結果を返してくれます。数学で習う関数の、「ある値xが与えられるとyが決まる」と言った感じに近いです。
関数に、xで値を渡すと、yの値を返してくれる。ということです。
プログラミングでは、関数に渡す値、xのことを引数と呼びます。また、その時決まる値yのことを戻り値と言います。数学と違うのは、プログラムでは、引数も戻り値もない関数も存在します。

関数のメリット

同じ処理を関数にすることで、次のようなメリットが生まれます。
  • プログラムがスッキリする
  • プログラムの修正がしやすくなる
以下のような、ややこしいプログラムがあったとします。
赤字の部分の処理ABCは2箇所ありますが、処理の順番も内容も全く同じです。これを1つの関数としてまとめてしまえば、
ややこしいプログラムは以下のように書けます。
非常にスッキリしました。
また、処理ABCを修正する必要がある場合、関数化されていない時には2カ所を修正しなければいけませんが、関数化されていると、修正箇所はfoo関数の中の1箇所で済みます。修正すべき箇所が多くなるとバグ（不具合）が起きやすくなってしまうので、重複している処理は関数化されていることが望ましいです。

関数の定義

JavaScriptでは、関数を以下のように定義します。
プログラムに関数の名前を記述すると呼び出すことができます。
関数名の後ろには、を記述してください。この部分を「呼び出し側」と表現することがあるので、覚えておいてください。

サンプルコード

配列のサンプルコード「3教科のテスト結果を合計する処理」を関数化します。それを呼び出して実行してやりましょう。
このサンプルでは、関数、sumScoresの呼び出しを2回しています。実行結果を見ると、合計点も2回出力されています。つまり、名前のついた処理は、その名前を呼ぶと、必要に応じて何回でも呼び出すことができる、ということです。
出力の結果に注目してください。1回目の呼び出しで、関数の中に処理が移動して、で合計点が出力されたということがわかります。関数の処理が終了すると、呼び出し側に戻り、「呼び出し側に処理が戻りました」というメッセージが出力されました。さらに、2回目の呼び出しで、再度関数の中の処理が実行され合計点が出力されています。呼び出された時には、関数の中に制御が移動し、終了すると呼び出し側に戻って次の処理をする、という処理の流れがわかるかと思います。
ただ、この関数は特定のテスト結果の点数を合計するので、得られる結果は毎回同じになります。なので、「とても便利！」とは言えません。これをより便利にしてくれるものが、次で解説する引数と戻り値です。

引数

関数内で必要とする情報を、呼び出し時に与える値のことです。呼び出し側が、「関数が必要とする情報を教えてあげる」といった感じになります。
Excelには集計するという「sum関数」があります。
「ここからここまでを集計して」と指示します。この「ここからここまで」という情報を渡すのが引数の役割です。
呼び出し側と関数本体側の値のやり取りは、特別な変数のようなものを介して行います。
関数の宣言時にの中に宣言します。この引数名と書かれている部分のことです。
引数に名前をつけてみましょう。
引数の名前も、変数同様、プログラマが自由に決めて構いません。ここでは、numという名前にしてみました。変数の宣言のようにletキーワードは使いません。名前だけを書きます。
これは、関数、functionの中で使う変数名の一種で、ここに値が入ってくる想定で、関数の中に、処理を記述していきます。
引数numに10足した結果を画面出力する、という処理にしてみました。numの値によって出力結果が変わります。
また、引数を複数宣言することも可能です。
引数は、関数の中のみで有効な変数のようなものです。関数が終了すると値はクリアされます。

データの渡し方

引数でデータを渡すには、関数を呼び出す時の内に値または変数を指定します。関数の中の処理に値を渡します（関数宣言時の引数に値を代入します）。
具体例です。
squareという名前の渡した値を自乗する関数を作ってみました。引数numを自乗した結果をで画面に出力しています。
この例では、変数iに3を代入しています。引数でを渡すと、3がsquare関数のに代入されます。自乗されて「9」が出力されるという結果になります。
引数が複数ある場合には（カンマ）で区切って渡してやりましょう。

戻り値

戻り値とは、関数が処理した結果を呼び出し側に戻す値のことです。
数学の関数でいうと、yの値に相当します。具体的な値を引数xに入れて処理をしてもらい、答えを返してもらう、と言った感じです。
具体的にはreturn文を使って値や状態などを返します。関数の終了前に値を返します。
具体例です。
引数の例で作成したsquare関数で、numを自乗した結果をreturnするようにしました。
変数iに代入した3が、square関数側で自乗されて「9」が返ってくる、という結果になります。処理結果の戻り値をどう扱うかは呼び出し側次第なので、融通のきくプログラムになります。

サンプルコード

function1.htmlの関数は、特定のテスト結果の点数を合計するので、得られる結果は毎回同じでした。引数と戻り値を利用することで、より便利に、そして効率的に関数が使えるようになります！
AさんBさんの出力された点数の結果が異なっている、ということに注目してください。
このサンプルでは、テスト結果の点数を保持した配列を引数で渡しています。また、合計結果を戻り値で返しています。この関数は、テスト結果の数に関係なく、合計点を求めることができます。関数を使うメリットがよく表れているかと思います。