JavaScript | 基礎構文：関数 – 引数

JavaScript JavaScript
2025.12.14
スポンサーリンク

引数ってそもそも何者？

引数（ひきすう）は、
「関数に渡す“入力”」 です。

関数は「処理のレシピ」ですが、
毎回まったく同じことしかしないと不便ですよね。

「誰に挨拶するか」
「いくつ足すか」
「どのメッセージを表示するか」

こういった“毎回変わる部分”を、
外から渡せるようにしたものが引数です。

一番シンプルな引数付き関数

引数を1つ持つ関数

まずは、挨拶する相手の名前を引数で受け取る例です。

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

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

function greet(name) { ... } の name が「引数」です。
greet("太郎") と呼び出したとき、
関数の中では name に "太郎" が入っています。

ここが重要です。
「関数の定義側で書くのが“引数名”、呼び出す側で渡すのが“引数の値”」 です。
名前はレシピの中で使うラベル、
値は実際に渡す材料、というイメージです。

複数の引数を持つ関数

足し算の例

引数は複数持てます。

function add(a, b) {
  console.log(a + b);
}

add(3, 5);   // 8
add(10, 20); // 30
JavaScript

定義側では a, b とカンマ区切りで並べます。
呼び出し側でも add(3, 5) のように、同じ順番で値を渡します。

ここで大事なのは、
「引数は“位置”で対応する」 ということです。

add(3, 5) のときは a = 3, b = 5
add(5, 3) のときは a = 5, b = 3

順番を変えると意味も変わります。
だからこそ、引数の順番と名前は「読み手にとって自然な順」にするのが大事です。

引数と戻り値をセットで考える

「入力を受け取って、結果を返す」関数

引数は「入力」、return は「出力」です。

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

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

ここでは、

引数 a, b に「足したい数」を渡す
関数の中で a + b を計算する
return で結果を返す
呼び出し側でその結果を受け取る

という流れになっています。

ここが重要です。
関数を設計するときは「何を入力として受け取り、何を結果として返すか」をセットで考える。
引数は“外からコントロールできる部分”です。

引数が足りない／多すぎるとどうなるか

JavaScript のゆるさを知っておく

JavaScript は、引数の数に厳しくありません。

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

console.log(add(1));        // NaN
console.log(add(1, 2, 3));  // 3
JavaScript

add(1) のとき、b は undefined になります。
1 + undefined は NaN（数ではない）です。

add(1, 2, 3) のとき、3つ目の引数は無視されます。

ここが重要です。
「引数の数が合わなくてもエラーにならない」
これは便利でもあり、バグの温床でもあります。

だからこそ、
「この関数は何個の引数を期待しているのか」を意識して書くことが大事です。

デフォルト引数で「足りないときの値」を決める

引数が省略されたときの“標準値”を決める

「引数が渡されなかったときは、この値を使ってほしい」
というときに便利なのが「デフォルト引数」です。

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

greet("太郎");  // こんにちは、太郎さん
greet();        // こんにちは、ゲストさん
JavaScript

greet() のように引数なしで呼ばれた場合、
name には "ゲスト" が入ります。

もう一つ。

function multiply(a, b = 1) {
  return a * b;
}

console.log(multiply(5));    // 5（5 * 1）
console.log(multiply(5, 2)); // 10
JavaScript

ここが重要です。
デフォルト引数は「引数が省略されたときの意味」を明確にするための道具。
「省略されたらどうなるか」を自分で決めておくと、関数が扱いやすくなります。

オブジェクトを引数にして「名前付き引数」っぽくする

引数が増えてきたときの整理術

引数が増えすぎると、呼び出し側が読みにくくなります。

function createUser(name, age, isAdmin, country, email) {
  // ...
}
JavaScript

呼び出し側はこうなります。

createUser("太郎", 20, false, "JP", "taro@example.com");
JavaScript

パッと見て「どれがどの意味か」が分かりづらいですよね。

そこでよく使われるのが、
「オブジェクトを1つ引数にして、その中にプロパティとして渡す」 というパターンです。

function createUser(options) {
  console.log(options.name);
  console.log(options.age);
  console.log(options.isAdmin);
}

createUser({
  name: "太郎",
  age: 20,
  isAdmin: false,
});
JavaScript

さらに、分割代入を使うとこう書けます。

function createUser({ name, age, isAdmin }) {
  console.log(name, age, isAdmin);
}

createUser({
  name: "太郎",
  age: 20,
  isAdmin: false,
});
JavaScript

ここが重要です。
「引数が多くなってきたら、オブジェクト1つにまとめて“名前付き引数”っぽくする」
これは実務でよく使うテクニックです。

可変長引数（レストパラメータ）

「いくつ来るか分からない引数」を受け取りたいとき

「引数が何個来るか分からないけど、全部まとめて扱いたい」
というときに使うのがレストパラメータです。

function sum(...numbers) {
  let total = 0;
  for (const n of numbers) {
    total += n;
  }
  return total;
}

console.log(sum(1, 2));        // 3
console.log(sum(1, 2, 3, 4));  // 10
JavaScript

...numbers がレストパラメータです。
渡された引数が配列として numbers に入ります。

ここが重要です。
レストパラメータは「引数の数が可変な関数」を作るための仕組み。
... がついていたら「ここに残り全部が配列で入る」と覚えておくとよいです。

実務での「引数」の考え方

関数の“インターフェース”として設計する

引数は、
「この関数をどう使ってほしいか」を表すインターフェース です。

例えば、

function fetchUsers(page, limit) { ... }
JavaScript

と書くとき、
「ページ番号と1ページあたりの件数を渡してね」という意図が伝わります。

もし、

function fetchUsers(options) { ... }
JavaScript

として、

fetchUsers({ page: 1, limit: 20 });
JavaScript

と呼ぶなら、
「オプションをまとめて渡すスタイルなんだな」と分かります。

ここが重要です。
引数は「関数の使い方」を決めるもの。
“何を引数にするか”“どういう形で渡させるか”を意識して設計すると、
関数が他人から見ても使いやすくなります。

初心者として「引数」で本当に押さえてほしいこと

引数は、
「関数に渡す入力」。

定義側では「名前」を書き、
呼び出し側では「値」を渡す。

複数あるときは「順番」で対応するので、
順番と名前は意味が分かりやすいように決める。

足りないと undefined、多い分は無視される。
必要ならデフォルト引数で「省略時の意味」を決める。

引数が増えてきたら、
オブジェクト1つにまとめて「名前付き引数」っぽくするのが定番。

そして何より、
関数を書くときに「この関数は、外から何を渡してもらえれば仕事ができるか？」
「逆に、何は関数の中に閉じ込めておくべきか？」
と考える癖をつけると、
引数の設計がどんどん上手くなっていきます。

もしよければ、
今あなたがよく書いている処理を1つ関数にして、
「どこを引数にするか」を一緒に考えてみませんか。

次へ
12
スポンサーリンク
タイトルとURLをコピーしました