先生と生徒の会話形式で理解しよう

生徒

「TypeScriptでは、関数を使うときに引数や戻り値に“型”をつけられるって聞いたんですが、どういう意味ですか？」

先生

「とても大事なポイントですね。TypeScriptでは、関数がどんな値を受け取って、どんな値を返すのかを“型”で指定できるんです。」

生徒

「なるほど…でも具体的にどう書くんですか？数字とか文字とか、色々あると思うんですけど…」

先生

「それでは、関数の引数と戻り値に型をつける基本から、順番にわかりやすく解説していきますね！」

1. TypeScriptで関数に型をつけるってどういうこと？

TypeScript（タイプスクリプト）では、関数が「どんな引数を受け取り、どんな値を返すのか」を あらかじめ型として決めておくことができます。これは、関数の動きを“説明書”のように明確にするイメージです。型をつけておくことで、プログラムが予想外の動きをするのを防ぎ、初心者でも安心して関数を扱えるようになります。

たとえば「2つの数字を受け取って、その合計を返す関数」を考えてみましょう。このとき、引数や戻り値に number型をつけておくと、誤って文字を渡した場合などにエラーで気づくことができます。これが TypeScript の大きな特徴であり、ミスを早い段階で防げるという利点があります。

実際に簡単な例を見てみましょう。


function plus(a: number, b: number): number {
    return a + b;
}

console.log(plus(3, 7)); // 正しく計算される

このように、(a: number, b: number): number と書くことで、関数が「数字を2つ受け取り、数字を返す」ことがはっきり示されています。もし "文字" のような違う型を渡すと、ビルド時にエラーが出て間違いにすぐ気づけるのです。型をつけることは、プログラム全体の安全性を高めるとても大切な習慣です。

2. 関数の「引数」に型をつける方法

関数の引数とは、関数を実行するときに渡す「入力データ」のことです。TypeScript では、この引数がどんな種類の値であるべきかを型で指定できます。型をつけておくことで、間違った値が渡されたときに早い段階で気づけるため、初心者でも安心してコードを書けるようになります。

まずは、もっとも基本的な引数の型指定を見てみましょう。次の関数は「名前を受け取り、あいさつを表示する」というシンプルな例です。


function greet(name: string) {
    console.log("こんにちは、" + name + "さん！");
}

greet("たろう");  // 正しく動く例

このように、name: string と書くことで、 name は必ず文字列（string）でなければいけないというルールが決まります。もし次のように誤って数字を渡してしまうと、TypeScript がエラーを出して教えてくれます。


greet(123);  // エラー：string 型ではありません

引数に型をつけることで、「この関数は何を受け取るべきなのか」がはっきりし、書いた本人だけでなく、あとでコードを読む人にも親切なプログラムになります。小さな関数でも型をつけておくことで、後々のバグ防止につながる大切な習慣になるのです。

3. 関数の「戻り値」に型をつける方法

関数の「戻り値」とは、関数の処理が終わったあとに返すデータです。戻り値の型は、引数の後ろに「: 型」と書いて指定します。


function add(a: number, b: number): number {
    return a + b;
}
const result = add(3, 5);
console.log(result);

この例では、(a: number, b: number): number というように、引数も戻り値も number型 として指定しています。

これにより、関数addは必ず「数字を受け取って、数字を返す」ことが保証されるのです。

4. 実行結果を見てみよう

先ほどのadd関数を実行すると、次のように出力されます。

5. 引数が複数ある場合の型のつけ方

関数に引数が2つ以上ある場合でも、それぞれに型をつけるだけです。カンマで区切って書きましょう。


function introduce(name: string, age: number): string {
    return `${name}さんは${age}歳です。`;
}
console.log(introduce("さくら", 25));

nameは文字列、ageは数字、そして戻り値はまた文字列（string）です。

6. 型をつけると何がうれしいの？

型をつけることで、次のようなメリットがあります。

間違った使い方を防げる（エラーが事前にわかる）
コードの意味が明確になる（どんな引数・戻り値か一目でわかる）
エディタの補完機能が使いやすくなる（開発がスムーズ）

初心者にとっては、安心してコードを書ける助けになります。

7. 戻り値が「ない」関数の型：void

関数の中でreturnを使わない（つまり何も返さない）場合は、戻り値の型としてvoidを使います。


function showMessage(message: string): void {
    console.log("メッセージ：" + message);
}
showMessage("こんにちは！");

void（ボイド）とは、「何も返さない」という意味の型です。返り値を使わない関数によく使います。

8. 省略もできるけど、最初は明示するのがおすすめ

TypeScriptはとても賢いので、型を省略しても自動的に判断してくれる（これを型推論しっかり型を書く練習をしましょう。

あとからコードを読む人にもわかりやすく、エラーも早めに気づけるようになります。

まとめ

