関数
初級読み方：かんすう｜英語：Function
処理をまとめて名前をつけたもので、function で定義し、名前() で呼び出すよ。
やさしい説明
関数（かんすう）とは、処理をまとめて名前をつけたものです。「レシピ」のようなもので、材料（引数）を渡すと料理（戻り値）が返ってきます。
同じ処理を何度も書く代わりに、関数にまとめて呼び出します。コードが短くなり、修正も1箇所で済みます。
JavaScriptでは function キーワードか、アロー関数（=>）で定義します。
具体例・使い方
// 関数の定義
function greet(name) {
return `こんにちは、${name}さん！`;
}
// 関数の呼び出し
greet("太郎"); // "こんにちは、太郎さん！"
// アロー関数（短い書き方）
const add = (a, b) => a + b;
add(3, 5); // 8関数の3つの部品
| 部品 | 意味 | レシピの例え |
|---|---|---|
| 引数（ひきすう） | 関数に渡す入力 | 材料 |
| 処理 | 関数の中でやること | 調理手順 |
| 戻り値（return） | 関数が返す結果 | 完成した料理 |
いつ使う？
- 同じ処理を2回以上書きそうなとき（まとめて1箇所に）
- 処理に名前をつけてコードを読みやすくしたいとき
- 値を計算して返したいとき
- ボタンクリックなどのイベント時に実行したいとき
関数の最大のメリットは 「直すのが1箇所で済む」こと。同じ処理をコピペで何箇所にも書くと、修正のたびに全部直す必要があります。関数にまとめておけば、1回直すだけで全部に反映されます。
間違いやすいポイント
❌ returnを書き忘れる
return がないと関数は undefined を返します。「計算したのに結果が使えない」ときは return 忘れを疑いましょう。
// ❌ returnがないとundefinedが返る
function double(x) { x * 2; }
double(5); // undefined
// ✅ returnで値を返す
function double(x) { return x * 2; }
double(5); // 10❌ 関数を「呼び出す」のと「渡す」のを混同する
greet() はその場で実行、greet（カッコなし）は関数そのものを指します。addEventListener('click', greet) はカッコなしが正解。greet() と書くと登録時に即実行されてしまいます。
よくある疑問
Q: 関数とメソッドの違いは？
A: メソッドはオブジェクトに属する関数です。console.log() の log がメソッドです。単独で呼べるのが関数、オブジェクト.で呼ぶのがメソッドです。
Q: 引数と戻り値とは？
A: 引数は関数に渡すデータ（入力）、戻り値はreturnで返すデータ（出力）です。function add(a, b) { return a + b; } ではa,bが引数、a+bが戻り値です。
Q: 関数の書き方は何種類ある？
A: ①function宣言 ②関数式（const fn = function(){}）③アロー関数（const fn = () => {}）の3種類。初心者はfunction宣言から始めましょう。
関連用語
📖 関連レッスン
レッスンを見る →