プログラミングの引数とは？戻り値との違いからTypeScriptの型指定まで完全解説

プログラミングの壁になりがちな「引数」について、言葉の意味や「仮引数・実引数」の違いから、TypeScriptを用いた実践的な書き方までをわかりやすく解説します。

初心者が陥りやすいミスを防ぐための型指定の基本や実務で必須となる「引数が多い場合のベストプラクティス」まで網羅した完全ガイドです。

プログラミングの引数とは？

プログラミングの学習を進めていくと、関数の次に必ず「引数」という壁にぶつかります。

「プログラミング引数とは一体何のこと？」「プログラミングにおける引数とはどんな役割を持っているの？」と、専門用語の前で手が止まってしまう方は非常に多いです。

ここでは、プログラミングの引数とは何なのか、本来のプログラミング引数の意味から実践的な使い方、プログラミングの引数をTypeScriptの具体例を交えながら解説していきます。

プログラミングの関数について詳しく知りたい人は「プログラミングの関数とは？基礎から関数型プログラミングまで完全ガイド」を一読ください。

引数の読み方と英語での表現

まずは基本中の基本である「プログラミング引数の読み方」から確認しましょう。

引数は「ひきすう」と読みます。

実務の現場では、引数のことを「パラメーター」や「アーギュメント（略してアグ）」と英語ベースで呼ぶエンジニアも多くいます。

これを理解していないと、現場の会話についていけなくなることがあります。

また、TypeScriptのエラーメッセージでも「Expected 2 arguments, but got 1.（引数が2つ必要なのに1つしか渡されていません）」といった形で英語がそのまま頻出するため、英語表現は覚えておきましょう。

// 関数を定義する際に受け取る「引数」を Parameter（パラメータ：仮引数）と呼ぶ
function displayMessage(parameterMessage: string): void {
  console.log(parameterMessage);
}

// 関数を呼び出す際に実際に渡す「データ」を Argument（アーギュメント：実引数）と呼ぶ
const myArgument: string = "こんにちは！";
displayMessage(myArgument); 

引数とは関数に渡すデータのこと

引数の役割を一言で表すと、「関数という工場に渡すデータ（材料）」のことです。

最近では高校の「情報」の授業でも、この概念が必須で教えられています。

例えば、「フルーツジュースを作る関数（ミキサー）」があったとします。

このミキサー関数は、外から「りんご」や「みかん」といった材料をもらわないと、ジュースを作ることができません。

この「外から渡してあげる材料」こそが引数です。

初心者がTypeScriptで頻繁に起こすエラーが、「引数に間違った型（種類）のデータを渡してしまうこと」です。

数値を計算する関数に文字列を渡してしまったり、複数の引数があるのに順番を間違えて渡してしまったりするミスは実務でもよく発生します。

TypeScriptでは、これを防ぐために引数の「型」を厳密に定義します。

// ⭕ 良い例：材料（引数）を受け取り、結果を返す純粋な関数
// ingredient1 と ingredient2 が引数（材料）
function makeJuice(ingredient1: string, ingredient2: string): string {
  return `${ingredient1}と${ingredient2}のミックスジュース`;
}

// 材料（引数）を渡して関数を実行する
const resultJuice = makeJuice("りんご", "バナナ");
console.log(resultJuice); // 出力: りんごとバナナのミックスジュース

// ❌ よくあるミス：引数の型や数を間違える
// const errorJuice = makeJuice("りんご", 100); 
// 🚨 エラー: 型 'number' の引数を型 'string' のパラメーターに割り当てることはできません。

変数と引数の違い

プログラミングを学び始めると、変数と引数の違いが曖昧になる方が多くいます。

どちらも「データを入れる箱」という点では似ていますが、用途が全く異なります。

• 変数：データを記憶して保存しておくための、独立した箱。
• 引数：関数の外から内側へ、データを受け渡すためだけの専用の窓口（一時的な箱）。

初心者が実務で一番やってはいけないアンチパターンが、「引数を使わずに、グローバル変数を直接関数の中で使ってしまうこと」です。

引数を使わずに関数の外にある変数を直接読み書きすると、「いつ・どこで・誰がそのデータを変えたのか」が分からなくなり、予測不能なバグを生み出します。

