メインコンテンツまでスキップ

関数

関数とは​

数学における関数とは異なり、JavaScript をはじめとしたプログラミング言語の文脈における関数は、基本的には文のまとまりに名前を付けたものです。

// 関数を定義しておけば
function greet() {
  document.write("こんにちは、世界！");
}

// 後から呼び出すことができる
greet(); // こんにちは、世界！
greet(); // こんにちは、世界！

上のプログラムでは greet という名前の関数が定義されており、{ と } で囲まれた部分に document.write("Hello World!"); という文が記述されています。

関数を定義すると、関数名に続けて丸かっこを記述することにより、その関数を実行できるようになります。

このプログラムでは、greet 関数が 2 回呼び出されているので、ブラウザに こんにちは、世界！ が 2 つ表示されます。

引数​

関数の振る舞いを呼び出し時に変更するため、関数に引数を与えることができます。 引数にはどんな値でも指定できます。

function greet(greetingType, myName) {
  document.write("Good " + greetingType + ", " + myName + "!");
}

greet("morning", "佐藤");

引数名は関数名直後の丸かっこ内にコンマ区切りで設定できます。 上のプログラムで greet 関数は、greetingType や myName という名前の引数をとります。 関数の中ではこれらは変数のように振る舞います。

呼び出し側では、丸かっこの中に関数に渡す引数を指定します。 このプログラムを実行すると、ブラウザに Good morning, 佐藤! が表示されるでしょう。

引数

戻り値​

関数内で return 文を用いると、関数の実行が停止され、return 文の結果が出力されます。 この値を戻り値と呼びます。 ある値を戻り値として設定して関数の実行を終了することを、関数がその値を返すと表現します。

function add(a, b) {
  let sum = a + b;
  return sum;
}

document.write(add(3, 4)); // 7

戻り値がなぜ必要なのか不思議に思った人もいるかもしれません。 今回のコードで、もし return 文を用いなければ、以下のようになります。

function add(a, b) {
  let sum = a + b;
  // return sum;
}

document.write(add(3, 4)); // このコードは正しく動きません

今回のコードでは、変数 sum が宣言されただけなので、return 文 を用いて sum を返さないとうまく実行されないのです。

確認問題​

引数を 2 つとり、その積を戻り値として返す関数 multiply を定義してください。

解答例: 2つの積
function multiply(a, b) {
  let result = a * b;
  return result;
}

document.write(multiply(3, 4));
GitHub で表示このプログラムを実行する

基礎演習​

最大値​

引数を 2 つとり、そのうち大きい数を返す関数 max を定義してください。

ヒント

if 文を使って、a が大きい場合と b が大きい場合で処理を書き分けます。

解答例: 大きい数
function max(a, b) {
  if (a > b) {
    return a;
  } else {
    return b;
  }
}
GitHub で表示このプログラムを実行する

中級演習​

携帯電話料金​

携帯電話料金を計算する関数を作ってみましょう。

function calculateCost(monthlyDataUsage) {
  // ここに処理を書く
}

document.write(calculateCost(3.5));

calculateCost は、引数に月間転送量 monthlyDataUsage を取り、その月の携帯電話料金を戻り値として返す関数です。 携帯電話料金は、下のルールで決定されるとします。

  • 月間転送量 < 5.0 (GB) のとき、携帯電話料金は 月間転送量 × 600 (円 / GB)
  • 月間転送量 >= 5.0 (GB) のとき、携帯電話料金は 3000 (円)
解答例: 携帯電話料金
function calculateCost(monthlyDataUsage) {
  if (monthlyDataUsage < 5.0) {
    return monthlyDataUsage * 600;
  } else {
    return 3000;
  }
}

document.write(calculateCost(3.5));
GitHub で表示このプログラムを実行する