JavaScriptの引数：関数に値を渡して柔軟に処理する

関数の基本を学んだ次は「引数」です。引数を使うことで、関数に値を渡して、より柔軟な処理ができるようになります。

引数とは

引数は、関数に与える追加情報のようなものです。関数を呼び出すときに値を渡すことで、関数の処理内容を変えることができます。

引数なしの関数（復習）

const greet = () => {
  console.log("こんにちは、太郎さん");
};

greet();  // こんにちは、太郎さん

この関数は常に「太郎さん」に挨拶します。他の人に挨拶したい場合、新しい関数を作る必要があります。

引数ありの関数

const greet = (name) => {
  console.log(`こんにちは、${name}さん`);
};

greet("太郎");  // こんにちは、太郎さん
greet("花子");  // こんにちは、花子さん
greet("次郎");  // こんにちは、次郎さん

引数を使えば、1つの関数で様々な値に対応できます。

引数を受け取る関数の定義

構文: (引数名) => { 処理 }

// 引数を1つ受け取る
const introduce = (name) => {
  console.log(`私の名前は${name}です`);
};

introduce("太郎");  // 私の名前は太郎です

() の中に引数名を書くことで、引数を受け取ることができます。

引数を受け取る関数の呼び出し

構文: 定数名(値)

const greet = (name) => {
  console.log(`こんにちは、${name}さん`);
};

// 関数を呼び出すときに値を渡す
greet("太郎");  // 値「太郎」が引数nameに代入される

関数を呼び出すときに () の中に値を書くことで、その値が引数に代入されます。

関数内で引数を使用する

引数は、関数内で変数や定数と同じように使えます。

const calculateArea = (width, height) => {
  const area = width * height;  // 引数を計算に使う
  console.log(`面積は${area}です`);
};

calculateArea(5, 10);  // 面積は50です
calculateArea(3, 7);   // 面積は21です

複数の引数を受け取る

関数は複数の引数を受け取ることができます。

構文: (引数1, 引数2, ...) => { 処理 }

const introduce = (name, age, city) => {
  console.log(`私の名前は${name}です`);
  console.log(`年齢は${age}歳です`);
  console.log(`${city}に住んでいます`);
};

introduce("太郎", 25, "Tokyo");
// 私の名前は太郎です
// 年齢は25歳です
// Tokyoに住んでいます

複数の引数はカンマ , で区切ります。

引数の順番

複数の引数を受け取る場合、**左から順番に第1引数、第2引数、第3引数…**となります。

const showInfo = (name, age) => {
  console.log(`名前: ${name}`);
  console.log(`年齢: ${age}`);
};

// 第1引数に「太郎」、第2引数に「25」が代入される
showInfo("太郎", 25);
// 名前: 太郎
// 年齢: 25

重要: 渡す引数の順番と、関数を定義した引数の順番は同じでなければなりません。

const introduce = (name, age) => {
  console.log(`${name}さん、${age}歳`);
};

// ✅ 正しい順番
introduce("太郎", 25);  // 太郎さん、25歳

// ❌ 順番が逆
introduce(25, "太郎");  // 25さん、太郎歳（意図しない結果）

引数を使うメリット

1. 柔軟性が増す

// 引数なしだと、値ごとに関数を作る必要がある
const greetTaro = () => {
  console.log("こんにちは、太郎さん");
};

const greetHanako = () => {
  console.log("こんにちは、花子さん");
};

// 引数ありなら、1つの関数で対応できる
const greet = (name) => {
  console.log(`こんにちは、${name}さん`);
};

2. 再利用性が高まる

const calculateTax = (price) => {
  const tax = price * 0.1;
  console.log(`税額: ${tax}円`);
};

// 様々な価格に対応できる
calculateTax(1000);  // 税額: 100円
calculateTax(5000);  // 税額: 500円
calculateTax(300);   // 税額: 30円

疑問：第2引数を渡さない場合はどうなる？

今回の学習で疑問に思ったのが、「複数の引数を定義した関数で、第2引数を渡さなかったらどうなるのか？」という点です。

const introduce = (name, age) => {
  console.log(`名前: ${name}`);
  console.log(`年齢: ${age}`);
};

// 第1引数だけ渡す
introduce("太郎");
// 名前: 太郎
// 年齢: undefined

結果は undefined になります。

理由: 引数が渡されなかった場合、その引数には自動的に undefined が代入されるからです。

const showInfo = (name, age, city) => {
  console.log(`名前: ${name}`);
  console.log(`年齢: ${age}`);
  console.log(`都市: ${city}`);
};

showInfo("太郎", 25);
// 名前: 太郎
// 年齢: 25
// 都市: undefined（第3引数が渡されていない）

この問題を回避するには、デフォルト引数（後の学習で登場）を使うか、関数内で undefined チェックをする必要があります。

Pythonとの比較

項目PythonJavaScript
引数の定義def 関数名(引数):(引数) => {}
複数の引数カンマで区切るカンマで区切る
引数なし呼び出しエラーになることがあるundefined になる
# Python
def greet(name):
    print(f"こんにちは、{name}さん")

greet("太郎")

// JavaScript
const greet = (name) => {
  console.log(`こんにちは、${name}さん`);
};

greet("太郎");

今日の学びのポイント

  • 引数: 関数に与える追加情報
  • 定義: (引数名) => { 処理 }
  • 呼び出し: 定数名(値)
  • 複数の引数: カンマで区切る
  • 引数の順番: 左から第1引数、第2引数…
  • 渡さない場合: undefined になる

引数を使うことで、関数はさらに強力なツールになります。次は、関数から値を返す「戻り値（return）」を学びます。

コメント