TypeScriptで関数にデフォルト引数を設定する方法をやさしく解説！初心者向け完全ガイド

1. デフォルト引数とは？

1. デフォルト引数とは？

TypeScriptのデフォルト引数とは、関数の引数に「最初から設定しておく値」のことです。関数を呼び出すときに引数を渡さなかった場合、このデフォルト値が自動的に使われます。これにより、引数の書き忘れや、省略しても動作させたい場合にとても便利です。

例えば、料理のレシピで「何も指定しなければ砂糖は小さじ1杯」というルールを作るようなものです。必要なら値を変えることもできますし、指定しなければあらかじめ決めた量が使われます。

2. デフォルト引数の基本構文

2. デフォルト引数の基本構文

デフォルト引数は、関数定義の引数部分で「= 値」と書くだけで設定できます。TypeScriptでは型注釈（型アノテーションといいます）も一緒に書くことで、より安全にコーディングできます。

function greet(name: string = "ゲスト") {
    console.log(`こんにちは、${name}さん！`);
}

greet(); // 引数なし
greet("太郎"); // 引数あり

実行結果：

こんにちは、ゲストさん！
こんにちは、太郎さん！

3. デフォルト引数を使うメリット

3. デフォルト引数を使うメリット

デフォルト引数を使うことで、関数を呼び出すときのコードがシンプルになり、引数をうっかり忘れてもエラーになりにくくなります。また、コードの意図が明確になり、「この引数が省略されたら何が入るのか」が一目でわかります。

• 引数を省略できるので呼び出しが簡単
• 意図しないundefined（未定義）によるエラーを減らせる
• 関数の使い方が明確になる

4. 複数のデフォルト引数を設定する

4. 複数のデフォルト引数を設定する

複数の引数にデフォルト値を設定することも可能です。ただし、デフォルト値がない引数を先に書き、デフォルト値がある引数を後ろに書くのが一般的です。

function createUser(name: string, age: number = 18, country: string = "Japan") {
    console.log(`名前: ${name}, 年齢: ${age}, 国: ${country}`);
}

createUser("花子");
createUser("次郎", 25);
createUser("太郎", 30, "USA");

実行結果：

名前: 花子, 年齢: 18, 国: Japan
名前: 次郎, 年齢: 25, 国: Japan
名前: 太郎, 年齢: 30, 国: USA

5. デフォルト引数と型推論

5. デフォルト引数と型推論

TypeScriptは、デフォルト引数の値から型を自動的に推論することができます。そのため、必ずしも型注釈を書く必要はありません。しかし、明示的に型を書くことでコードの意図がはっきりし、可読性や保守性が向上します。

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

console.log(multiply());      // 6
console.log(multiply(5));     // 15
console.log(multiply(4, 4));  // 16

6. デフォルト引数とundefinedの関係

6. デフォルト引数とundefinedの関係

デフォルト引数は、引数がundefinedだった場合にだけ適用されます。null（空っぽの値）や他の値が渡された場合は、その値が使われます。

function showMessage(message: string = "こんにちは") {
    console.log(message);
}

showMessage();          // こんにちは（デフォルト適用）
showMessage(undefined); // こんにちは（デフォルト適用）
showMessage(null);      // null（そのまま使われる）

7. 実務でのデフォルト引数の使いどころ

7. 実務でのデフォルト引数の使いどころ

デフォルト引数は、特に以下のような場面で役立ちます。

• ログ出力やメッセージ表示の初期文言を決めたいとき
• APIリクエストのパラメータに標準値を設定したいとき
• 設定値が渡されなくても動く安全な関数を作りたいとき

こうした場面でデフォルト引数を活用すれば、コードの安全性と使いやすさが向上します。

まとめ

まとめ

TypeScriptで関数にデフォルト引数を設定する方法を学ぶことで、より柔軟でエラーの少ないコードを書く力が身につきます。関数を呼び出す際に、すべての引数を毎回指定しなくてもよくなるため、コードの記述量を減らしながらも、意図した動作を維持できるのが大きな利点です。

特に、初期値を使いたい処理や、ユーザーが省略したときでも正しく動かしたい関数には非常に有効です。また、デフォルト引数の構文は非常にシンプルで、関数の引数部分に= 値を加えるだけなので、初心者でもすぐに使いこなせるようになります。

たとえば次のように、複数のデフォルト引数を設定することで、柔軟な関数が簡単に書けるようになります。

function sendMessage(
    user: string = "ゲスト",
    message: string = "ようこそ！",
    isAdmin: boolean = false
) {
    const prefix = isAdmin ? "[管理者]" : "";
    console.log(`${prefix}${user}さん：${message}`);
}

sendMessage(); // [なし]ゲストさん：ようこそ！
sendMessage("たろう"); // [なし]たろうさん：ようこそ！
sendMessage("はなこ", "お疲れさま！", true); // [管理者]はなこさん：お疲れさま！

上記のように、引数が省略されても、あらかじめ用意された値で処理が進むため、関数の安全性が向上します。また、undefinedが渡されたときにはデフォルトが適用され、nullや明示的な値が渡されたときには、それをそのまま利用するという挙動も理解しておくべき重要なポイントです。

さらに、TypeScriptでは型注釈を併用することで、デフォルト引数の型が明示でき、コードの保守性や可読性が向上します。たとえばチーム開発や長期的な保守において、「この関数には何が渡るのか」「省略時はどう動くのか」を把握しやすくなるのです。

最後にもう一つ例を見てみましょう。

function calculateTax(price: number, rate: number = 0.1): number {
    return price * (1 + rate);
}

console.log(calculateTax(1000)); // 1100
console.log(calculateTax(1000, 0.08)); // 1080

このように、税率などが一定の場合にはデフォルト値を設定しておくと非常に便利です。呼び出す側は必要に応じて引数を省略でき、関数の内部では安全に処理が進むという理想的な状態を実現できます。

TypeScriptのデフォルト引数は、日常的な関数設計の中で非常に役立つ基本機能ですので、ぜひ積極的に活用していきましょう。