TypeScriptで関数を定義する基本構文と書き方

1. 関数とは？

1. 関数とは？

関数とは、よく使う処理をひとまとめにして「名前」をつけておく仕組みです。あとからその名前を呼び出すだけで、中に書いておいた処理を何度でも実行できます。

例えば、毎回「あいさつの文章」を表示したいときに、そのたびに同じコードを書くのは大変ですよね。そこで「あいさつ専用の関数」を作っておくと、その関数を呼ぶだけで同じ処理を簡単に使い回せます。

イメージとしては、「あいさつボタン」「計算ボタン」のようなものを、自分で作っておく感じです。ボタンに名前を付けておけば、必要なときにそのボタンを押すだけで、同じ動きをしてくれます。

function greetUser() {
    console.log("こんにちは！ TypeScriptの関数の世界へようこそ！");
}

greetUser(); // 関数を呼び出して実行する

上のサンプルでは、greetUserという名前の関数を用意しています。中には「あいさつの文章を表示する」という処理がまとまっています。実際に処理を動かしたいときは、下の行のようにgreetUser()と書いて「呼び出す」だけです。

このように、TypeScriptで関数を使うと「同じ処理をくり返し書かなくてよい」「あとから意味のまとまりごとに見直しやすい」といったメリットがあります。TypeScriptではJavaScriptと同じように関数を使えますが、後の章で出てくる「型（たとえば文字か数字か）」と組み合わせることで、より安全で分かりやすいコードを書けるようになります。

2. TypeScriptの基本的な関数の書き方

2. TypeScriptの基本的な関数の書き方

ここでは、TypeScriptの関数が実際にどのような形で書かれるのか、いちばん基本的なパターンを見ていきます。

まずは、「こんにちは！」というあいさつの文章を画面に表示するだけの、とてもシンプルな関数を作ってみましょう。

function greet(): void {
    console.log("こんにちは！");
}
greet(); // 関数を呼び出します

このサンプルの1行目は、関数を「定義」している部分です。functionは「これから関数を作るよ」という合図となるキーワードです。そのすぐ後ろにあるgreetが関数の名前で、「あいさつする処理だな」と分かるような名前にしておくと、あとからコードを読むときに理解しやすくなります。

()（丸かっこ）の中には、本来は「関数に渡す値（引数）」を書くことがありますが、この段階では何も受け取らないので空のままにしてあります。その後ろの: voidは「この関数は値を返さないよ」という意味です。あいさつするだけで、なにか計算結果を返すわけではないので、このような書き方になります。

{ }（波かっこ）で囲まれている部分が、関数の中身です。ここには実際にやってほしい命令を書きます。今回の例では、console.log("こんにちは！");という1行だけが入っており、「こんにちは！」というメッセージをコンソールに表示します。

greet();
greet();

下のサンプルのように、同じgreet()を2回書けば、関数の中身が2回実行されます。関数は一度定義しておけば、必要なだけ何度でも呼び出せるくり返し可能な処理のセットだとイメージすると分かりやすいです。

このように、TypeScriptの基本的な関数は「キーワード」「名前」「かっこ」「中身（処理）」という4つのパーツを押さえれば怖くありません。まずは今回のようなシンプルな例から慣れていき、徐々に引数や戻り値を使った少し複雑な関数にステップアップしていきましょう。

3. 引数ありの関数を作る

3. 引数ありの関数を作る

ここでは、関数に「情報を渡す」と、どのように処理の内容が変わるのかを見ていきます。関数に渡す追加の情報のことを引数（ひきすう）と呼びます。引数を使うことで、同じ関数でも受け取る値によって動きを変えられるようになります。

たとえば、誰にあいさつするのかを引数で受け取り、その名前を使ってメッセージを作る関数を考えてみましょう。

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

sayHello("たろう");
sayHello("はなこ");

この例では、name: stringと書くことで「name という引数には、文字列（string）を渡してくださいね」という約束をしています。引数は、関数が動くための材料のようなもので、料理に例えるなら「具材」を渡すイメージです。渡された具材によって、できあがる料理（表示されるメッセージ）が変わるわけです。

下の2つの呼び出し例のように、渡す名前が変われば表示される文章も変わります。引数を使うことで、関数をより柔軟に、そして再利用しやすくすることができます。

sayHello("ゆき");
sayHello("まこと");

このように、引数は「関数にとって必要な材料を外から渡すための入口」です。引数があることで、同じ関数でもさまざまな用途に対応できるようになり、プログラム全体の見通しも格段によくなります。

4. 戻り値を返す関数の書き方

4. 戻り値を返す関数の書き方

関数は、単に処理を実行するだけでなく、その結果を呼び出し元へ渡すこともできます。この「関数が外に返す値」のことを戻り値と呼びます。戻り値があることで、関数を計算機のように使い、結果を次の処理に活用できるようになります。

たとえば、2つの数字を足して、その合計を返すシンプルな関数を見てみましょう。戻り値の仕組みを理解するにはとても良い例です。

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

let result = addNumbers(3, 5);
console.log("合計は: " + result);

この例のポイントは、関数名の後ろにある: numberです。これは「この関数は数字を戻り値として返しますよ」という宣言になります。書いておくことで、TypeScriptが「この関数が返すものは数字だ」と判断し、コードの safety（安全性）も高まります。

