#20 TypeScriptで学ぶ関数の応用(デフォルト引数・可変長引数)の基本

TypeScriptで関数を書いていると、「引数を渡さなかったときは決まった値を使いたい」「いくつ渡されるか分からない引数を受け取りたい」という場面によく出会います。今回はそんなときに役立つ「デフォルト引数」と「可変長引数(レスト引数)」という2つの機能を紹介します。どちらも、関数をより柔軟で使いやすくするための仕組みです。

デフォルト引数とは

「デフォルト引数」とは、関数を呼び出すときに引数を省略した場合に、あらかじめ決めておいた値(初期値)を自動的に使ってくれる仕組みです。呼び出し側が毎回すべての引数を指定しなくてもよくなるので、関数を使う側の手間が減ります。

書き方はとてもシンプルで、引数の後ろに = 初期値 を付けるだけです。

function greet(name: string, greeting: string = "こんにちは"): string {
  return `${greeting}、${name}さん!`;
}

console.log(greet("田中"));           // こんにちは、田中さん!
console.log(greet("鈴木", "おはよう")); // おはよう、鈴木さん!

上の例では、greetingに値を渡さなければ自動的に「こんにちは」が使われます。JavaScriptにも同じ書き方のデフォルト引数はありますが、TypeScriptでは型注釈と組み合わせられる点がポイントです。型注釈とは、その変数がどんな種類のデータかを示すラベルのようなものです。greeting: string = "こんにちは"のように書いておけば、「greetingは文字列型で、省略時は"こんにちは"になる」という情報がコード上ではっきりします。

なお、デフォルト引数は必ず引数リストの後ろの方に置くのが基本です。省略できない引数を先に、省略可能な引数を後にする順番を意識すると、呼び出し側も迷いにくくなります。

可変長引数(レスト引数)とは

「可変長引数」とは、いくつ渡されるか事前にわからない数の引数を、まとめて1つの配列として受け取る仕組みです。TypeScript(JavaScript)では「レスト引数(rest parameters)」と呼ばれ、引数名の前に ...(3つのドット)を付けて表します。

function sum(...numbers: number[]): number {
  return numbers.reduce((total, n) => total + n, 0);
}

console.log(sum(1, 2, 3));       // 6
console.log(sum(10, 20, 30, 40)); // 100

このsum関数は、引数を2個渡しても5個渡しても、渡された数だけ順番に処理してくれます。渡された引数はnumbersという1つの配列にまとめて格納されるので、reduceのような配列用の便利なメソッドをそのまま使えます。

C言語やJavaのように、可変長引数を実現するための特別な構文を別途覚える必要がある言語もあります。一方TypeScriptでは、配列の型注釈(number[]など)をそのまま流用できるので、配列の操作に慣れていれば違和感なく使い始められるはずです。

レスト引数を使うときの注意点

レスト引数は必ず引数リストの一番最後に置く必要があります。これは、コンパイラ(TypeScriptのコードをチェックし、実行できる形に変換するプログラム)が「どこまでが決まった引数で、どこからが可変長部分か」を正しく判断するためのルールです。

// OK: 決まった引数 → レスト引数の順番
function announce(prefix: string, ...items: string[]): string {
  return `${prefix}: ${items.join(", ")}`;
}

もし「決まった引数」と「レスト引数」を逆の順番で書こうとすると、TypeScriptがエラーを出して教えてくれます。慣れないうちはエラーメッセージに戸惑うかもしれませんが、これはミスに気づかせてくれる親切な機能だと捉えると気が楽になります。

2つを組み合わせて使う

デフォルト引数とレスト引数は同じ関数の中で一緒に使うこともできます。

function makeMessage(name: string, tag: string = "お知らせ", ...tags: string[]): string {
  return `[${tag}] ${name}さん ${tags.join(" / ")}`;
}

このように書けば、「名前は必須、タグは省略可、追加のタグは何個でも受け取れる」という柔軟な関数が作れます。実際の開発でも、設定を細かく調整できる関数を作りたいときによく使われる組み合わせです。

まとめ

今回は、TypeScriptの関数をより便利に使うための「デフォルト引数」と「可変長引数(レスト引数)」を紹介しました。デフォルト引数は「省略時の初期値」を、レスト引数は「数の決まっていない引数」を扱うための機能で、どちらも呼び出し側のコードをすっきりさせてくれます。TypeScriptでは型注釈と組み合わせて使えるので、関数がどんな引数を期待しているかがコードを読むだけで伝わりやすくなるのも嬉しいポイントです。最初は覚えることが多く感じるかもしれませんが、実際に自分の手で小さな関数を書いて試してみると、少しずつ自然に使えるようになっていきます。

関連記事

本ページはプロモーションを含みます。

参考書籍(PR)

TypeScriptをもっと学びたい方には「プロを目指す人のためのTypeScript入門」がおすすめです。

コメント

コメントを投稿

