JS 関数パラメータの順番とデータ型

JPKODA 編集部 May 7, 2026

以前のモジュールでは、JavaScript 関数の基礎として、宣言方法、呼び出し、および基本的なスコープについて学びました。今回は、関数がどのように情報を受け取り、処理するのかを深く掘り下げていきます。

関数に送る値は 実引数 (Arguments) と呼ばれ、関数定義側でそれらを受け取るためのプレースホルダーは 仮引数 (Parameters) と呼ばれます。

関数を期待通りに動作させるための鍵は、JavaScript が実引数と仮引数をどのようにマッチングさせるか、特にその「順番」と「データ型」が与える影響を理解することにあります。これをマスターすることで、関数が正しいデータを処理できるようになり、バグの原因となる一般的な落とし穴を避けることができます。

1. パラメータの順番の重要性

パラメータを持つ関数を定義する際、パラメータをリストアップする順番は非常に重要です。JavaScript は、渡された実引数と関数の仮引数を、位置（ポジション） に基づいて厳格にマッチングさせます。

提供した最初の実引数は最初の仮引数に、2番目の実引数は2番目の仮引数に代入されます。この位置によるマッピングが、関数がデータを受け取り処理する際の基本となります。

1.2 位置マッピングの詳細

関数を、特定の入力欄があるフォームだと想像してください。各仮引数は項目のラベルであり、提供する実引数はその項目に入力するデータです。もし「姓」の欄に自分の「名」を入力してしまったら、フォームはデータを受け取ることはできますが、あなたの真の意図を理解することはできません。

JavaScript の動作も同様です。マッチングの際、仮引数の名前（変数名）は考慮されず、位置のみが考慮されます。

例を見てみましょう：

// 2つの仮引数を持つ関数の定義：'firstName'（名）と 'lastName'（姓）
function greetUser(firstName, lastName) {
  console.log(`こんにちは、 ${firstName} ${lastName}さん！`);
}

// 関数の呼び出し
greetUser("アリス", "スミス");
// 出力: こんにちは、 アリス スミスさん！
// "アリス" (第1実引数) が 'firstName' (第1仮引数) にマッピングされる
// "スミス" (第2実引数) が 'lastName' (第2仮引数) にマッピングされる

greetUser("ボブ", "ジョンソン");
// 出力: こんにちは、 ボブ ジョンソンさん！

greetUser 関数において、firstName は最初の仮引数、lastName は2番目の仮引数です。greetUser("アリス", "スミス") を呼び出すと、「アリス」が最初の実引数として firstName に、「スミス」が2番目の実引数として lastName に代入されます。出力結果はこのマッピングを正しく反映しています。

では、実引数の順番を入れ替えるとどうなるか見てみましょう：

function greetUser(firstName, lastName) {
  console.log(`こんにちは、 ${firstName} ${lastName}さん！`);
}

greetUser("スミス", "アリス");
// 出力: こんにちは、 スミス アリスさん！
// "スミス" (第1実引数) は依然として 'firstName' にマッピングされる
// "アリス" (第2実引数) は依然として 'lastName' にマッピングされる

直感的には「スミス」が姓で「アリス」が名だとわかりますが、JavaScript はそのような推測を行いません。あくまで順番に従います。リスト内の位置によって「スミス」が firstName になり、「アリス」が lastName になってしまいました。これは、関数のロジックを正しく保つために、パラメータの順番を理解し遵守することがいかに重要であるかを示しています。

2. 不足している引数の処理

関数を呼び出す際に、関数が期待している仮引数の数よりも少ない実引数しか渡さなかった場合、どうなるでしょうか？

JavaScript はこの状況でエラーを出しません。その代わり、対応する実引数がない仮引数には自動的に undefined が代入されます。

例を見てみましょう：

function displayDetails(name, age, city) {
  console.log(`名前: ${name}`);
  console.log(`年齢: ${age}`);
  console.log(`都市: ${city}`);
}

// ケース 1: すべての引数を提供
displayDetails("田中", 30, "東京");
/*
出力:
名前: 田中
年齢: 30
都市: 東京
*/

// ケース 2: 引数が1つ不足 (city)
displayDetails("鈴木", 25);
/*
出力:
名前: 鈴木
年齢: 25
都市: undefined
*/
// 'city' 仮引数は第3実引数が提供されなかったため 'undefined' を受け取る