関数の中で使うデータは、「引数」として外部から明示的に渡すのがよいです。

// ❌ 悪い例：引数を使わず、外の変数（グローバル変数）に依存している
let discountRate = 0.2; // 20%割引

function calculateBadPrice(price: number): number {
  // 外の変数を直接使っているため、外で discountRate が変更されると結果が狂う
  return price - (price * discountRate); 
}

// ⭕ 良い例：必要なデータはすべて「引数」として受け取る
function calculateGoodPrice(price: number, discount: number): number {
  return price - (price * discount);
}

// 実行時にすべての材料（引数）を明示的に渡すため、いつでも結果が同じになる（安全）
const finalPrice = calculateGoodPrice(5000, 0.2);
console.log(finalPrice); // 出力: 4000

関数と引数の関係を自販機で例えてみる

最後に、関数と引数の関係性が最も直感的にわかる「自動販売機」の例を見てみましょう。

関数と引数はどういう連携をするのかが手に取るように理解できるはずです。

• 関数：自動販売機の本体（処理を行う機械）
• 引数：投入する「お金」と「選んだボタンの番号」
• 戻り値：出てくる「ジュース」や「お釣り」

引数が複数ある場合、「渡す順番」は絶対です。

自動販売機に「お金」と「ボタン番号」を渡す関数を作ったのに、呼び出す時に「ボタン番号」「お金」の順番で渡してしまうと、プログラムは正しく動きません。

実務では、引数が増えすぎるとこの順番間違いによるバグが多発するため、後述する「引数をオブジェクトにまとめる」などの対策が必要になってきます。

// 自動販売機関数
// 引数1: money (投入金額)
// 引数2: buttonId (押したボタンの番号)
function vendingMachine(money: number, buttonId: string): string {
  // ボタンに応じた処理（簡易版）
  if (buttonId === "A1" && money >= 150) {
    return "コーラが出ました！";
  } else if (buttonId === "B2" && money >= 120) {
    return "お茶が出ました！";
  } else {
    return "お金が足りないか、ボタンが間違っています。";
  }
}

// ⭕ 正しい順番で引数を渡す
const result1 = vendingMachine(200, "A1");
console.log(result1); // 出力: コーラが出ました！

// ❌ 順番を間違えるとTypeScriptのエラーになる（または意図しない動作になる）
// const errorResult = vendingMachine("A1", 200); 
// 🚨 エラー: 型 'string' の引数を型 'number' のパラメーターに割り当てることはできません。

引数と戻り値の違いとセットで覚えるべき理由

プログラミングの学習を進める中で、引数と同じくらい頻繁に登場し、重要な概念が戻り値（もどりち）です。

検索エンジンで「プログラミング 引数 戻り値」や「プログラミング 引数と戻り値」とセットで検索する人が非常に多いことからもわかるように、これら2つは表裏一体の関係にあります。

なぜセットで覚えるべきなのでしょうか？

それは、関数という仕組みが基本的に「何かデータを入れて（入力）、処理を行い、その結果を返す（出力）」という流れで成り立っているからです。

この「入力」と「出力」のペアを正確に理解することが、プログラミング上達の鍵となります。

引数と戻り値の違い

引数と戻り値の違いをシンプルに整理すると、以下のようになります。

• 引数（入力）：関数を呼び出す際に、外から関数へ「渡す」データ。
• 戻り値（出力）：関数内での処理が終わった後、関数から外へ「返ってくる」結果のデータ。

関数の中には、「引数だけ受け取って、何も返さない（画面に表示して終わるなど）」ものや「引数を受け取らずに、決まった値だけを返す」ものもありますが、実務でよく使うのは「引数を受け取り、計算・加工して戻り値を返す」パターンです。

初心者がよく陥るミスが、「戻り値を返す（returnする）のを忘れる」ことと「関数の中で画面に表示（console.log）しただけで、戻り値だと勘違いしてしまう」ことです。

関数の中でconsole.logを使って結果を表示しても、それは単に画面に出力されただけで、プログラムの別の場所でその結果を「再利用」することはできません。

計算結果を別の処理で使いたい場合は、returnキーワードを使って戻り値として外に返す必要があります。

