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("たろう");

この関数では、name: stringと書くことで、「文字列（string）型」の名前を受け取るよと宣言しています。

このように、関数に渡すデータのことを引数（ひきすう）といいます。

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

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

関数は、計算した結果などを呼び出し元に返すこともできます。それを戻り値と呼びます。

次の例では、2つの数字を足して、合計を返す関数です。

function addNumbers(a: number, b: number): number {
    return a + b;
}
let result = addNumbers(3, 5);
console.log("合計は: " + result);

a: numberとb: numberは、どちらも「数字型」の引数です。

: numberと関数名の後ろにあるのは、「この関数は数字を返すよ」という意味です。

returnは「この値を返すよ」という命令です。

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