関数
関数の基本
数学における関数とは異なり、プログラミング言語における関数は、基本的には文のまとまりに名前を付けたものです。
次のプログラムを実行すると、こんにちは、世界！こんにちは、世界！ と表示されます。
// 関数を定義しておけば、
function greet() {
document.write("こんにちは、世界！");
}
// 後から何度も呼び出すことができます。
greet(); // こんにちは、世界！
greet(); // こんにちは、世界！
2 行目から 4 行目で関数を定義しています。
ここでは、{ と } で囲まれた文のまとまりに greet という名前を付けています。
7 行目と 8 行目で、関数 greet を 2 回呼び出しています。
greet(); のように書くことで、関数を呼び出すことができます。
これにより、こんにちは、世界！ が 2 回表示されます。
確認問題
はじめまして。 と自己紹介をする関数 introduceSelf を定義してください。
また、呼び出してください。
function introduceSelf() {
// ここに関数が行う処理を書いてください。
}
// ここで関数を呼び出してください。
解答例: 自己紹介
function introduceSelf() {
document.write("はじめまして。");
}
introduceSelf();
引数
関数の振る舞いを呼び出し時に変えるため、関数に引数を与えることができます。引数にはどんな値でも指定できます。
次のプログラムを実行すると、こんにちは、田中さん！こんにちは、鈴木さん！ と表示されます。
function greet(name) {
document.write("こんにちは、" + name + "さん！");
}
greet("田中"); // こんにちは、田中さん！
greet("鈴木"); // こんにちは、鈴木さん！
greet 関数には、name という引数が定義されています。
greet("田中"); のようにして関数を呼び出すと、"田中" という値が引数として指定されます。
この値は、関数内では name という引数として扱われます。
関数の中では引数は変数のように振る舞うため、document.write("こんにちは、" + name + "さん！"); を実行すると、こんにちは、田中さん！ が表示されます。
確認問題
名前を表す引数 name を受け取り、はじめまして。私の名前は〇〇です。 と自己紹介をする関数 introduceSelf を定義してください。
また、引数に "田中" を与えて呼び出してください。
function introduceSelf(name) {
// ここに関数が行う処理を書いてください。
}
// ここで関数を呼び出してください。
解答例: 自己紹介
function introduceSelf(name) {
document.write("はじめまして。私の名前は" + name + "です。");
}
introduceSelf("田中");
複数の引数
複数の引数を受け取る関数を定義することもできます。
次のプログラムを実行すると、おはよう、田中さん！こんにちは、鈴木さん！ と表示されます。
function greet(greetingMessage, name) {
document.write(greetingMessage + "、" + name + "さん！");
}
greet("おはよう", "田中");
greet("こんにちは", "鈴木");
greet("おはよう", "田中"); のようにして関数を呼び出すと、"おはよう" が greetingMessage という引数に、"田中" が name という引数にそれぞれ指定されます。
確認問題
name と age という引数を受け取り、はじめまして。私の名前は〇〇です。〇〇歳です。 と自己紹介 をする関数 introduceSelf を定義してください。
また、引数に "田中" と 12 を与えて呼び出してください。
// ここで関数を定義してください。
// ここで関数を呼び出してください。
解答例: 自己紹介
function introduceSelf(name, age) {
document.write(
"はじめまして。私の名前は" + name + "です。" + age + "歳です。",
);
}
introduceSelf("田中", 12);
戻り値
関数内から関数の呼び出し元に値を返すことができます。 また、この値を戻り値と呼びます。
次のプログラムを実行すると、1と2の和は3です。 と表示されます。
function add(a, b) {
let sum = a + b;
return sum;
}
let answer = add(1, 2);
document.write("1と2の和は" + answer + "です。"); // 1と2の和は3です。
return sum のようにすることで、そこで関数の実行を停止し、関数の呼び出し元に変数 sum の値を戻り値として返すことができます。そのため、add(1, 2) のように関数を呼び出すと、引数 a は 1、引数 b は 2となり、sum が 3 となるので、3 が戻り値となります。
このため、add(1, 2) は戻り値として返ってきた 3 になり、この値が answer に代入されます。
これにより、1と2の和は3です。 と表示されます。
確認問題
問題 1
先ほど作った関数 add を 2 回呼び出して、1と2の和は3で、3と4の和は7です。 と表示してください。
function add(a, b) {
let sum = a + b;
return sum;
}
let answer1 = /* ここで関数を呼び出し、1と2の和を求めてください。 */;
let answer2 = /* ここで関数を呼び出し、3と4の和を求めてください。 */;
document.write("1と2の和は" + answer1 + "で、3と4の和は" + answer2 + "です。");
解答 例: 足し算ゲーム
function add(a, b) {
let sum = a + b;
return sum;
}
let answer1 = add(1, 2);
let answer2 = add(3, 4);
document.write("1と2の和は" + answer1 + "で、3と4の和は" + answer2 + "です。");
問題 2
引数 a と b をとり、その積を戻り値として返す関数 multiply を定義してください。
また、引数に 3 と 4 を与えて呼び出してください。
function multiply(a, b) {
// ここに関数が行う処理を書いてください。
}
let answer = /* ここで関数を呼び出してください。 */;
document.write("3と4の積は" + answer + "です。");
解答例: 掛け算ゲーム
function multiply(a, b) {
let product = a * b;
return product;
}
let answer = multiply(3, 4);
document.write("3と4の積は" + answer + "です。");
演習問題
問題 1
あるテーマパークの入場料金は、12 歳未満なら 500 円、12 歳以上なら 1000 円です。
このテーマパークの入場料金を計算する関数を作ってみましょう。
年齢を表す引数 age を受け取り、12 未満なら 500、12 以上なら 1000 を戻り値として返す関数 calculateTicketPrice を定義してください。
また、引数に 12 を与えて呼び出してください。
function calculateTicketPrice(age) {
if (/* ここに条件を書いてください。 */) {
return /* ここに12歳未満の料金を書いてください。 */;
} else {
return /* ここに12歳以上の料金を書いてください。 */;
}
}
document.write("入場料金は" + calculateTicketPrice(12) + "円です。");
解答例: 入場料金
function calculateTicketPrice(age) {
if (age < 12) {
return 500;
} else {
return 1000;
}
}
document.write("入場料金は" + calculateTicketPrice(12) + "円です。");
問題 2
ある携帯会社の携帯電話料金は、データ使用量が 5 GB 未満ならデータ使用量 × 600 円、5 GB 以上なら 3000 円です。
携帯電話料金を計算する関数を作ってみましょう。
データ使用量を表す引数 monthlyDataUsage を受け取り、料金を戻り値として返す関数 calculateCost を定義してください。
また、データ使用量が 3 GB の時の料金を計算してください。
function calculateCost(monthlyDataUsage) {
// ここに関数が行う処理を書いてください。
}
document.write("携帯電話料金は" + calculateCost(3) + "円です。");
解答例: 携帯電話料金
function calculateCost(monthlyDataUsage) {
if (monthlyDataUsage < 5) {
return monthlyDataUsage * 600;
} else {
return 3000;
}
}
document.write("携帯電話料金は" + calculateCost(3) + "円です。");