// ❌ 初心者がやりがちな間違い（戻り値がない）
function calculateTaxBad(price: number): void {
  const result = price * 1.1;
  console.log(`税込価格は${result}円です`); // 画面に出るだけで、データは返ってこない
}

const finalPriceBad = calculateTaxBad(1000);
// console.log(finalPriceBad); // 🚨 ここには何も入っていない（undefined）ため、後で計算に使えない！


// ⭕ 正しい書き方（returnで戻り値を返す）
// 引数として price（数値）を受け取り、戻り値として 数値 を返す
function calculateTaxGood(price: number): number {
  const result = price * 1.1;
  return result; // returnを使って結果を外に返す！
}

// 戻り値を変数に代入することで、後から別の計算に使い回すことができる
const finalPriceGood = calculateTaxGood(1000);
console.log(`合計金額は ${finalPriceGood + 500} 円（送料込み）です。`);

TypeScriptによる引数と戻り値の実践的なコード例

では、実際の開発現場でどのように使われているのか、「プログラミング 引数 例」として、より実践的なTypeScriptのコードを見てみましょう。

実務では、単なる足し算や掛け算だけでなく、「ユーザーの情報をまとめる」「特定の条件を満たしているか判定する」といった処理を関数化します。

この時、引数と戻り値の「型」をしっかり定義しておくことで、安全でバグの少ないプログラムを作ることができます。

TypeScriptの実務において初心者がよく指摘されるのが、「戻り値の型定義をサボる（省略する）」ことです。

TypeScriptは賢いので、returnしている中身を見て自動的に戻り値の型を推論してくれます。

しかし、条件分岐（if文など）が複雑になると、意図せずundefined（未定義）やnull を返してしまうルートが生まれ、後から重大なエラーを引き起こすことがあります。

「この関数は絶対にこの型を返す」という宣言（戻り値の型注釈）を明示的に書くことが堅牢なシステム作りが重要です。

// ⭕ 実践的な例：ユーザーが成人かどうかを判定する関数
// 引数: age (年齢: 数値)
// 戻り値: boolean (真か偽か)
function isAdult(age: number): boolean {
  // 18歳以上なら true、そうでなければ false を返す
  if (age >= 18) {
    return true;
  } else {
    return false;
  }
}

// 使い方
const userAge: number = 20;

// 戻り値（true か false）を使って、次の処理の条件分岐を行う
if (isAdult(userAge)) {
  console.log("お酒の購入が可能です。");
} else {
  console.log("未成年はお酒を購入できません。");
}


// ❌ 実務でNGな例（戻り値の型が指定されていない）
// もし内部のロジックが間違っていて、何も返さないルートがあるとバグの温床になる
function formatUserName(firstName: string, lastName: string) {
  // 🚨 戻り値の型（: string）が省略されている
  if (firstName && lastName) {
    return `${lastName} ${firstName}`; 
  }
  // ※名前が欠けていた場合、何もreturnされない（undefinedになる）ため危険！
}

仮引数と実引数の違いとは？

プログラミングの学習を進め、関数の基礎を理解した次に立ちはだかるのが、仮引数と実引数という用語の壁です。

ネットで「プログラミング 仮引数とは何か？」と検索して、その違いに戸惑う初心者は少なくありません。

実は、普段私たちが単に「引数」と呼んでいるものは、関数を作る側と関数を使う側で名前が異なります。

この違いを理解していないと、エラーメッセージの意味が分からなかったり、他のエンジニアとのコミュニケーションで齟齬が生まれたりします。

ここでは、実務で必須となる「仮引数」と「実引数」の明確な違いをTypeScriptのコードを交えて解説します。

関数を作る時に定義する仮引数

「仮引数（かりひきすう）」とは、関数を「定義する（作る）」ときにカッコの中に書く変数のことです。

英語では「Parameter（パラメータ）」と呼ばれます。

仮引数は、関数の中で処理を行うための「一時的な入れ物（プレースホルダー）」にすぎません。

この時点では具体的なデータは入っておらず、「後からここにデータが入ってくる予定だよ」という宣言をしている状態です。

初心者が実務でよく陥るミスが、「仮引数に、具体的な値や外の変数名をそのまま使おうとしてしまう」ことです。

