レッスン5：関数

⏱ 約25分やってみよう 1 クイズ 1

🎯 このレッスンで学ぶこと

functionで関数を定義して呼び出せます。
引数で関数に値を渡せます。
returnで関数から値を返せます。
アロー関数の書き方がわかります。

📖 前回の復習（レッスン4）

for (let i = 0; i < 回数; i++) で処理を繰り返す
配列は ["A", "B", "C"] の形で複数のデータをまとめる
配列のインデックスは 0 から始まり、配列.length で要素数を取得できる

📖 導入 — 同じ処理に名前をつけよう

プログラムを書いていると、同じ処理を何度も書きたい場面が出てきます。関数を使うと、処理に名前をつけて何度でも呼び出せます。一度書けば、どこからでも使いまわせる「便利な道具」を作るイメージです。

関数なし vs 関数あり:

// ❌ 関数なし — 同じ処理を何度も書く
console.log("こんにちは、田中さん！");
console.log("こんにちは、山田さん！");
console.log("こんにちは、佐藤さん！");

// ✅ 関数あり — 1回定義すれば何度でも使える
function greet(name) {
  console.log("こんにちは、" + name + "さん！");
}
greet("田中");
greet("山田");
greet("佐藤");

名前が増えても、関数ありなら1行追加するだけ。関数なしだと毎回全文を書き直す必要があります。

📝 関数の書き方

関数の定義と呼び出し

function キーワードを使って関数を定義します。定義しただけでは実行されません。呼び出し て初めて動きます。

function greet() {
  console.log("こんにちは！");
}

greet();  // → こんにちは！（何度でも呼び出せる）

💡 まずは引数なしの関数から！ 呼び出すだけで動きます。「処理に名前をつけて再利用する」感覚をつかみましょう。

引数：関数に値を渡す

関数を呼び出すときに渡す値を 引数（ひきすう） といいます。呼び出すたびに違う値を渡せます。

function greet(name) {
  console.log("こんにちは、" + name + "さん！");
}

greet("田中");  // → こんにちは、田中さん！
greet("山田");  // → こんにちは、山田さん！

💡 引数を使うと、同じ関数で違う結果を出せます。 「田中」「山田」と名前を変えるだけで、挨拶の内容が変わりますね。

戻り値：関数から値を返す

return を使うと、関数の処理結果を呼び出し元に返せます。return に達した時点で関数の処理は終了します。

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

const result = add(3, 5);
console.log(result);  // → 8

⚠️ return を書かないとどうなる？
関数に return がないと、戻り値は undefined になります。
function hello() { console.log("hi"); }
const x = hello(); // x は undefined
値を使いたいなら必ず return を書きましょう。

アロー関数

function を使わない、より短い書き方です。動作は同じです。

💡 アロー関数は function の省略形です。
まずは function で書けるようになることが大事！アロー関数は慣れてから使えばOKです。焦らなくて大丈夫。

💡 アロー関数と this：
基本的な使い方では同じように動きます。this の扱いが異なりますが、今は気にしなくてOKです。

// 通常の関数
function greet(name) {
  return "こんにちは、" + name + "さん！";
}

// アロー関数（同じ意味）
const greetArrow = (name) => "こんにちは、" + name + "さん！";

複数行のアロー関数:

処理が2行以上のときは { } で囲み、return を明示的に書きます。

const judge = (score) => {
  if (score >= 60) {
    return "合格";
  } else {
    return "不合格";
  }
};

💡 デフォルト引数:
引数にデフォルト値を設定できます。呼び出し時に省略すると、デフォルト値が使われます。
function greet(name = "ゲスト") { ... }
greet(); // → こんにちは、ゲストさん！
greet("田中"); // → こんにちは、田中さん！

▶ プレビュー

💻 やってみよう！

このレッスンでは、関数の動作確認に集中するため、JavaScriptをHTMLファイルの <script> タグに直接書きます。VS Codeで my-practice フォルダに新しい js-lesson5.html を作り、以下のコードを書いてください。（lesson4で作った js-lesson4.js は使いません）書き終えたら js-lesson5.html をダブルクリックしてブラウザで確認しましょう。

function greet(name) {
  return "こんにちは、" + name + "さん！";
}

function judge(score) {
  if (score >= 60) {
    return "合格";
  } else {
    return "不合格";
  }
}

console.log(greet("田中"));  // → こんにちは、田中さん！
console.log(greet("山田"));  // → こんにちは、山田さん！
console.log(judge(85));      // → 合格
console.log(judge(45));      // → 不合格

同じ関数を違う引数で何度も呼び出せることを確認しましょう！

✅ 正しく動作すると、コンソールに以下のように表示されます：
こんにちは、田中さん！
こんにちは、山田さん！
合格
不合格

自作課題に挑戦！

以下の関数を自分で作ってみましょう。

// 1. 長方形の面積を計算する関数
function calcArea(width, height) {
  // ここに return を書こう
}
console.log(calcArea(5, 3));  // → 15

// 2. 18歳以上かどうか判定する関数
function isAdult(age) {
  // ここに return を書こう（true か false を返す）
}
console.log(isAdult(20));  // → true
console.log(isAdult(15));  // → false

⚠️ よくあるミス

関数を定義しただけで呼び出し忘れる：function greet() { ... } と書いただけでは何も起きません。greet() と書いて呼び出す必要があります。
return と console.log を混同する：console.log は画面に表示するだけで、値を返しません。計算結果を他の場所で使いたいときは return を使いましょう。
引数の数が合わない：function add(a, b) と定義したのに add(3) と1つだけ渡すと、b が undefined になり、計算結果がおかしくなります。定義と呼び出しの引数の数を揃えましょう。