【JavaScript】引数とは？初心者向けにわかりやすく解説

フロントエンド開発•2025/2/15

はじめに

JavaScriptの関数を使ううえで欠かせない要素として、引数があります。
引数とは、関数を呼び出す際に外部から渡す値のことを指します。
たとえば、数値や文字列、オブジェクトなど、さまざまな型の値を渡すことで、関数の動作を柔軟に変化させることが可能です。

しかし、初めてプログラミングに触れる方にとっては「引数」という言葉自体が聞き慣れないかもしれませんね。
本記事では初心者の方にもわかりやすいように、JavaScriptでの引数の使い方や仕組みを丁寧に解説していきます。
具体的なコード例と合わせて、実務でも役立つ視点を交えながら説明しますので、ぜひ参考にしてみてください。

この記事を読むとわかること

JavaScriptの関数と引数の基本的な関係
引数の省略やデフォルト値設定の仕組み
複数の引数をまとめる方法 (Restパラメータなど)
argumentsオブジェクトの特徴と使いどころ
実務でよく使われる引数の設計パターン

ここでは細かな概念だけでなく、実際にコードを動かす際に遭遇しやすいポイントを中心に紹介します。
しっかり押さえておくことで、より意図した動きをするアプリケーションを組み立てやすくなります。

JavaScriptにおける引数の基本

JavaScriptでは、関数を宣言して呼び出す際に、外部から値を受け取る仕組みとして引数が活用されています。
たとえば、以下のようなコード例を見てみましょう。


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

greet("山田"); // 「こんにちは、山田さん」と表示

このコードでは、関数 greet が引数 name を受け取り、コンソールにあいさつを出力しています。
ポイントは、呼び出し時に "山田" のような文字列を渡せば、その情報が name に代入されることです。
つまり、実務では「ユーザー入力を引数に渡して処理をする」「APIから取得したデータを引数として利用する」といった応用がよく行われます。

実際に開発現場では、入力フォームに入力された文字列や数値を引数として渡し、その情報に合わせて画面に表示するなどの処理を書きます。
ユーザーの操作に応じて異なる結果を出したい時に、引数を使うことでコード全体をすっきり保ちやすくなるわけです。

引数の受け渡しの仕組み

JavaScriptで関数を呼び出すとき、関数定義で指定した引数の数にかかわらず、好きな数の値を渡せます。
たとえば、3つの引数を定義している関数を、2つだけ渡して呼び出してもエラーになりません。
ただし、その場合は渡されなかった引数は undefined になります。


function showProfile(name, age, country) {
  console.log("名前:", name);
  console.log("年齢:", age);
  console.log("国籍:", country);
}

// ageを省略して呼び出した場合
showProfile("鈴木", undefined, "日本");

上のように、引数を省略すると結果として age が undefined になります。
実務においても、必要なパラメータがすべてそろわない状態で呼び出される可能性があるため、あらかじめデフォルト値を設定しておくことが多いです。
また、想定以上の数の引数が渡された場合は、単純に関数内で参照されないだけなので、大きな問題にはなりませんが、設計段階で混乱しないように注意しましょう。

こうした柔軟さはJavaScriptの特徴の一つといえます。
ただ、何でも自由に渡せるからこそ、実務では「この関数は何を受け取るのか」を明確にドキュメント化しておく必要があります。
複数人で開発する場合など、引数の使い方をはっきりさせておかないと、値の型や順番を間違えてしまうリスクが高まります。

省略時に困るケースとデフォルト引数

前述のように、JavaScriptでは引数を省略すると undefined になります。
もしも値が渡されなかった時にエラーを起こしたくない場合や、特定の初期値を使いたい場合には、デフォルト引数を設定する方法がよく使われます。
デフォルト引数とは、関数定義の段階で「値が渡されなかったら、この値を使う」という仕組みです。


function calculatePrice(price, taxRate = 0.1) {
  return price + price * taxRate;
}