仮引数はあくまで「関数の中だけで使う仮の名前」です。

外の世界の変数名と同じにする必要は全くなく、むしろ関数内でどんなデータとして扱うかが直感的に分かる名前にするべきです。

また、TypeScriptではここで必ず「型（Type）」を指定しなければなりませんが、これをサボってanyにしてしまうと、後述する実引数を渡す際にバグを防げなくなります。

// 関数を「定義」する
// ここの `userName` と `age` が【仮引数（パラメータ）】です。
// まだ具体的な名前や年齢は入っていません。「文字」と「数字」が入る予定、というだけです。
function greetUser(userName: string, age: number): string {
  return `こんにちは、${userName}さん！${age}歳ですね。`;
}

// ❌ よくある初心者のミス（仮引数の名前の付け方）
// 外で使う予定の変数名をそのまま仮引数にしてしまう（依存度が高く、汎用性がない）
// function greetUserBad(inputFormName: string, currentSelectedAge: number) { ... }

関数を使う時に渡す実引数

一方、「実引数（じつひきすう）」とは、関数を「呼び出す（使う）」ときにカッコの中に渡す具体的なデータのことです。

英語では「Argument（アーギュメント）」と呼ばれます。

関数に「実際に渡す」値だから実引数、と覚えると分かりやすいでしょう。

先ほど定義した「仮引数」という入れ物に、ここで初めて具体的な「実引数」が代入され、関数の処理が走り出します。

ここで発生する代表的なエラーが、「仮引数と実引数の数、または順番が合っていない」というミスです。

仮引数が2つ用意されているのに、実引数を1つしか渡さなかったり、文字と数字を逆の順番で渡したりすると、プログラムは破綻します。

TypeScriptを導入していれば、エディタ上で「Expected 2 arguments, but got 1.（2つの実引数を期待していますが、1つしか渡されていません）」といった警告を出してくれるため、実行前にミスに気づくことができます。

function calculateTotal(price: number, taxRate: number): number {
  return price * taxRate;
}

// 関数を「呼び出す」
// ここの `1000` と `1.1` が【実引数（アーギュメント）】です。
// 実際に計算に使われる具体的なデータです。
const result1 = calculateTotal(1000, 1.1); 

// 実引数には、直接数値を書く以外にも、変数を渡すことができます。
const itemPrice = 500;
const currentTax = 1.08;
// ここの `itemPrice` と `currentTax` の中身が実引数として渡されます。
const result2 = calculateTotal(itemPrice, currentTax);

// ❌ 順番や型を間違えると TypeScript がエラーで守ってくれる
// const errorResult = calculateTotal(1.1, 1000); // 順番が逆！（文法エラーにはならないが、計算結果がおかしくなる）
// const typeErrorResult = calculateTotal("千円", 1.1); // 🚨 エラー: 型 'string' の実引数を型 'number' の仮引数に割り当てることはできません。

【TypeScript】引数の書き方と「型」の指定方法

世の中には様々なプログラミング言語が存在しますが、「プログラミング言語 引数」の扱い方は言語によって大きく異なります。

JavaScriptやPythonのように引数にどんなデータでも自由に入れられる柔軟な言語もあれば、JavaやC言語のように「この引数は数字しか受け付けない」と厳格に決まっている言語もあります。

TypeScriptは後者であり、引数に「型（Type）」を指定できることが最大の強みです。

ここでは、TypeScriptにおける引数の書き方、実務で頻出する「オプショナル引数」「デフォルト引数」といった応用テクニックまで解説します。

TypeScriptで引数に「型」を指定するメリット

TypeScriptで引数に型を指定するメリットは、「間違ったデータが渡された瞬間に、プログラムを動かす前にエディタがエラーで教えてくれる（バグを未然に防げる）」という点です。

例えば、数値を計算する関数に誤って文字列を渡してしまった場合、型がない言語だとそのまま計算が進み、画面に「NaN（Not a Number）」と表示されて画面が真っ白になる…ということが起きます。

TypeScriptなら、コードを書いている最中に赤い波線で「間違っていますよ」と警告してくれます。

初心者が実務で一番やってはいけないのが、「エラーを消すためにany型を使ってしまうこと」です。

