Callback Functions（コールバック関数）

コールバック関数を分かりやすく

コールバック関数は、まるで友人に買い物を頼むかのようなものです。友人に「スーパーマーケットに行ったら、お菓子を買ってきてほしい」と頼むとき、その「お菓子を買う」というのがコールバック関数です。スーパーマーケットに行くことは友人が行うことで、その途中で特定のアクション（お菓子を買うこと）を行うために、あなたの要求（関数）がコールバックとして動作します。これが、コールバック関数の概念です。

コールバック関数の歴史的変遷

コールバック関数はプログラミングの初期から存在しています。それは、コンピュータが「待つ」ことなく、同時に複数のタスクを処理するのに役立つからです。コールバックは、JavaScriptの非同期プログラミングの基礎となり、今日のPromisesやasync/awaitといった技術の原型となりました。

コールバック関数と Jamstack の関係

Jamstackでは、主に静的なサイトを生成しますが、非同期的な動作が必要な場合（APIからデータを取得するなど）は、コールバック関数が使われます。また、Jamstackの一部として機能するサーバーレス関数（AWS Lambdaなど）は、コールバック関数を活用する典型的な例です。

map メソッドで実装

JavaScriptの配列には、mapというメソッドがあります。Jamstack では、ブログ一覧を出すときに使います。これは、配列の全ての要素に対して特定の関数を適用し、その結果を新しい配列として返します。このときの「特定の関数」がコールバック関数となります。

では、Next.jsとTypeScriptを使ったmapメソッドとコールバック関数の例を見てみましょう。

type UserProps = {
  users: { id: number; name: string }[];
};

const UserList = ({ users }: UserProps) => {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

const App = () => {
  const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' },
  ];

  return <UserList users={users} />;
};

この例では、UserListコンポーネントはusersという名前の配列を受け取り、その各要素（user）に対してmapメソッドを適用しています。ここで渡している(user) => (<li key={user.id}>{user.name}</li>)がコールバック関数で、それぞれのuserオブジェクトから新しい<li>要素を作成しています。このコールバック関数を使うことで、簡単にリスト全体を生成することができます。

このように、コールバック関数はmapメソッドとともに、配列の要素それぞれに対する処理を非常に簡単に記述できるというメリットがあります。そして、これはReactやNext.jsでコンポーネントのリストを描画する際に特に役立ちます。

また違うパターンで、Next.jsとTypeScriptを用いてコールバック関数の簡単な例を示します。

type ButtonProps = {
  onClick: () => void;
  label: string;
};

const Button = ({ onClick, label }: ButtonProps) => {
  return <button onClick={onClick}>{label}</button>;
};

const App = () => {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  return <Button onClick={handleClick} label="Click Me!" />;
};

この例では、ButtonコンポーネントにonClickという名前のコールバック関数を渡しています。この関数は、ボタンがクリックされたときに呼び出され、メッセージをコンソールに出力します。

コールバック関数を使うメリット

非同期操作の実行

コールバック関数は、非同期操作を実行する際に非常に便利です。コードの実行を止めることなく、タスクをバックグラウンドで実行し、その完了時にコールバック関数を実行します。これは特に、ネットワークリクエストやファイルI/Oなど、時間がかかる操作を行う際に有用です。

高い柔軟性

コールバック関数は引数として他の関数に渡されるため、それを使用する関数は、実行される具体的なコードを決めることなく、処理の一部を外部に委任できます。これにより、同じ関数でも異なる動作をさせることが可能となり、高い柔軟性を提供します。

コードの再利用

一度定義したコールバック関数は、必要な場所で何度でも再利用することが可能です。これによりコードの重複を防ぎ、保守性を向上させます。

コールバック関数を学ぶ

以下のリンクは、コールバック関数を学ぶうえで役立つ資料となります。