JavaScriptの関数を引数として渡す方法を学ぼう

1. JavaScriptの関数は「値」として扱える

1. JavaScriptの関数は「値」として扱える

JavaScriptでは、関数はただの命令の集まりではなく「値」として扱えます。つまり、変数に関数を代入したり、他の関数の引数として渡すことができます。

例えば、数字や文字を変数に入れるのと同じように、関数も変数に入れられます。

function sayHello() {
  console.log("こんにちは！");
}

const greet = sayHello; // 関数を変数に代入
greet(); // こんにちは！

このように、sayHelloという関数をgreetという変数に入れて使うことができます。

2. 関数を引数として渡すとは？

2. 関数を引数として渡すとは？

関数を引数として渡すとは、ある関数の中に別の関数を「渡して」その関数を実行したり使ったりすることです。

わかりやすく例えると、料理を作るときに「調味料をかける」関数があって、その調味料のかけ方を別の関数として渡すようなものです。

// 調味料をかける関数
function applySeasoning(dish, seasoningFunc) {
  seasoningFunc(dish);
}

// 具体的な調味料の関数
function addSalt(dish) {
  console.log(dish + "に塩をかけました。");
}

applySeasoning("野菜サラダ", addSalt);

ここで、applySeasoningは「料理」と「調味料をかける方法（関数）」を受け取り、その調味料関数を実行しています。

3. なぜ関数を引数に渡すの？メリットは？

3. なぜ関数を引数に渡すの？メリットは？

関数を引数として渡すことで、処理を柔軟に変えられます。例えば、同じ料理でも調味料を変えるだけで味が変わるのと同じように、処理の内容を変えられます。

これにより、コードの再利用や分かりやすさがアップし、プログラムがシンプルになります。

4. 実践例：配列の要素に関数を使って操作する

4. 実践例：配列の要素に関数を使って操作する

JavaScriptの配列には、関数を引数に取るメソッドがたくさんあります。例えばmapは、配列の各要素に対して関数を使って新しい配列を作る方法です。

const numbers = [1, 2, 3, 4];

function double(num) {
  return num * 2;
}

const doubledNumbers = numbers.map(double);
console.log(doubledNumbers); // [2, 4, 6, 8]

ここでは、doubleという関数をmapに渡して、配列の数字を2倍にしています。

5. 無名関数（アロー関数）で書く方法

5. 無名関数（アロー関数）で書く方法

関数を引数に渡すときに、名前をつけない関数（無名関数）を書くこともよくあります。最近はアロー関数という書き方がよく使われています。

const numbers = [1, 2, 3, 4];

const doubledNumbers = numbers.map(num => num * 2);

console.log(doubledNumbers); // [2, 4, 6, 8]

このように、関数を直接引数の中に書いて渡すこともできます。

6. 関数を引数に渡す時の注意点

6. 関数を引数に渡す時の注意点

• 関数名の後ろに () を付けないこと。付けるとすぐに実行されてしまいます。
• 渡された関数は、渡された側の関数の中で呼び出されるまで実行されません。
• わかりやすくするために、関数の役割や名前を工夫すると良いです。

// 正しい渡し方
function greet() {
  console.log("こんにちは！");
}

function runFunction(func) {
  func(); // ここで実行
}

runFunction(greet); // OK

// 間違った渡し方
runFunction(greet()); // 関数がすぐ実行されるのでNG

まとめ

まとめ

ここまでJavaScriptにおける「関数を引数として渡す方法」について、基礎から応用まで詳しく解説してきました。 プログラミング初心者の方にとって、最初は「関数の中にさらに関数を入れる」という概念が少し複雑に感じられたかもしれません。 しかし、JavaScriptの世界では、関数は数値や文字列と同じように「第一級オブジェクト（First-class object）」として扱われます。 この「関数を値として自由に扱える」という特徴こそが、JavaScriptの柔軟性と強力な表現力を支えている大きなポイントなのです。

高階関数とコールバック関数の重要性

専門的な用語を使うと、関数を引数として受け取る側の関数を「高階関数（Higher-order function）」と呼び、引数として渡される側の関数を「コールバック関数（Callback function）」と呼びます。 今回学んだmapメソッドは、まさに高階関数の代表例です。 実務の現場では、データのフィルタリングを行うfilterや、特定の条件に合うものを探すfind、さらにはボタンをクリックした時に特定の処理を動かすイベントリスナーなど、あらゆる場面でこの仕組みが活用されています。

柔軟なコード設計への第一歩

関数を引数として渡せるようになると、プログラムの「共通化」が格段に進みます。 例えば、「リストを処理する」という枠組みだけを作っておき、「具体的にどう処理するか」は後から関数として注入することで、一つの関数を何通りにも使い回すことができるようになります。 これは、変更に強く、メンテナンスしやすい綺麗なコードを書くための必須スキルと言えるでしょう。

さらにステップアップするために

最近のモダンなJavaScript開発では、TypeScriptを併用して、関数の引数や戻り値に型を定義することが一般的になっています。 引数として渡す関数がどのような型（引数の数や型、戻り値の種類）であるべきかを明示することで、より安全にコーディングができるようになります。 以下に、これまでの内容を整理したサンプルコードと、TypeScriptでの記述例を紹介します。

/**
 * 2つの数値に対して、指定された計算（関数）を実行する関数
 * @param {number} a
 * @param {number} b
 * @param {function} operation - 実行したい計算処理
 */
function calculate(a, b, operation) {
    return operation(a, b);
}

// 足し算を行う関数
const add = (x, y) => x + y;

// 引き算を行う関数
const subtract = (x, y) => x - y;

// 実行結果
console.log("足し算の結果:", calculate(5, 3, add));
console.log("引き算の結果:", calculate(10, 4, subtract));

足し算の結果: 8
引き算の結果: 6

// 型定義を利用して、安全に関数を受け取る
type FormatterFunc = (text: string) => string;

function displayMessage(message: string, formatter: FormatterFunc): void {
    const formattedText = formatter(message);
    console.log("出力内容: " + formattedText);
}

// 大文字に変換する関数
const toUpperCaseFormatter: FormatterFunc = (str) => str.toUpperCase();

// デコレーションを追加する関数
const starFormatter: FormatterFunc = (str) => `★★★ ${str} ★★★`;

displayMessage("hello world", toUpperCaseFormatter);
displayMessage("プログラミング学習中", starFormatter);

出力内容: HELLO WORLD
出力内容: ★★★ プログラミング学習中 ★★★