関数の中では、returnというキーワードを使って値を返します。上の例ではa + bがそのまま戻り値となり、呼び出し元のresultに数字が入る仕組みです。

let total1 = addNumbers(10, 20);
let total2 = addNumbers(7, 8);

console.log(total1); // 30
console.log(total2); // 15

このように、戻り値がある関数は「計算結果を受け取って使いたいとき」にとても役立ちます。引数と組み合わせることで、関数がさらに柔軟に働き、プログラム全体の見通しも良くなるのが特徴です。

5. 無名関数とアロー関数の書き方

5. 無名関数とアロー関数の書き方

関数には名前をつける以外に、無名関数（名前のない関数）という書き方もあります。

特に「アロー関数」と呼ばれる書き方は、簡潔でよく使われます。

const multiply = (x: number, y: number): number => {
    return x * y;
};
console.log(multiply(4, 3));

=>の部分が「アロー（矢印）」の形をしているので「アロー関数」と呼ばれます。

const multiplyで、関数を変数に代入しているというイメージです。

6. 関数の型注釈を使うメリット

6. 関数の型注釈を使うメリット

TypeScriptでは、関数に型をつけることで、プログラムのミスを減らすことができます。

たとえば、文字ではなく数字が必要な関数に、まちがって文字を渡そうとすると、TypeScriptが「これは間違ってるよ！」と教えてくれます。

これを静的型チェックといい、大きなプロジェクトでも安心してコードを書ける仕組みです。

7. 関数の中で別の関数を呼び出す

7. 関数の中で別の関数を呼び出す

関数の中で、他の関数を使うこともできます。処理を分けることで、読みやすくて整理されたコードが書けるようになります。

function getGreeting(name: string): string {
    return "こんにちは、" + name + "さん！";
}

function greetUser() {
    let message = getGreeting("さくら");
    console.log(message);
}

greetUser();

getGreetingという関数でメッセージを作って、greetUserという関数がそれを使っています。

このように、関数の再利用ができるのもプログラミングの大きな魅力です。

まとめ

まとめ

TypeScript（タイプスクリプト）における関数の定義は、プログラミングの基礎の中でも特に重要な要素のひとつです。関数とは、ひとまとまりの処理に名前をつけて再利用できる仕組みであり、コードの見通しを良くしたり、同じ処理を何度も書く手間を省いたりするために欠かせません。

TypeScriptでは、JavaScriptと同じように関数を書けるだけでなく、引数や戻り値に型注釈をつけることができるのが特徴です。これにより、関数の使い方を明確にし、間違った型の値が渡された場合にもコンパイル時にエラーとして検出できます。

たとえば、「文字列型の名前を受け取ってあいさつを表示する関数」や、「2つの数値を加算して結果を返す関数」など、目的ごとに型を定義することで、安全で読みやすいコードを書くことができます。以下に、今回学んだ内容を活用したサンプルコードを紹介します。

サンプル：型付きの関数を複数定義して使い分ける

// 名前を受け取ってあいさつする関数
function sayHi(name: string): string {
    return `こんにちは、${name}さん！`;
}

// 数値を受け取って倍にするアロー関数
const double = (value: number): number => {
    return value * 2;
};

// 結果を表示するだけの関数（戻り値なし）
function showResult(message: string): void {
    console.log(message);
}

// 使用例
let greeting = sayHi("りん");
let doubled = double(10);
showResult(greeting);
showResult("2倍の結果は: " + doubled);

こんにちは、りんさん！
2倍の結果は: 20

上記のように、関数の型注釈を活用することで、処理の目的と戻り値の型が明確になり、コードの信頼性が一気に高まります。

また、TypeScriptではアロー関数や無名関数を使って、より簡潔に記述することも可能です。開発の現場では、アロー関数が特に多く用いられ、イベント処理やコールバック関数などでも大活躍します。

さらに、関数の中で別の関数を呼び出したり、関数を変数として扱ったりすることで、柔軟な構造のコードを組み立てることができます。関数をブロックのように組み合わせていく感覚は、まさにプログラミングの醍醐味といえるでしょう。

今回の記事を通じて、「関数の基本構文」「引数と戻り値の書き方」「アロー関数の記法」「型注釈の重要性」など、TypeScriptで関数を定義する際に知っておきたいポイントを一通り学べたはずです。関数をマスターすることで、今後の開発に大きな自信が持てるようになりますよ。

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

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

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

TypeScriptで関数とは何ですか？初心者でも理解できる意味を教えてください

TypeScriptにおける関数とは、あらかじめ処理をひとまとめにして名前をつけ、必要なときに呼び出せる便利な仕組みです。あいさつをする処理や計算する処理を何度も使い回すことができ、コードの重複を減らして読みやすく整理されたプログラムを作れるのが大きな特徴です。

TypeScriptの関数はJavaScriptとどう違うのですか？初心者でもわかりますか？

TypeScriptの関数は基本的な書き方はJavaScriptと同じですが、引数や戻り値に型を指定できる点が大きく違います。型を指定することで間違ったデータが渡されるのを防ぎ、エラーが早い段階で見つけやすくなるため、初心者でも安全に開発できます。

TypeScriptで関数を定義する基本構文が知りたいです

TypeScriptの関数はfunctionというキーワードから始まり、関数名、引数、戻り値の型、処理の内容を順番に書きます。関数に型をつけることでプログラムの安全性が高まり、関数がどんな動きをするのか理解しやすくなります。