console.log(calculatePrice(1000));     // taxRateが省略されたので0.1になる
console.log(calculatePrice(1000, 0)); // taxRateに0が渡された

この例では、引数 taxRate を省略するとデフォルトで 0.1 が使われます。
一方で引数に 0 が渡されれば、ちゃんと0%の計算結果が返ってきます。
たとえばショッピングカートの計算などでは、消費税や割引率の値が必ずしも固定ではないため、こうしたデフォルト引数が実装をシンプルにしてくれます。

デフォルト引数を使わない場合は、関数内部で if (taxRate === undefined) { taxRate = 0.1; } のように書くことになりますが、デフォルト引数を使えば明確に「省略時は0.1」と示すことができて読みやすくなります。
実務的にも可読性と保守性が向上するので、積極的に使われる手法です。

argumentsオブジェクトの使い方

JavaScriptの関数内部には、すべての引数を配列風にまとめた**arguments オブジェクト**という特別な仕組みがあります。
ただし、これは配列ではなくオブジェクトに近い構造です。
実際には配列のようにインデックスでアクセスできますが、配列メソッド（map や filter）は直接使えません。


function example() {
  console.log(arguments[0]); // 最初の引数
  console.log(arguments[1]); // 2番目の引数
  console.log(arguments.length);
}

example("A", "B", "C");

このように定義しておくと、arguments を使って引数の個数を取得したり、個別の要素を参照したりできます。
ただし、近年は arguments よりも後述するRestパラメータがよく使われるので、今から新規に開発を始める場合はそちらを検討することが多いです。
とはいえ、レガシーコードや既存の仕組みに触れる際は arguments オブジェクトに出会うこともあるため、仕組みを知っておくことは大事です。

実務では、たとえば「引数をすべて文字列として結合する」「数値の引数を合計する」といった用途で arguments をループして使うケースがありました。
しかし、Restパラメータを使った方が明確に配列として受け取れるため、可読性や保守性が高まります。

コールバック関数の引数

JavaScriptでは、関数を別の関数の引数として渡すことが可能です。
これをコールバック関数と呼びます。
たとえば、イベントが発生したときに実行したい処理をあらかじめ引数として渡しておくなど、非同期処理との相性が良い方法です。


function processData(data, callback) {
  const result = data.toUpperCase();
  callback(result);
}

processData("hello", function(modified) {
  console.log(modified); // "HELLO"
});

上記では、processData 関数が2つの引数を受け取っています。
1つ目は単純な文字列、2つ目は関数です。
processData 内部で文字列を大文字に変換したあと、引数として渡されたコールバック関数を呼び出しています。
コールバック関数が実行されると、その結果をコンソールに表示してくれます。

実務では、データを加工してから結果を画面に反映する処理などでよく見られるパターンです。
引数に渡すことで処理のフローを柔軟に組み替えられるので、複雑な操作をわかりやすく分割できます。

アロー関数と引数

アロー関数は、従来の関数宣言や関数式よりも簡潔な記法で関数を定義できる書き方です。
アロー関数の引数は、1つであれば丸括弧を省略できますが、複数ある場合やデフォルト引数を使いたい場合などは括弧が必要になります。


// 引数が1つだけの場合
const double = x => x * 2;

// 引数が複数ある場合は丸括弧が必要
const add = (a, b) => a + b;

// デフォルト引数つき
const greet = (name = "ゲスト") => {
  console.log("こんにちは、" + name + "さん");
};

アロー関数は this の扱いが従来の関数と異なるため、注意が必要です。
ただし、引数の扱い自体は他の書き方と大きく変わりません。
実務では、UI操作をトリガーにデータを更新したり、簡単なコールバック関数を書く際にアロー関数が積極的に使われます。

一方で、コードが少し複雑になると行数が増えたり、ブロック構文を使ったりするため、従来の書き方との住み分けが行われることもあります。
引数をたくさん受け取るような大きな処理の場合は、可読性の観点からあえて通常の関数宣言を使うケースもあるでしょう。

