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

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

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

TypeScriptのデフォルト引数とは、関数の引数にあらかじめ「初期値」を設定しておく仕組みのことです。関数を呼び出すときに引数を省略すると、自動的にその初期値が使われます。そのため、毎回同じ値を渡す手間が省け、初心者でも扱いやすい書き方になります。

たとえば「名前が指定されなければ『ゲスト』として扱う」といったルールを、コードの中に自然な形で組み込めます。これは、日常生活で「特に指定がなければ標準設定で進める」という考え方とよく似ています。

プログラミング未経験の方でも、省略したときの動きが想像しやすいのが、デフォルト引数の大きな特徴です。

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

sayHello();        // 引数を省略
sayHello("太郎");  // 引数を指定

このように書くことで、引数を渡さなかった場合でもエラーにならず、決まったメッセージを表示できます。まずは「引数を省略しても動く関数を作れる」と覚えておくと理解しやすいでしょう。

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

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

デフォルト引数は、関数の引数に「最初から入れておく値（初期値）」を決めておく書き方です。TypeScriptでは、引数名のあとに= 値を付けるだけで設定できます。引数を省略して関数を呼び出した場合でも、あらかじめ決めた値が使われるので、呼び出し側のコードがスッキリします。

また、TypeScriptでは型注釈（型アノテーション）を一緒に書けるのがポイントです。「この引数には文字列が入る」といったルールがはっきりするため、間違った値を渡してしまうミスを減らしやすくなります。

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

greet();      // 引数なし → "ゲスト" が使われる
greet("太郎"); // 引数あり → "太郎" が使われる

実行結果：

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

この例では、nameを省略すると自動的に「ゲスト」になり、値を渡したときだけその値に置き換わります。まずは「省略されたらデフォルト、渡されたらその値」という動きを押さえると、デフォルト引数の基本がスッと理解できます。

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

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

デフォルト引数を使うメリットは、「呼び出す側が楽になる」ことと、「想定外の値でつまずきにくくなる」ことです。毎回同じ初期値を渡す必要がなくなり、必要なときだけ引数を指定すればOKになります。結果として、関数の使い方がシンプルになり、初心者でも読み書きしやすいコードに近づきます。

もうひとつ大きいのは、引数を渡し忘れたときに起こりがちなundefined（未定義）によるミスを減らせる点です。「省略されたらこの値を使う」というルールが関数の定義に書かれるので、呼び出し側の意図も伝わりやすくなります。

function welcome(name: string = "ゲスト") {
    console.log(`ようこそ、${name}さん`);
}

welcome();          // 省略しても動く
welcome("花子");    // 必要なときだけ指定

• 引数を省略できるので、関数呼び出しが短く書けてわかりやすい
• 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のデフォルト引数は、日常的な関数設計の中で非常に役立つ基本機能ですので、ぜひ積極的に活用していきましょう。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

TypeScriptで関数のデフォルト引数とは何ですか？初心者向けにわかりやすく教えてください

TypeScriptの関数におけるデフォルト引数とは、引数が省略された場合に自動で使われるあらかじめ設定された値のことです。初心者にとっても、引数を毎回指定せずにすむので便利で、ミスを防ぐ助けになります。