このブログの人気の投稿

#25 Rustで学ぶAI API(ChatGPT等)の呼び出し方の基本

ChatGPTのようなAI(人工知能)の機能を自分のアプリに組み込みたいとき、多くの場合は「AI API」と呼ばれる仕組みを使います。APIとは「Application Programming Interface」の略です。簡単に言えば、「あるサービスの機能を、プログラムから呼び出せるようにした窓口」のことです。この記事では、Rustから外部のAI APIをHTTPリクエストで呼び出す基本的な流れを、初心者向けに解説します。 AI APIを呼び出すとはどういうことか ChatGPTを提供するOpenAI社などは、インターネット経由でAIに質問を送り、回答を受け取れる「AI API」を公開しています。これはWebブラウザで検索するときのように、決まった宛先(URL)にデータを送信し、返ってきた結果を受け取る仕組みです。この「データを送って結果を受け取る」通信方式を、HTTPリクエストと呼びます。Rustのプログラムからこの通信を行うことで、自分のアプリの中でAIに質問し、回答を取得できるようになります。 reqwestクレートを使う Rustには標準でHTTP通信の機能は含まれていません。そこで使うのが「クレート」と呼ばれる外部ライブラリです。クレートはPythonのライブラリやJavaScriptのパッケージに近いもので、 Cargo.toml というファイルに追記するだけで簡単に導入できます。HTTP通信でよく使われるのが reqwest というクレートです。 Cargo.toml に次のように追記します(バージョン番号は執筆時点の例なので、実際に使う際は最新版を確認してください)。 [dependencies] reqwest = { version = "0.11", features = ["json"] } tokio = { version = "1", features = ["full"] } serde_json = "1.0" ここで tokio という見慣れないクレートも一緒に入れています。これは「非同期処理」と呼ばれる、通信の待ち時間の間に他の処理を進められる仕組みを扱うためのものです。ネットワーク通信は結果が返ってくるまで時間...
続きを読む

#8 C++で学ぶ文字列操作の基本

C++の文字列操作は、`std::string`という型を使うのが現代的な基本の書き方です。この記事では、C++における文字列操作の基本と、注意しておきたい落とし穴を解説します。 文字列を連結する std::string greeting = "こんにちは、" + name + "さん"; `std::string`同士であれば、`+`を使った連結がそのまま使えます。既存の文字列に追加する場合は`+=`や`append`メソッドも使えます。 greeting += "。よろしくお願いします。"; よく使う文字列操作 name.length() 文字数を調べる(バイト数であることに注意、後述) name.substr(0, 3) 一部分を取り出す(開始位置と長さを指定) name.find("A") 特定の文字の位置を探す(見つからなければ`std::string::npos`) name.replace(0, 2, "XX") 一部分を置き換える 文字列を数値に変換する 文字列を数値に変換したい場合は`std::stoi`(整数)や`std::stod`(小数)、逆に数値を文字列にしたい場合は`std::to_string`を使います。 int num = std::stoi("123"); std::string s = std::to_string(456); 文字列を分割する C++の標準ライブラリには、他言語の`split`のような文字列分割の関数が長らく用意されていませんでした。`std::stringstream`を使うのが伝統的な方法です。 #include <sstream> std::stringstream ss("a,b,c"); std::string item; while (std::getline(ss, item, ',')) { std::cout << item << std::endl; } C++ならではの注意点 C++には、古くからある`char`の配列を...
続きを読む

#16 TypeScriptで学ぶ辞書型(マップ)の基本

TypeScriptの辞書に相当する仕組みは、JavaScriptと同じですが、キーと値の型をあらかじめ決めておけるのが特徴です。この記事では、TypeScriptにおける辞書の扱い方と、用途別の型の選び方を解説します。 型付きのオブジェクト interface Person { name: string; age: number; } const person: Person = { name: "太郎", age: 20 }; キーの型が決まっていない辞書 キーの名前が事前に決まっていない辞書のような使い方をしたい場合は、次のように書きます。 const scores: { [key: string]: number } = {}; scores["太郎"] = 90; 同じ意味を Record というユーティリティ型で簡潔に書くこともできます。 const scores: Record = {}; Mapを使う場合 const person = new Map (); person.set("name", "太郎"); console.log(person.get("name")); Map<string, string> のように、キーと値それぞれの型を指定できます。 Object と違い、キーの数を person.size で正確に取得できる、キーの型を文字列以外にもできるといった利点があります。 値が存在しないかもしれない場合 キーが実在するとは限らない辞書の場合、値の型に | undefined を含めておくと、より正確な型になります。 const scores: { [key: string]: number | undefined } = {}; const value = scores["三郎"]; // number | undefined 型 こうしておくと、存在しないキーへのアクセスがコンパイル時に見過ごされにくくなります。 存在しないキーへのアクセスを防ぐ tsconfig.json で noUncheckedIndexedAccess を有効にす...
続きを読む