any型を指定すると、「この引数には何を渡してもOK」という状態になり、TypeScriptの型チェックが無効化されます。

これではTypeScriptを使っている意味がなくなり、将来的に予測不能なバグを引き起こす原因になります。

引数の型は妥協せず、具体的な型（string,number,booleanなど）を指定しましょう。

渡さなくてもOKな「省略可能パラメータ（オプショナル引数）」

関数を作っていると、「この引数は基本的には渡してほしいけど、無くても動くようにしたいな」という場面があります。

そのような時に使うのが「省略可能パラメータ（オプショナル引数）」です。

引数名の後ろに?をつけるだけで、「この引数は省略してもOKですよ」という設定になります。

省略された場合、その引数の中身は自動的にundefined（未定義）になります。

ここでの実務的な注意点は2つあります。

1つ目は、「引数が省略されてundefinedになった場合の処理（if文など）を書き忘れること」です。

これを忘れると、undefinedに対して文字数のカウント等の処理を行おうとしてしまい、プログラムがクラッシュします。

2つ目は、「オプショナル引数を、必須の引数より先に書いてしまうこと」です。

TypeScriptのルール上、省略できる引数は必ずリストの「最後（右側）」に配置しなければなりません。

// ⭕ 良い例：lastName（苗字）をオプショナル（?）にしている
// 必須の引数（firstName）を先に書き、省略可能な引数（lastName?）を後に書く
function printFullName(firstName: string, lastName?: string): string {
  // 🚨 必須の処理：lastName が省略された(undefined)場合の条件分岐を必ず書く！
  if (lastName !== undefined) {
    return `${lastName} ${firstName}`;
  } else {
    return firstName; // 苗字がない場合は名前だけ返す
  }
}

// 苗字あり（引数2つ）で呼び出す
console.log(printFullName("太郎", "山田")); // 出力: 山田 太郎

// 苗字なし（引数1つ）で呼び出してもエラーにならない！
console.log(printFullName("太郎")); // 出力: 太郎

// ❌ 悪い例：オプショナル引数の順番を間違える
// function wrongOrder(lastName?: string, firstName: string) { ... }
// 🚨 エラー: 必須パラメーターを省略可能パラメーターの後に指定することはできません。

値が渡されなかった時の「デフォルト引数（初期値）」

オプショナル引数に似ていますが、より便利なのが「デフォルト引数（初期値）」です。

これは、「もし引数が渡されなかったら、あらかじめ決めておいたこの値を代わりに使ってね」と指定できる機能です。

引数名の後ろに= 値を書くことで設定できます。

初心者が混乱しがちなのが、「オプショナル引数（?）とデフォルト引数（=）を同時に使おうとしてしまうこと」です。

デフォルト値を設定した時点で「渡さなくてもOK」という意味が含まれるため、? をつける必要はありません。

また、実務でよくある盲点が「nullを渡した場合」です。

デフォルト引数が発動するのは、引数を完全に省略した時か、明示的にundefinedを渡した時だけです。

null や空文字（""）、0などを渡した場合は、「その値が渡された」とみなされ、デフォルト値は使われない点に注意が必要です。

// ⭕ 良い例：taxRate にデフォルト値 (1.1) を設定している
// 割引率などを設定する際、特に指定がなければ 1.1 が使われる
function calculateTotal(price: number, taxRate: number = 1.1): number {
  return Math.floor(price * taxRate);
}

// taxRate を省略した場合 -> デフォルト値の 1.1 が使われる
console.log(calculateTotal(1000)); // 出力: 1100

// taxRate を明示的に渡した場合 -> 渡した値 (1.08) が優先される
console.log(calculateTotal(1000, 1.08)); // 出力: 1080

// ❌ よくあるミス：オプショナル (?) とデフォルト値 (=) を同時に書いてしまう
// function wrongDefault(taxRate?: number = 1.1) { ... }
// 🚨 エラー: パラメーターを省略可能にして、同時に初期化することはできません。

引数が多い場合の対処法とベストプラクティス

プログラミングを学習して関数を作れるようになってくると、次に直面するのが「引数が増えすぎてしまう」という問題です。