Restパラメータ(引数)で可変長を扱う

前述したように、arguments オブジェクトは配列のようでいて配列ではないという少し扱いづらい側面がありました。
そこで、Restパラメータを使うと、可変長引数を配列として受け取ることができます。
Restパラメータは、引数リストの最後に ... を付けて定義します。


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

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

この sumAll 関数は、呼び出し時に渡された引数をすべて numbers 配列として受け取ります。
呼び出し側が引数を3つにしても4つにしても、あるいは1つにしてもエラーになりません。
この柔軟性は配列に特化しているため、arguments より扱いやすいです。

実務では「ユーザーが何個入力欄を使うかわからない」場面や「複数の数値を合計する」など、呼び出し時の状況に合わせて可変長のデータを受け取りたい時に重宝します。
引数をまとめて処理したい場合は、Restパラメータを使うクセをつけておくと便利です。

スプレッド構文(引数)で配列を展開する

Restパラメータと似た記法であるスプレッド構文は、配列を展開して複数の引数として渡したいときに使われます。
たとえば、配列に格納されたデータを関数に一度に引数として渡したい場合などが典型です。


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

const nums = [2, 3, 4];
console.log(multiply(...nums)); // 24

このように ...nums を書くと、配列 nums が要素ごとに展開され、multiply(2, 3, 4) と同じ呼び出しになります。
スプレッド構文を使わない場合は multiply(nums[0], nums[1], nums[2]) のように書く必要があるため、コードが少し煩雑になりますよね。

実務では、Web APIのレスポンスなど、外部から取得した配列を一気に引数にわたしたいケースがあります。
そのときにスプレッド構文はとても便利です。
また、配列をコピーしたり、複数の配列を結合するシーンでも頻繁に使われますが、引数として展開する使い方も非常に一般的です。

配列やオブジェクトの分割代入と引数

引数を受け取る際に、分割代入を使うことで特定のプロパティだけ取り出したり、配列の要素を変数に割り当てたりできます。
例えばオブジェクトを引数として受け取り、その中の特定のキーの値だけを使いたい場合などが典型的な使い方です。


function printUser({ name, age }) {
  console.log("ユーザー名:", name);
  console.log("年齢:", age);
}

const user = { name: "田中", age: 30, country: "日本" };
printUser(user);

この例では、printUser の引数を { name, age } と書いています。
呼び出し側は { name: "田中", age: 30, ... } の形を持つオブジェクトを渡せば、関数内で名前と年齢を取り出すことができます。
分割代入を使わないと、通常は function printUser(user) { ... user.name ... user.age ... } のように書きますが、分割代入を使うとコードがコンパクトになります。

実務では、APIから受け取ったデータオブジェクトの中から必要な情報だけを取り出したいときなどに便利です。
また、引数の数を増やさずに複数のデータを受け渡せるため、関数の使い方が明確になります。

関数宣言と関数式、引数の扱い方の違い

JavaScriptでは、関数宣言と関数式の2つの基本的な書き方があります。
関数宣言は function 関数名() { ... } の形、関数式は const 関数名 = function() { ... } の形です。
両者は呼び出されるタイミングの挙動が微妙に異なるものの、引数の扱い自体はそれほど差がありません。


// 関数宣言
function greetUser(name) {
  console.log("こんにちは、" + name);
}

// 関数式
const greetUserExpression = function(name) {
  console.log("こんばんは、" + name);
};

引数に関してはどちらの書き方でも同じように指定して、渡すことができます。
ただし、関数宣言は巻き上げ（ホイスティング）という仕組みでスクリプト冒頭に読み込まれる特徴があるため、呼び出しの順序を意識する必要がありません。
関数式の場合は、変数に代入されるタイミングまでは定義されないため、呼び出しの順序に注意が必要です。

実務では、チームのコーディング規約によって書き方が決まっていることも多いです。
引数の書き方の違いより、タイミングの違いを知っておけば、関数を定義する順番でエラーが出てしまうようなことを避けられます。

