TypeScript - デフォルトパラメータ

こんにちは、将来のプログラミングスーパースターたち！今日は、TypeScriptの素晴らしい世界に潜り込み、プログラマとしての生活をより簡単にする機能を探ってみましょう：デフォルトパラメータです。このレッスンの終わりまでに、あなたはこの強力なツールをプロ並みに使いこなすことができるようになります。では、始めましょう！

TypeScript - Default Parameters

デフォルトパラメータとは？

あなたがシェフだと思ってください（私の話を聞いてください、すぐにプログラミングに戻ります！）。毎日、美味しいスープを作っています。大多数の場合、スープに塩を加えます。しかし、時々、塩を入れないで欲しいという客がいます。その場合に、自動的に塩を入れないレシピがあれば素晴らしいですね。それがプログラミングにおけるデフォルトパラメータの役割です！

TypeScriptでは、デフォルトパラメータを使用して関数パラメータのデフォルト値を設定できます。関数がそのパラメータに値を提供せずに呼び出された場合、デフォルト値が使用されます。

簡単な例を見てみましょう：

function greet(name: string = "World") {
console.log(`Hello, ${name}!`);
}

greet(); // 出力: Hello, World!
greet("Alice"); // 出力: Hello, Alice!

この例では、"World"がnameのデフォルトパラメータです。greet()を引数なしで呼び出すと、"World"がデフォルトとして使用されますが、"Alice"などの名前を提供すると、それが使用されます。

デフォルトパラメータの使用理由

柔軟性：デフォルトパラメータにより、関数は特定の引数と無くても動作します。
クリーンなコード：関数内での条件分岐を減少させます。
読みやすさ向上：デフォルトパラメータにより、関数の標準的な値が明確になります。

デフォルトパラメータの使用方法

さらに多くの例で詳しく見ていきましょう：

基本的な使用方法

function calculateArea(width: number = 10, height: number = 5) {
return width * height;
}

console.log(calculateArea()); // 出力: 50
console.log(calculateArea(20)); // 出力: 100
console.log(calculateArea(7, 3)); // 出力: 21

この例では、widthとheightの両方にデフォルト値があります。関数を引数なし、1つの引数、または両方の引数で呼び出すことができます。

表現式をデフォルト値として使用する

デフォルトパラメータには、単純な値だけでなく表現式も使用できます：

function getRandomGreeting(name: string = "friend", time: Date = new Date()) {
const greetings = ["Hello", "Hi", "Hey", "Howdy"];
const randomGreeting = greetings[Math.floor(Math.random() * greetings.length)];
return `${randomGreeting}, ${name}! It's ${time.toLocaleTimeString()} now.`;
}

console.log(getRandomGreeting()); // 出力: 例: "Hey, friend! It's 3:45:30 PM now."
console.log(getRandomGreeting("Alice")); // 出力: 例: "Hello, Alice! It's 3:45:35 PM now."

ここでは、new Date()をtimeのデフォルト値として使用しており、関数が呼び出された時の現在日時を提供します。

他のタイプでのデフォルトパラメータ

デフォルトパラメータはTypeScriptのすべてのタイプで動作します：

function createUser(
name: string = "Anonymous",
age: number = 0,
isAdmin: boolean = false,
hobbies: string[] = []
) {
return { name, age, isAdmin, hobbies };
}

console.log(createUser());
// 出力: { name: "Anonymous", age: 0, isAdmin: false, hobbies: [] }

console.log(createUser("Alice", 30, true, ["reading", "coding"]));
// 出力: { name: "Alice", age: 30, isAdmin: true, hobbies: ["reading", "coding"] }

この例では、デフォルトパラメータが異なるタイプ（配列やブール値など）に使用されています。

オプションパラメータとデフォルトパラメータの違い

「待って、オプションパラメータ聞いたことがあるけど、デフォルトパラメータと何が違うの？」とお思いかもしれません。素晴らしい質問です！以下是その違いを説明します：

オプションパラメータ

オプションパラメータは?をパラメータ名の後ろに付けて、関数を引数なしで呼び出すことを許可します。

function greetOptional(name?: string) {
if (name) {
console.log(`Hello, ${name}!`);
} else {
console.log("Hello, stranger!");
}
}

greetOptional(); // 出力: Hello, stranger!
greetOptional("Bob"); // 出力: Hello, Bob!

デフォルトパラメータ

デフォルトパラメータは、引数が提供されない場合にデフォルト値を使用します。

function greetDefault(name: string = "stranger") {
console.log(`Hello, ${name}!`);
}

greetDefault(); // 出力: Hello, stranger!
greetDefault("Bob"); // 出力: Hello, Bob!

主要な違い

機能	オプションパラメータ	デフォルトパラメータ
シntax	パラメータ名の後ろに`?`を使用	パラメータの型の後ろに`= value`を使用
引数が提供されない場合	パラメータは`undefined`	パラメータはデフォルト値を使用
nullチェックの必要性	通常、関数本体でチェックが必要	追加のチェック不要
意図の明確さ	パラメータが省略されたときの動作が不明確	デフォルト動作が明確

一般的に、デフォルトパラメータはオプションパラメータよりも便利で、クリーンなコードを提供します。

デフォルトパラメータの最佳実践

意味のあるデフォルト値を使用：大多数のケースで意味のあるデフォルト値を選択します。
デフォルト値を文書化：デフォルト値がコードに記載されているにもかかわらず、関数のドキュメントに記載するのが良い慣習です。
可変オブジェクトのデフォルト値には注意：デフォルト値として可変オブジェクトを使用すると、予期せぬ動作を引き起こす可能性があります。
undefinedを考慮する：undefinedがデフォルト値を引き発するが、nullは引き発しません。

function exampleBestPractices(
requiredParam: string,
optionalParam: string = "default value",
anotherOptional: number = 42
) {
// 関数本体
}

結論

そして、皆さん！デフォルトパラメータを掌握してTypeScriptのスキルをレベルアップしました。デフォルトパラメータは、適切に使用すると強力なツールですが、慎重に使用することが重要です。デフォルトパラメータを使用することで、コードがより強固、読みやすく、柔軟になります。

あなたがプログラミングの旅を続ける中で、デフォルトパラメータを使用する機会が多くあります。もしかしたら、配送料の計算を行う関数でデフォルトの配送方法を使用するか、日付のフォーマットを設定する関数でデフォルトのフォーマットを使用するかもしれません。可能性は無限です！

引き続き練習し、コードを書き続け、TypeScriptを楽しみましょう。次回まで、ハッピーコーディング！

Credits: Image by storyset