🚀 プログラミング学習

レッスン5：関数

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

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

📝 関数の書き方

関数の定義と呼び出し

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

アロー関数

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

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

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

💻 やってみよう！

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));      // → 不合格

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

📌 まとめ

🚀 次のレッスンへ

次のレッスンでは、JavaScriptでHTMLの要素を操作する「DOM操作」を学びます！

🔍 もっと調べてみよう：「JavaScript 関数 定義 呼び出し」で検索してみよう。わからないことはどんどん検索する習慣をつけよう！
← JavaScriptコース一覧に戻る