メソッド呼び出しとthisの関係

JavaScriptのオブジェクトに紐づく関数は、「メソッド」と呼ばれることがあります。
メソッドの呼び出し時には、this がオブジェクト自身を示すことが多いのですが、そのメソッドが引数を受け取る場合はどのように扱われるのでしょうか。
結論からいえば、メソッドの引数は通常の関数と同じように書けますが、呼び出し方法によって this が変わる点に注意が必要です。


const user = {
  name: "山田",
  greet: function(message) {
    console.log(message + "、" + this.name + "さん");
  }
};

user.greet("こんにちは"); // 「こんにちは、山田さん」と表示

このとき greet 関数の引数は message であり、this は user オブジェクトを参照します。
ただし、greet を他の変数に代入してから呼び出したり、特定の関数で包んで呼び出すと this が変わる可能性があります。
たとえば const temp = user.greet; temp("おはよう"); などと書くと、this は undefined やグローバルオブジェクトを指す場合があり、意図しない結果になりやすいです。

実務ではメソッドの引数を使ってオブジェクト内の状態を変更したり、外部からの入力を反映したりします。
ただ this の挙動を把握していないと、思わぬバグに繋がることがあるので気を付けましょう。

高階関数の引数設計のポイント

高階関数とは「関数を引数や戻り値として扱う関数」のことです。
JavaScriptでは関数が第一級オブジェクトなので、コールバック関数を受け取るのも自由ですし、関数を返すこともできます。
この柔軟性によって、いろいろなデザインパターンを実現できます。


function createMultiplier(multiplier) {
  return function(value) {
    return value * multiplier;
  };
}

const triple = createMultiplier(3);
console.log(triple(5)); // 15

この createMultiplier 関数は、multiplier という引数を受け取り、新しい関数を返します。
返された関数は、multiplier を保持したまま別の引数 value を受け取り、それらを掛け算する仕組みです。
実務的には「ある値をもとにして繰り返し計算を行う関数」「テンプレートを使い回すような関数」を作りたいときに非常に便利です。

このように、高階関数を使う場合は「どんな値を保持させて、どんな引数を改めて受け取るのか？」という設計が重要になります。
単純にコールバックを受け取るだけでなく、引数を2段階で受け取る設計をすることで、より柔軟な処理フローを組み立てられます。

イベントハンドラと引数の活用

ブラウザ上でボタンをクリックしたり、キーボードを押したりするときに呼び出されるのがイベントハンドラです。
イベントハンドラの関数には、イベントオブジェクトが自動的に引数として渡されます。
たとえばクリックイベントではクリック座標や対象要素の情報が含まれています。


const button = document.querySelector("#myButton");
button.addEventListener("click", function(event) {
  console.log("クリックされました");
  console.log("イベントタイプ:", event.type);
});

ここでは function(event) の event がイベントオブジェクトです。
イベントハンドラはユーザーの操作によって何度も呼び出される可能性があるため、引数の内容をしっかり把握しておくことが重要になります。

実務では、イベントオブジェクトのプロパティを見てクリック位置を取得したり、フォーム入力をバリデーションしたりといった処理を行います。
このように、イベント発生時に自動で受け取る引数を使うことで、インタラクティブなUIを実装できるわけですね。

非同期処理と引数(コールバック、Promise、async/await)

非同期処理もJavaScriptの重要な特徴の一つです。
タイマー処理やAPIリクエストなどは、実行後すぐに結果が返らず、一定の時間が経ってから処理が完了します。
そのため、完成時に呼び出すコールバック関数が引数として渡されたり、Promiseやasync/awaitを使った書き方が選択されることが多いです。


// コールバックスタイルの例
setTimeout(function() {
  console.log("一定時間が経過しました");
}, 1000);

// Promiseスタイルの例
fetch("https://example.com/api/data")
  .then(response => response.json())
  .then(data => {
    console.log("APIから取得したデータ:", data);
  });

