TypeScriptで関数を引数として渡す方法を徹底解説！初心者でもわかる実装例

1. 関数を引数に渡すとは？

1. 関数を引数に渡すとは？

TypeScriptでは、関数を引数として渡すことができます。これは「コールバック関数」と呼ばれることもあります。コールバック関数とは、ある関数に処理方法を渡して、その中で呼び出してもらう仕組みです。

イメージしやすい例でいうと、「料理教室の先生にレシピ（手順）を渡して、先生がそのレシピ通りに作ってくれる」という感じです。渡すのは料理そのものではなく、料理の作り方です。TypeScriptでは、関数がその“作り方”の役割を果たします。

2. 基本的な書き方

2. 基本的な書き方

まずはシンプルな例を見てみましょう。次のコードでは、「関数を引数として渡す」流れを体験できます。

// 数字を2倍にする関数
function double(x: number): number {
    return x * 2;
}

// 関数を引数として受け取る関数
function processNumber(num: number, callback: (n: number) => number): void {
    const result = callback(num);
    console.log("結果:", result);
}

// doubleを引数として渡す
processNumber(5, double);

実行すると、次のような結果になります。

結果: 10

ここで注目してほしいのは、processNumberという関数が、数値と一緒に関数そのものを受け取っている点です。そして受け取った関数をcallback(num)として実行しています。

3. 無名関数（アロー関数）を渡す

3. 無名関数（アロー関数）を渡す

わざわざ関数を別で作らなくても、その場で「処理のやり方」を書いて渡すこともできます。これにはアロー関数をよく使います。

// その場で関数を作って渡す
processNumber(7, (n: number) => n * n);

結果: 49

この場合は「7を2乗する」という処理を、その場で渡していることになります。わざわざ名前を付けて定義しなくてもOKなので、ちょっとした処理に便利です。

4. 複数の処理を切り替える

4. 複数の処理を切り替える

関数を引数に渡せると、処理を柔軟に切り替えることができます。例えば「足し算」「引き算」「掛け算」を渡してみましょう。

// 足し算
function add(a: number, b: number): number {
    return a + b;
}

// 引き算
function subtract(a: number, b: number): number {
    return a - b;
}

// 掛け算
function multiply(a: number, b: number): number {
    return a * b;
}

// 計算処理を切り替える関数
function calculate(a: number, b: number, operation: (x: number, y: number) => number): void {
    const result = operation(a, b);
    console.log("計算結果:", result);
}

// 関数を切り替えて渡す
calculate(10, 5, add);
calculate(10, 5, subtract);
calculate(10, 5, multiply);

計算結果: 15
計算結果: 5
計算結果: 50

このように「どの計算をするか」を引数の関数で切り替えられるので、非常に便利です。まるでリモコンのボタンを押すように、処理を自由に切り替えられるイメージです。

5. 関数を引数に渡すメリット

5. 関数を引数に渡すメリット

初心者の方にとって「なぜこんなことをするの？」と疑問に思うかもしれません。関数を引数に渡すメリットはたくさんあります。

• 処理を自由に切り替えられる
• 同じ枠組みで異なる動作をさせられる
• コードの再利用性が高まる
• プログラムの柔軟性が向上する

特にWebアプリケーションの開発では「ボタンを押したときにどうするか」など、イベント処理で関数を引数に渡すケースが多くあります。これを理解すると、より実践的なプログラミングに進みやすくなります。

まとめ

まとめ

TypeScriptで関数を引数として渡すテクニックは、実は初心者ほど早めに身につけておくと役立つ場面が多い重要な考え方です。特に、画面操作やイベント処理、データ加工や非同期処理など、現代的なWeb開発では当たり前のように使われています。この記事の内容を振り返ると、関数をそのまま引数として渡すことで、処理そのものを柔軟に切り替えられるという大きなメリットがありました。まるで作業手順を別の人に渡して実行してもらうように、やり方を渡すという発想が大切です。ここでは、学んだ内容のまとめとあわせて、より実践的なサンプルも紹介しながら、TypeScriptの関数を使った設計について深く掘り下げていきます。

関数を引数に渡す本質と活用幅

初心者が最初に混乱しやすいのは「値ではなく関数そのものを渡す」という点です。しかし、一度動きと構造を理解すると、呼び出し側と処理側をきれいに切り離せる強力さに気づくはずです。例えば、計算処理を渡す、文字列を加工する方法を渡す、データをフィルタリングする条件式を渡す、イベント発生時の動作を渡す、など応用の幅はとても広く、Webフロントエンドとサーバーサイドのどちらでも大活躍します。

特にTypeScriptでは型を書けるため、引数となる関数も厳密に“どんな形の関数なのか”を指定できます。これによって「間違った形の関数を渡して動かない」といったミスを大幅に減らすことができ、安全で読みやすいコードになります。さらに、開発ツールの補完機能も働くため、引数として渡す関数の構造が明確に理解でき、初心者でも正確に呼び出せます。

実務で役に立つ応用パターン

実際の開発では、配列操作やフォーム入力チェック、非同期処理の成功・失敗時のコールバック、ユーザー操作イベントの動作切り替えなど、多岐にわたって関数を引数に渡す場面が登場します。中でも配列の加工は非常に身近で、mapやfilterなどの日常的に使う関数も、内部では「関数を引数に渡す」仕組みが使われています。こうした標準機能の内部構造を理解することは、より高度なJavaScriptやTypeScriptの書き方に進むための基礎にも繋がります。

応用サンプル：配列データを条件で加工する処理

ここでは、アクセスの多いWebサービスでよく使われる「配列データの加工」に焦点を当て、関数を引数に渡して処理を切り替える応用例を紹介します。この例では、データをどのように変換するかを丸ごと関数で渡し、表示の仕方や加工方法を自由に変更できるようにしています。

// 配列を加工する共通関数
function transformList<T, R>(items: T[], callback: (item: T) => R): R[] {
    const result: R[] = [];
    for (const element of items) {
        result.push(callback(element));
    }
    return result;
}

// 元データ
const users = [
    { name: "太郎", score: 80 },
    { name: "花子", score: 92 },
    { name: "健太", score: 75 }
];

// 加工方法A：名前を取り出す
const names = transformList(users, (u) => u.name);

// 加工方法B：得点を2倍にする
const doubleScore = transformList(users, (u) => u.score * 2);

console.log(names);
console.log(doubleScore);

この例のポイントは、加工するための関数を外部から渡すことで、呼び出し側が自由に変換ルールを用意できる点です。共通関数側はそのルールを知らなくても動作し、非常に柔軟なデータ処理を実現できます。これは「関数を引数として渡す」概念を実務で使う際の代表的な重要パターンです。

学んだ内容を整理する

ここまでの内容を整理すると、関数を引数に渡す仕組みには次のような価値があります。処理の切り替えが簡単になる、似た構造の関数を効率的に再利用できる、イベント処理や非同期処理と相性が良い、大規模開発でも無理のない設計ができるなど、多くの利点があります。TypeScriptの型指定と組み合わせれば安全性も高まり、読みやすさと保守性も向上します。

また、初心者がつまずきやすいポイントである「関数を値として扱う」発想も、実際に手を動かして動作を見ることで理解しやすくなります。最初は難しく感じても、慣れればとても自然に使える知識なので、ぜひ繰り返し練習してみてください。

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

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

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

TypeScriptで関数を引数として渡すとはどういう意味ですか？

TypeScriptで関数を引数として渡すとは、関数そのものを他の関数に渡して、必要なタイミングで実行できるようにする仕組みです。これは「コールバック関数」とも呼ばれ、プログラムの柔軟性を高めるためによく使われます。