「お湯をわかして、麺を入れて、3分待って、スープを溶かす」。この手順に「ラーメンを作る」と名前がついているから、わたしたちは「ラーメン作って」のひとことで頼めます。プログラミングでも同じことができます。手順のまとまりに名前をつける——それが関数です。
書いてみよう
function greet() {
console.log("こんにちは、しまちゃんです！");
}
greet();
greet();コンソールには、あいさつが2回表示されます。
| 部分 | 意味 |
|---|---|
function | 「手順書を作るよ」の合図 |
greet | 手順書につけた名前 |
{ } の中 | 手順の中身 |
greet() | 手順書を実行する呼び出し |
材料をわたせる：引数
呼び出すときに( )へ材料をわたすと、手順の中で使えます。この材料を引数（ひきすう）と呼びます。
function greet(name) {
console.log("こんにちは、" + name + "さん！");
}
greet("しまちゃん");
greet("ひよこ");同じ手順書なのに、「こんにちは、しまちゃんさん！」「こんにちは、ひよこさん！」と結果が変わります。手順は1つ、材料しだいで結果が変わる——関数がぐっと便利になる瞬間です。
結果を返せる：return
計算した結果を呼び出し元に返すこともできます。それがreturnです。
function double(number) {
return number * 2;
}
let answer = double(5);
console.log(answer);double(5)は10という結果に化けて、answerにしまわれます。「材料を入れると、加工した結果が出てくる機械」のイメージです。
じつは、もう使っています
ここまで読んで、見覚えのある形に気づいたでしょうか。しまちゃんのページのscript.jsに、こんなコードを書きましたね。
form.addEventListener("submit", function (event) {
event.preventDefault();
thanks.textContent = thanksMessage;
});このfunction (event) { ... }、まさに関数です。名前をつけずにその場で作って、「submitが起きたらこの手順書を実行してね」とaddEventListenerにわたしていたのです（名前がないので無名関数と呼ばれます）。(event)は引数で、起きたできごとの詳しい情報が入っています。だからevent.preventDefault()と書けたわけです。
ずっと使ってた「あの形」の正体、じつはわたしだったぴよ！
このレッスンのまとめ
- 関数＝名前をつけた手順書。作る（
function）と呼び出す（名前()）の2段階 ( )で引数（材料）をわたせて、returnで結果を返せる- しまちゃんのページの
function (event)も関数（名前のない無名関数）