コールバック関数や .then() に渡す関数も引数の一種と考えられます。
また、Promiseを使うと戻り値のように非同期の完了結果を扱えるため、コードが見通しやすくなります。
さらに、async/await では引数の指定方法自体に大きな違いはありませんが、同期的な見た目で書けるのでより理解しやすいでしょう。

実務では、外部サービスとの通信処理を非同期で実行し、その結果を受け取った後に画面を更新したりデータを加工したりします。
こうしたシーンで引数をどう設計するかが可読性を左右する大きな要素になります。

引数の型チェックやエラー処理

JavaScriptは動的型付け言語なので、引数に予期しない型が渡されてもコンパイルエラーにはなりません。
そのため、実務では型チェックやエラー処理を組み込むことが多いです。
引数が想定通りの型や範囲内にあるかどうかを調べ、異常があればエラーメッセージを出したり、別の処理を行うわけです。


function divide(a, b) {
  if (typeof a !== "number" || typeof b !== "number") {
    throw new Error("引数が数値ではありません");
  }
  if (b === 0) {
    throw new Error("0で割ることはできません");
  }
  return a / b;
}

try {
  console.log(divide(10, 2));
  console.log(divide(10, "a")); // エラー
} catch (error) {
  console.error("エラーが発生しました:", error.message);
}

この例では、divide 関数が2つの数値を引数として受け取り、割り算を行います。
divide(10, "a") のように誤った型が渡されたら、エラーとして知らせる設計にしています。
引数の型が明示されないJavaScriptにおいては、こうしたチェックを適切に行うことでバグを防止しやすくなります。

実務でよくある引数のデザインパターン

実務では、一つの関数に大量の引数を渡すと可読性が下がるため、オブジェクト一括渡しが好まれることがあります。
これは、複数の値を一度に受け取りたいときに、オブジェクトにまとめて引数に指定する手法です。


function createUser({ username, email, age }) {
  // ...ユーザー情報を登録する処理...
  return {
    username: username,
    email: email,
    age: age,
    createdAt: new Date()
  };
}

const newUser = createUser({
  username: "tanaka",
  email: "tanaka@example.com",
  age: 25
});

このコードのように、引数をオブジェクトとして受け取ると「順番に依存しない」「追加しやすい」といった利点があります。
あとから新しいプロパティが増えた場合でも、呼び出し側と関数側双方で対応しやすくなるのが魅力です。

また、機能を分割しやすいように引数を2つか3つほどに絞り、複数の情報をまとめたい場合はオブジェクトを使うなど、プロジェクトの規模に合わせて工夫が行われます。
たとえば「ユーザー情報」「商品情報」「環境設定」など、意味のあるまとまりごとに引数を整理することで、読み手に意図が伝わりやすくなるでしょう。

関数の再利用性と引数設計

引数は関数の外部とのインターフェースです。
このインターフェースが複雑になるほど、関数を再利用しにくくなる場合があります。
逆に、引数を少なく、明確なデータだけを求める関数にしておけば、さまざまな場所から再利用しやすくなるでしょう。

たとえば、ユーザー情報を更新する関数を考えてみます。
「ユーザー名、メール、年齢、パスワード、ステータス、その他オプション...」と次々に引数が増えてしまうと、呼び出し元が混乱しやすいです。
そこで、オブジェクトを使って引数を一括管理するか、あるいは複数の関数に分割するなどの対処をするわけですね。

実務では、特定の引数を必須、別の引数はオプショナルといった区別をすることもしばしばあります。
デフォルト値を活用したり、引数の存在チェックを行うなどして、スムーズに動く設計を目指すと保守性が高まります。

テンプレートリテラルと引数の関係