TypeScriptで関数の引数や戻り値に型をつける方法は、はじめて学ぶ人にとって少し緊張する部分かもしれません。しかし、実際に試してみると、型をつけることで関数の使い方がとてもわかりやすくなり、間違った値を渡してしまう心配もぐっと減ります。ひとつひとつ丁寧に確認しながら型を指定していくと、関数の動きがより明確になり、コード全体の見通しも良くなります。引数に型をつけると、その関数を呼び出すときに「どんな値を渡せばいいのか」がすぐに分かり、戻り値の型を決めておくと、呼び出した側で扱うデータの種類もはっきりします。慣れてくると、型を指定しておくことが自然な流れになっていきます。

たとえば、複数の引数を持つ関数でも、それぞれに型を指定しておくと安心です。数字を受け取るのか、文字列を受け取るのか、または真偽値を使うのか、はっきり書かれていれば関数を使う側が迷わなくて済みます。特に、複数のファイルや大人数での開発では、型を明示しておくことで話が通じやすくなり、同じ処理をする関数でも統一された書き方ができるようになります。関数の戻り値についても、ただreturnするだけではなく、その戻り値がどんな役割を果たすのかを意識して型を書くことで、処理の流れがとても読みやすくなります。

そして、戻り値がない関数もあります。そんなときにはvoidという型を使って「何も返さない関数」であると明確にできます。何も返さない関数は、ログを出力したり画面を更新したりと、結果を返すより動作を優先する場面に多く使われます。型をつけることで、関数の役割をより正確に表現できます。

さらに、型をつける書き方はとても柔軟で、実際の開発ではさまざまな活用ができます。複雑な処理でも、型を指定しておけば迷いが少なくなります。特に、引数が複雑な構造になる場合、型があることで見通しを立てやすくなります。例えば、ユーザー情報や商品のデータなど、まとまった情報を扱いたい場合、型をつけておくと、後から読み返してもすぐ理解できます。実際に組み合わせてみると次のようになります。


type User = {
    name: string;
    age: number;
};

function showUser(u: User): string {
    return `${u.name}さんは${u.age}歳です。`;
}

const userA: User = { name: "たろう", age: 20 };
console.log(showUser(userA));

このコードでは、引数の型と戻り値の型がはっきり決められています。使う側としても、User型にどんな値を入れるべきかすぐ分かり、showUserが必ず文字列を返すことも明確です。こうした仕組みに慣れていくと、関数の書き方そのものが自然と整い、安心して広い範囲の処理に応用できるようになります。

引数の型や戻り値の型を付けることは、小さな積み重ねのようでいて、大きな効果を生みます。呼び出し側と定義側で認識がずれなくなり、エラーが起きても原因を探しやすくなります。特に複数人で開発するときには、型があるだけで確認の手間が大幅に減り、全体の速度も上がります。最初はひとつずつ慎重に型をつけていても、慣れていくと自然と手が止まらずに入力できるようになります。最終的には、自分の書いた関数をほかの人が見ても理解できる、自信の持てるコードにつながります。

関数の型は、ただ機械的に書くだけのものではありません。コードの意味を伝えるための言葉のようなものです。関数が何を受け取り、何を返すのか、型を通して表現できれば、それだけでコードが丁寧に整理された印象になります。TypeScriptの学習を続ける上で、この「型をつける」という考え方は、大きな支えになります。小さな習慣の積み重ねが、読みやすく、扱いやすく、そして安全なコードを生み出していきます。

もし、これから自分の作るアプリやサービスに関数が増えていくとしたら、そのたびに型をつける練習を続けてみるのも良い流れです。初めは時間がかかるように見えても、次第にスムーズに書けるようになり、理解も深まっていきます。関数を組み立てる際に、どんな引数が来るか、どんな値を返せば良いかを意識することで、プログラム全体の考え方が変わります。TypeScriptは初心者でも扱いやすい言語ですが、こうした型の書き方をしっかり覚えると、自信を持って大きなプロジェクトに挑戦できるようになります。

今後、より複雑な関数や処理を学習する場面でも、今回の「引数」と「戻り値」の型づけがしっかり理解できていれば、応用が自然にできるようになります。型をつける作業は、短いコードでも大きな違いを生む力を持っています。丁寧に書かれた関数は、誰が読んでも意味が伝わります。こうした積み重ねが、使いやすさ、保守性、そしてプログラム全体の品質につながります。

先生と生徒の振り返り会話

生徒

「TypeScriptで関数に型をつけると、引数も戻り値もはっきりしてすごく安心ですね！」

先生

「その通り。型があると、どんな値を使うのかが最初からわかるから、迷いが減るんだ。」

生徒

「特に複数の引数があるときは、型が付いていると読みやすくて助かります。」

先生

「実際の現場でも、引数と戻り値の型はとても大切なんだよ。」

生徒

「戻り値がない場合はvoidなんですね。ちゃんと書いておくことで役割がわかりやすいです。」

先生