// ケース 3: さらに引数が不足
displayDetails("佐藤");
/*
出力:
名前: 佐藤
年齢: undefined
都市: undefined
*/
// 'age' と 'city' の両方が 'undefined' を受け取る

この挙動は重要です。なぜなら、関数が undefined を処理するように設計されていない場合、予期しない結果を招く可能性があるからです。例えば、undefined に対して算術演算を行うと NaN (Not a Number) になります。undefined かどうかをチェックするか、デフォルト値（今後のレッスンで学ぶ「デフォルトパラメータ」）を提供することが良い習慣です。

3. 余分な引数の処理

逆に、関数の仮引数よりも多い実引数を渡した場合はどうなるでしょうか？

JavaScript は単純に余分な実引数を無視します。それらは内部的には関数に渡されていますが（arguments オブジェクトという古い機能でアクセス可能ですが、これについては後ほど説明します）、名前付きの仮引数には直接代入されません。

function calculateSum(num1, num2) {
  console.log(`最初の数字: ${num1}`);
  console.log(`2番目の数字: ${num2}`);
  return num1 + num2;
}

const result = calculateSum(10, 20, 30, 40);
console.log(`合計: ${result}`);

/*
出力:
最初の数字: 10
2番目の数字: 20
合計: 30
*/
// '30' と '40' は余分な実引数であり、名前付き仮引数 'num1' と 'num2' には無視される

余分な引数が名前付き仮引数に無視されるからといって、それらが存在しないわけではありません。単に明示的なパラメータ名にマッピングされていないだけです。モダンな JavaScript 開発におけるベストプラクティスは、実引数の数と仮引数の数を正確に一致させるように関数を設計することです。余分な引数を提供している場合、それは関数の期待される入力に対する誤解か、あるいは関数をより構造化された方法（例えば、多くの関連パラメータを1つのオブジェクトにまとめるなど）でリファクタリングすべきタイミングかもしれません。

4. パラメータのデータ型を理解する

他のいくつかのプログラミング言語とは異なり、JavaScript は 動的型付け (Dynamically Typed) 言語です。これは、関数を定義する際にパラメータのデータ型を宣言する必要がないことを意味します。

1つのパラメータで、数値、文字列、真偽値、オブジェクト、配列、関数、さらには null や undefined など、あらゆる型のデータを受け取ることができます。この柔軟性は強力ですが、同時に関数が期待するデータ型を受け取り処理しているかを確認する責任が開発者に生じます。

4.1 動的型付けの実例

JavaScript が同じ関数の仮引数に渡された異なるデータ型をどのように処理するか見てみましょう。

function processData(input) {
  console.log(`受信した入力: ${input}`);
  console.log(`入力の型: ${typeof input}`);

  // 想定される型に基づいて操作を試行
  if (typeof input === 'number') {
    console.log(`2倍の結果: ${input * 2}`);
  } else if (typeof input === 'string') {
    console.log(`大文字変換: ${input.toUpperCase()}`);
  } else {
    console.log("入力は数値でも文字列でもないため、特定の操作は行いません。");
  }
  console.log('---');
}

processData(10);
/*
出力:
受信した入力: 10
入力の型: number
2倍の結果: 20
---*/

processData("こんにちは");
/*
出力:
受信した入力: こんにちは
入力の型: string
大文字変換: こんにちは
---*/

processData(true);
/*
出力:
受信した入力: true
入力の型: boolean
入力は数値でも文字列でもないため、特定の操作は行いません。
---*/

processData([1, 2, 3]);
/*
出力:
受信した入力: 1,2,3
入力の型: object
入力は数値でも文字列でもないため、特定の操作は行いません。
---*/

ご覧の通り、processData 内の input パラメータは、さまざまな型の値を正常に受け取り、報告することができます。typeof 演算子は、実行時（Runtime）に変数の型をチェックするための非常に便利なツールであり、異なる入力に適応したり検証したりする堅牢な関数を書くのに役立ちます。

4.2 型強制 (Type Coercion) と潜在的な問題

JavaScript の微妙な挙動の一つに 型強制 (Type Coercion) があります。これは、ある操作が特定のデータ型を期待しているときに、JavaScript が自動的に一つのデータ型を別の型に変換することです。これは便利な場合もありますが、予期せぬ挙動を招くこともあります。