テンプレートリテラルとは、バッククォート ` で囲んだ文字列の中に ${} で変数や式を埋め込む記法のことです。
関数の引数で受け取った値を文字列として出力する際に、テンプレートリテラルを使うと可読性が上がります。


function describePerson(name, age) {
  return `${name}さんは${age}歳です`;
}

console.log(describePerson("佐藤", 29));

従来の + を使った文字列結合に比べて、引数を含めた文章を自然に書きやすいのがメリットです。
文章中に引数が複数ある場合でも、どこにどの値が入り込むのかが一目瞭然になります。
実務でUIメッセージを作成するときなど、テンプレートリテラルはよく使われる手段です。

さらに、テンプレートリテラルでは改行を含む文字列をそのまま書けるため、メール本文などを生成する関数を書くときにも使われます。
引数から受け取った情報を複数行のテキストに落とし込む場合、テンプレートリテラルがあると表現しやすくなるでしょう。

テストコードでの引数の確認(サンプルのみ)

プログラムの動作を保証するために、テストコードを書くことは重要です。
関数の引数にさまざまな値を与えて、期待する結果が得られるかを確かめます。
JavaScriptのテストフレームワークを使うと、以下のようなイメージでテストコードを組み立てることが多いでしょう。


// シンプルなイメージ例
function add(a, b) {
  return a + b;
}

// テストコード例
console.log(add(1, 2) === 3);     // true
console.log(add(-1, 2) === 1);    // true
console.log(add(0, 0) === 0);     // true

実務ではもっとしっかりとしたフレームワークを用いてテストを書くため、結果的に多彩な引数パターンを一括で試すことが可能です。
こうしたテストを通じて、引数の型や順番を間違えていないか、デフォルト引数が正しく動いているかなどを確認します。

テストを作る段階で、引数の設計に無理がないかを再度検討することも多いです。
もしテストコードで「テストケースがやたらと多い」「引数を変えるたびに複雑な分岐が必要」と感じたなら、関数を分割するなどのリファクタリングを検討してみると良いでしょう。

呼び出し側で意図的に引数を変えてテストすることで、関数がどのような結果を返すかを簡単に確認できます。
デバッグ時には、いろいろな引数の組み合わせを試してみることがおすすめです。

関数を活用する実務シーンの具体例

ここまで紹介してきた引数のさまざまな使い方は、実務のさまざまな場面で応用できます。
たとえば、以下のようなシーンが考えられます。

フォーム入力の処理

ユーザーが入力した名前や住所などを引数で受け取り、バリデーションやデータベース登録を行う。

APIから取得したデータの加工

JSON形式のデータを受け取り、必要な項目だけ抜き出してUIに反映する。

複数の値を使った計算

税率や手数料率などを引数として受け取り、料金計算を行う。

イベント駆動の処理

クリックや入力などのイベントオブジェクトを引数に受け取り、画面の状態を更新する。

このように、引数を正しく扱えれば、実行時に動的に処理を変化させたいときに柔軟に対応できます。
逆に言えば、引数の設計が曖昧だと、呼び出し側と関数側のコードを合わせるのが大変になるので気をつけたいところです。

引数を増やしすぎたり、目的の違うデータを一気に詰め込みすぎると、関数の役割が不明瞭になるリスクがあります。
シンプルかつ明確なインターフェースを意識するのがポイントです。

まとめ

JavaScriptの引数は、シンプルな数値や文字列の受け渡しから、コールバック関数やオブジェクトの分割代入、非同期処理の戻り値との組み合わせまで幅広い活用シーンがあります。
初めてプログラミングを学ぶ方にとっては少し概念が多く感じるかもしれませんが、実際には「必要なデータを関数に伝える」という基本原則は変わりません。

デフォルト引数を使えば省略時の値を管理しやすい
Restパラメータで可変長の引数を扱う
オブジェクト渡しや分割代入でコードをすっきりさせる
コールバックや高階関数で柔軟な処理フローを作る

こうしたポイントを押さえておくと、より読みやすく、安全に動くコードが書けるようになるでしょう。
また、実務で使う際には引数の型や数を明確にしておくことが、チーム開発や保守の観点でも重要です。
一度にすべてを完璧に理解しようとせず、試しながら慣れていくことで、JavaScriptの引数に対する理解がどんどん深まっていきます。