実務の現場でも、「プログラミング 引数 多い」と検索して、綺麗に整理する方法を探すエンジニアは後を絶ちません。

ユーザーの登録処理や商品の検索処理など、複雑な機能を作ろうとするとどうしても関数に渡すべき材料（引数）は多くなりがちです。

ここでは、引数が増えてしまった時にプロが使っている「ベストプラクティス」をTypeScriptの機能を使って解説します。

引数が多すぎる関数はなぜダメなのか？

そもそも、なぜ引数が多い（一般的に4つ以上）関数は良くないとされているのでしょうか？

最大の理由は「可読性の著しい低下」と「順番間違いによるバグの誘発」です。

引数が多くなると、関数を呼び出す側（使う側）のコードを見ただけでは、「どのデータが、どの引数に対応しているのか」が全く分からなくなります。

実務で発生しやすいのが、「同じ型の引数が連続している時に、順番を逆に渡してしまう」という致命的なミスです。

例えば、firstName (文字列) と lastName (文字列) を受け取る関数に、逆に渡してしまっても、どちらもstring型であるためTypeScriptのエラーにはなりません。

引数が増えれば増えるほど、この「順番間違い」のバグが紛れ込む確率が跳ね上がります。

// ❌ 悪い例：引数が多すぎる関数
// 引数が5つもあり、パッと見て順番や意味が把握できない
function registerUserBad(
  firstName: string,
  lastName: string,
  age: number,
  email: string,
  isPremium: boolean
): void {
  console.log(`${lastName} ${firstName} (${age}歳) を登録しました。`);
}

// 🚨 呼び出す側が非常に危険（実務でのバグの温床）
// "yamada@example.com" と 25 の順番を間違えても気付きにくい。
// さらに、firstNameとlastNameを逆に渡してもTypeScriptはエラーを出してくれない。
registerUserBad("太郎", "山田", 25, "yamada@example.com", true);

// ❌ 順番を間違えた例（エラーは出ないが、結果がおかしくなる）
registerUserBad("山田", "太郎", 25, "yamada@example.com", true); 
// 出力: 太郎 山田 (25歳) を登録しました。 （苗字と名前が逆になってしまう）

TypeScriptのオブジェクトを使って引数を一つにまとめる方法

引数が多い場合の有効な対処法が、「複数の引数を1つのオブジェクト（箱）にまとめてから渡す」というテクニックです。

JavaScript界隈では「名前付き引数パターン」とも呼ばれます。

TypeScriptでは、interfaceやtypeを使って「引数専用のオブジェクトの型」を定義し、それを関数で受け取るようにします。

これにより、順番を気にする必要がなくなり、コードの可読性が劇的に向上します。

オブジェクトで引数を受け取れるようになった初心者が次にやりがちなのが、「関数の中でparams.firstNameのように何度もparams.と書いてコードを冗長にしてしまう」ことです。

実務のベストプラクティスは、関数がオブジェクトを受け取った瞬間に「分割代入」を行って、直接変数として取り出す書き方です。

これにより、関数の中身をスッキリと保つことができます。

// ⭕ 良い例：引数をまとめるための型（Interface）を定義する
interface UserParams {
  firstName: string;
  lastName: string;
  age: number;
  email: string;
  isPremium: boolean;
  phoneNumber?: string; // 後からオプショナルな項目も足しやすい！
}

// 関数の引数を「UserParams型のオブジェクト1つ」にする
// 💡 ベストプラクティス：受け取る時に { } を使って「分割代入」で取り出す
function registerUserGood({ firstName, lastName, age, email, isPremium }: UserParams): void {
  // params.firstName のように書かなくて済むためスッキリ！
  console.log(`${lastName} ${firstName} (${age}歳) を登録しました。Email: ${email}`);
}

// 呼び出す側（使う側）のコード
// オブジェクトの形で渡すため、「順番」はバラバラでも完全に機能する！
registerUserGood({
  email: "yamada@example.com", // 順番が違ってもOK
  lastName: "山田",            // 名前が明記されているため、逆に渡すミスが起きない
  firstName: "太郎",
  isPremium: true,
  age: 25,
});

まとめ

分かりやすいようにまとめを記載します。

よくある質問（FAQ）