2つの数値を足すように設計された関数を考えてみましょう：

function addNumbers(a, b) {
  console.log(`aの型: ${typeof a}, bの型: ${typeof b}`);
  return a + b;
}

console.log(`結果 1: ${addNumbers(5, 3)}`);
// 出力: aの型: number, bの型: number, 結果 1: 8 (正しい)

console.log(`結果 2: ${addNumbers("5", 3)}`);
// 出力: aの型: string, bの型: number, 結果 2: 53 (加算エラー！)
// JavaScript は数値の 3 を文字列の "3" に型強制し、文字列の結合を行いました。

console.log(`結果 3: ${addNumbers(5, "3")}`);
// 出力: aの型: number, bの型: string, 結果 3: 53 (加算エラー！)

console.log(`結果 4: ${addNumbers("Hello", " World")}`);
// 出力: aの型: string, bの型: string, 結果 4: Hello World (結合として正しい)

console.log(`結果 5: ${addNumbers(true, 1)}`);
// 出力: aの型: boolean, bの型: number, 結果 5: 2
// 'true' が数値の 1 に型強制されました。

結果 2 と 結果 3 では、関数名 addNumbers が数値の加算を示唆しているにもかかわらず、文字列の引数を渡したことで文字列の結合が発生しました。これは JavaScript の + 演算子が、オペランド（演算対象）の型に応じて加算または結合を実行するためです。少なくとも一方のオペランドが文字列であれば、結合が実行されます。

このような問題（特に数値演算）を避けるためには、異なる入力が予想される場合に、入力を期待する型に明示的に変換するか、検証を行うのがベストプラクティスです。数値の場合、Number()、parseInt()、parseFloat() 関数を使用できます。

function strictAddNumbers(a, b) {
  const numA = Number(a); // 明示的に数値へ変換
  const numB = Number(b); // 明示的に数値へ変換

  // 変換結果が有効な数値かどうかをチェック
  if (isNaN(numA) || isNaN(numB)) {
    console.error("エラー: 両方の引数は数値に変換可能である必要があります。");
    return NaN; // 無効な結果を示す
  }

  console.log(`厳密な加算: numAの型: ${typeof numA}, numBの型: ${typeof numB}`);
  return numA + numB;
}

console.log(`厳密な結果 1: ${strictAddNumbers(5, 3)}`);       // 出力: 8
console.log(`厳密な結果 2: ${strictAddNumbers("5", 3)}`);     // 出力: 8
console.log(`厳密な結果 3: ${strictAddNumbers("abc", 3)}`);   // 出力: エラー... NaN

このような明示的な型変換と検証により、strictAddNumbers 関数はより堅牢で予測可能なものになります。

4.3 パラメータ型のベストプラクティス

意図を明確にする: 期待するデータの型を示すようにパラメータに名前を付けます（例: userName, userAge, isValid）。
入力を検証する: 重要な操作を行ったり外部システムとやり取りする関数では、関数の冒頭でパラメータが期待通りの型であるかチェックすることを検討してください。typeof、Array.isArray()、instanceof、またはカスタムの検証ロジックが使用できます。
ドキュメント化: 特に大規模なプロジェクトや共有コードベースでは、JSDoc などのコメントを使用して各パラメータの期待される型と用途を記録します。
厳密等価演算子 (===) を使用する: 関数内で値を比較する際は、比較中の予期せぬ型強制を避けるため、常に ==（等価）ではなく ===（厳密等価）を使用してください。

パラメータの型に注意を払い、検証を組み合わせることで、JavaScript コードの信頼性とメンテナンス性を大幅に向上させることができます。

5. 詳尽的な実戦例とデモンストレーション

パラメータの順番と型の理解を組み合わせて、より包括的な例を見てみましょう。

5.1 例 1：ユーザープロフィールのサマリー作成

ユーザーの詳細情報を受け取り、サマリーを生成する関数を作成します。この関数は正しいパラメータの順番に強く依存します。

/**
 * ユーザープロフィールのサマリー文字列を生成する。
 * パラメータは特定の順番で並んでいることを期待。
 * @param {string} name - ユーザーのフルネーム。
 * @param {number} age - ユーザーの年齢。
 * @param {string} email - ユーザーのメールアドレス。
 * @param {boolean} isActive - ユーザーアカウントが有効かどうか。
 * @returns {string} フォーマットされたプロフィールサマリー。
 */
