JavaScriptの関数の引数を、初心者向けにやさしく解説
はじめてでも迷わないように、引数の基本から「よくつまずくポイント」まで、短いコード例と練習問題で丁寧に説明します。手を動かすことがいちばんの近道です。
引数の基本
- 引数とは: 関数に「材料」を渡す仕組み。渡した値は関数の中で変数として使える。
- 仮引数と実引数: 関数を作る側の受け皿が仮引数、呼び出す側が渡す実際の値が実引数。
- 型いらず: JavaScriptは型指定しないので、数でも文字でも渡せる。
// 関数を作る（定義する）
function sayHello(name) {
console.log('こんにちは、' + name + 'さん！');
}
// 関数を使う（呼び出す）
sayHello('佐藤'); // => こんにちは、佐藤さん！
sayHello('AI'); // => こんにちは、AIさん！
ポイント: 丸括弧の中の順番が命。1番目の値は1番目の仮引数に入ります。
引数の数が合わないとき
- 少ない場合: 渡されなかった引数は自動で undefined（未定義）になる。エラーにはならない。
- 多い場合: 余った値は捨てられる（拾いたいときは後述の「可変長引数」を使う）。
function showProfile(name, age) {
console.log('名前:', name);
console.log('年齢:', age);
}
showProfile('山田', 20);
// 名前: 山田
// 年齢: 20
showProfile('鈴木');
// 名前: 鈴木
// 年齢: undefined
よくあるミス: undefinedのまま計算して「NaN（数じゃない）」になる。未指定は条件分岐で守ろう。
function buy(price, count) {
if (count === undefined) {
console.log('個数が未指定です');
return;
}
console.log('合計:', price * count);
}
buy(100); // => 個数が未指定です
buy(100, 3); // => 合計: 300
デフォルト引数（未指定ならこの値）
- 使い方: 仮引数に「= 初期値」をつけると、未指定のとき自動でその値が入る。
- 考え方: 「指定されればそっち優先、未指定なら初期値」。
function total(price, count = 1) {
console.log('合計:', price * count);
}
total(120); // => 合計: 120（countが未指定なので1が入る）
total(120, 5); // => 合計: 600（指定された5を使う）
コツ: よく省略される引数（例：件数、言語、オプション）にデフォルトを入れると安全。
可変長引数（rest parameter）
- 目的: 引数の数が毎回変わるとき、全部ひとまとめに配列で受け取る。
- 書き方: 仮引数に「…名前」。最後にしか置けない。
function sum(...nums) {
let s = 0;
for (let i = 0; i < nums.length; i++) {
s += nums[i];
}
return s;
}
console.log(sum(1, 2, 3)); // => 6
console.log(sum(10, 20, 30, 40)); // => 100
// 普通の引数 + 可変長引数の合わせ技
function tag(prefix, ...words) {
// wordsは配列。joinでつなげる
return prefix + ': ' + words.join(', ');
}
console.log(tag('選択', '赤', '青')); // => 選択: 赤, 青
console.log(tag('購入', 'ペン', 'ノート')); // => 購入: ペン, ノート
迷ったら: 「いくつ来るかわからない」なら rest を使う。「必須の値」は通常の引数で受ける。
ちょい上級：argumentsとの違い
- arguments: 関数内で自動的に使える「配列っぽいオブジェクト」。全部の引数が入ってる。
- 注意点: 本当の配列ではないので、mapやfilterが直接使えないことがある。
- おすすめ: 現代の書き方は可変長引数（…rest）。配列としてそのまま扱えて楽。
function demo() {
console.log(arguments.length); // 渡された引数の数
console.log(arguments[0]); // 1番目の引数
}
demo('A', 'B'); // => 2 / 'A'
よくあるつまずきと回避策
- ラベル: 引数名は「何が入るか」が伝わる名前にする。name, count, price, options など。
- 順番: よく使う・必須の引数を前、オプションを後ろ。さらに最後に …rest を置くと拡張しやすい。
- 未指定の判定: undefinedチェックか、デフォルト引数で未指定を吸収する。
function greet(name = 'ゲスト', lang = 'ja') {
if (lang === 'ja') {
console.log('こんにちは、' + name + 'さん');
} else if (lang === 'en') {
console.log('Hello, ' + name + '!');
} else {
console.log('Hi, ' + name);
}
}
greet(); // => こんにちは、ゲストさん
greet('Sato'); // => こんにちは、Satoさん
greet('Sato', 'en'); // => Hello, Sato!
練習問題
1. 価格計算の関数
- 課題: 単価 price と個数 count を受け取り、合計金額を返す関数 makeTotal を作る。countが未指定なら1とする。
function makeTotal(price, count = 1) {
return price * count;
}
// テスト
console.log(makeTotal(500)); // 500
console.log(makeTotal(500, 3)); // 1500
2. あいさつジェネレーター
- 課題: 名前を1つ以上受け取り、全員に「こんにちは！」と表示する greetAll を作る。可変長引数を使う。
function greetAll(...names) {
for (let i = 0; i < names.length; i++) {
console.log('こんにちは、' + names[i] + 'さん！');
}
}
// テスト
greetAll('田中', '鈴木');
// こんにちは、田中さん！
// こんにちは、鈴木さん！
3. 商品タグの整形
- 課題: prefix（必須）と任意のタグを受け取り、「prefix: tag1, tag2, …」の文字列を返す formatTags を作る。
function formatTags(prefix, ...tags) {
return prefix + ': ' + tags.join(', ');
}
// テスト
console.log(formatTags('カテゴリ', '本', '雑貨')); // カテゴリ: 本, 雑貨
console.log(formatTags('色')); // 色:
4. 安全な割り算
- 課題: a, b を受け取り、bが未指定や0のときはエラーメッセージを返し、そうでなければ a / b の結果を返す safeDivide。
function safeDivide(a, b) {
if (b === undefined) return '割る数が未指定です';
if (b === 0) return '0では割れません';
return a / b;
}
// テスト
console.log(safeDivide(10)); // 割る数が未指定です
console.log(safeDivide(10, 0)); // 0では割れません
console.log(safeDivide(10, 2)); // 5
5. オプション設定（発展）
- 課題: text（必須）と options（省略可）を受け取り、options.uppercase が true なら大文字に、それ以外はそのまま返す formatText。
- ヒント: オブジェクトを引数にすると、オプションを増やしやすい。
function formatText(text, options = { uppercase: false }) {
if (options.uppercase) {
return text.toUpperCase();
}
return text;
}
// テスト
console.log(formatText('hello')); // hello
console.log(formatText('hello', { uppercase: true })); // HELLO
次の一歩（学んだことをコードに落とす）
- ラップ関数を作る: 既存関数を「引数を決めやすくする」形で包む。
- オプションはオブジェクトで: 順番の迷いをなくし、後から項目を追加しやすい。
- テストを並べる: 期待する入出力をコメントで書き、見比べる習慣をつける。