function createUserSummary(name, age, email, isActive) {
  // 入力の型を検証（堅牢性を高める良い習慣）
  if (typeof name !== 'string' || name.trim() === '') {
    return "エラー: 名前は空でない文字列である必要があります。";
  }
  if (typeof age !== 'number' || age <= 0) {
    return "エラー: 年齢は正の数である必要があります。";
  }
  if (typeof email !== 'string' || !email.includes('@')) {
    return "エラー: メールアドレスは有効な形式である必要があります。";
  }
  if (typeof isActive !== 'boolean') {
    return "エラー: isActive は真偽値（boolean）である必要があります。";
  }

  const status = isActive ? "有効" : "無効";
  return `ユーザー: ${name}, 年齢: ${age}, メール: ${email}, ステータス: ${status}`;
}

// 正しい使用法: すべての引数が期待通りの順番と型で提供されている
console.log(createUserSummary("田中太郎", 30, "[email protected]", true));
// 出力: ユーザー: 田中太郎, 年齢: 30, メール: [email protected], ステータス: 有効

// 'age' と 'email' の順番が逆 - 検証で型エラーが発生する
console.log(createUserSummary("佐藤次郎", "[email protected]", 25, false));
// 出力: エラー: 年齢は正の数である必要があります。
// 解説: "[email protected]" が 'age' として渡され、文字列であるため年齢検証をパスしない。

// 引数が一つ不足 - 'isActive' が undefined になり、検証に失敗する
console.log(createUserSummary("鈴木花子", 45, "[email protected]"));
// 出力: エラー: isActive は真偽値である必要があります。
// 解説: 'isActive' は `undefined` を受け取り、型チェックに合格しない。

// 余分な引数を提供 - 名前付き仮引数に無視される
console.log(createUserSummary("中村七郎", 28, "[email protected]", true, "追加データ"));
// 出力: ユーザー: 中村七郎, 年齢: 28, メール: [email protected], ステータス: 有効
// 解説: "追加データ" は余分な実引数であり、無視される。

この例は、特に検証が含まれる場合に、パラメータの順番と型を厳格に守ることがいかに重要であるかを明確に示しています。検証チェックを行うことで、型エラーや引数の不足による問題を早期にキャッチでき、関数をより堅牢にできます。

5.2 例 2：幾何学の面積計算（潜在的な型強制問題を含む）

長方形の面積を計算する関数を作成します。これは型の感度を浮き彫りにします。

/**
 * 長方形の面積を計算する。
 * @param {number} width - 幅。
 * @param {number} height - 高さ。
 * @returns {number|string} 面積、または入力が無効な場合はエラーメッセージ。
 */
function calculateRectangleArea(width, height) {
  // 基本的な型チェックと検証
  if (typeof width !== 'number' || typeof height !== 'number') {
    return "エラー: 幅と高さは両方とも数値である必要があります。";
  }
  if (width <= 0 || height <= 0) {
    return "エラー: 幅と高さは両方とも正の数である必要があります。";
  }
  return width * height;
}

// 正しい使用法
console.log(`面積 1: ${calculateRectangleArea(10, 5)}`); // 出力: 面積 1: 50

// 'height' の型が正しくない
console.log(`面積 2: ${calculateRectangleArea(7, "4")}`);
// 出力: 面積 2: エラー: 幅と高さは両方とも数値である必要があります。
// 解説: 検証により "4" が文字列であることが判明し、文字列との乗算を防止した。

// 正しい使用法（浮動小数点数）
console.log(`面積 3: ${calculateRectangleArea(12.5, 8.2)}`); // 出力: 面積 3: 102.5

// 引数が一つ不足
console.log(`面積 4: ${calculateRectangleArea(6)}`);
// 出力: 面積 4: エラー: 幅と高さは両方とも数値である必要があります。
// 解説: 'height' が undefined であり、'number' 型ではないため。

この関数では、typeof チェックが極めて重要です。もしこれがなければ、calculateRectangleArea(7, "4") は 7 * "4" を試行します。JavaScript は "4" を数値の 4 に型強制し、一見正しそうな 28 を返してしまいますが、これは予期した型安全性をバイパスしています。明示的な型チェックにより、暗黙の型強制を防ぎ、無効な入力に対してエラーを返すことで、関数の予測可能性と安全性を高めることができます。