HOME >
Jamstack用語集 >
higher-order function（高階関数）

higher-order function（高階関数）

ハイヤーオーダーファンクション

Next.js

TypeScript

Jamstack

高階関数を分かりやすく

高階関数って聞くと、ちょっと難しそうですよね。とはいっても、関数型プログラミングには不可欠ですので理解しておく必要があります。

高階関数とは、他の関数を引数として取ったり、結果として関数を返す関数のことを言います。

JavaScriptやTypeScriptなどの言語では、「map」、「filter」、「reduce」などの配列メソッドが高階関数の代表的な例です。これらのメソッドは全て、関数を引数に取りますよね。

さて、例え話を使ってこの高階関数をもう少し具体的に説明してみましょう。

イメージしてみてください。あなたが工場のオーナーだとしましょう。そして、その工場ではたくさんの製品を作っていて、その製品を整えるための作業員（関数）が必要です。

ここで、高階関数は作業員（関数）をマネージャーとして指導する役割を果たします。作業員たちは各々異なる特技を持っていて（つまり、異なる操作をする関数）、マネージャー（高階関数）はそれぞれの特技をうまく利用して最も効率的な製造ラインを作るわけです。

例えば、製品の中には塗装が必要なものがあるでしょう。その場合、マネージャー（高階関数）は塗装の特技を持つ作業員（関数）を選び、製品に塗装を施す作業を依頼します。このように、マネージャー（高階関数）は作業員（関数）を適切に使って、最終的な製品を生み出すわけです。

それから、高階関数のもう一つの特徴は、新しい作業員（関数）を訓練（生成）して、それを返すこともできるということです。これは、「クロージャ」を返す関数とか、関数を返す関数、と言った形でよく見かけるパターンですよね。

一体ナンノコッチャ？って思った高階関数、もう少し理解が進んだでしょうか？まとめると、高階関数は他の関数を指導したり、新しい関数を訓練したりするマネージャーのような存在なんですよ。ここまで大丈夫ですか？

高階関数は、他の関数を引数として受け取ったり、関数を返すことができる関数のことを指します。これはJavaScriptやTypeScriptにおける関数の「第一級オブジェクト」の性質を利用したもので、関数を他のデータ型と同じように扱うことができます。

高階関数は以下のような特性を持っています：

一つ以上の関数を引数として受け取る。
関数を結果として返す。

以下は高階関数の一例です：

const greeter = (greeting: string) => {
  return (name: string) => {
    return `${greeting}, ${name}!`;
  }
}

const morningGreeter = greeter("Good morning");
console.log(morningGreeter("John")); // "Good morning, John!"

この例では、greeter関数は別の関数を返しており、その返された関数（この場合はmorningGreeter）はさらに引数を受け取り、結果を出力します。

高階関数を使うメリット

高階関数を使用すると、以下のようなメリットがあります：

コードの抽象化：高階関数は、具体的な処理を抽象化するのに役立ちます。これにより、コードの可読性と保守性が向上します。
コードの再利用：一度定義した関数を、高階関数の引数として渡すことで、同じ関数を再利用することが可能になります。これにより、コードの重複を避け、DRY（Don't Repeat Yourself）の原則を守ることができます。
柔軟性と拡張性：高階関数は、引数として渡される関数によってその動作を変えることができます。これにより、より柔軟かつ拡張性の高いコードを書くことが可能になります。

高階関数の実装

それでは、Next.jsとTypeScriptを用いて高階関数を使用する一例を見てみましょう。今回は、ユーザーの情報を表示するコンポーネントに対して、ログインしているかどうかに基づいて異なるメッセージを表示する高階関数を実装します。

まず、ユーザー情報を表示する基本的なコンポーネントを作成します。

type UserProps = {
  name: string;
  loggedIn: boolean;
};

const UserInfo = ({ name, loggedIn }: UserProps) => {
  return (
    <div>
      <p>{`User: ${name}`}</p>
      <p>{`Status: ${loggedIn ? 'Logged in' : 'Logged out'}`}</p>
    </div>
  );
};

次に、高階関数withLoginMessageを作成します。この関数は、UserInfoコンポーネントを引数として受け取り、ログイン状態に応じたメッセージを表示する新しいコンポーネントを返します。

const withLoginMessage = (Component: React.ComponentType<UserProps>) => {
  return (props: UserProps) => {
    const message = props.loggedIn 
      ? `${props.name}さん、ログインありがとうございます！` 
      : `${props.name}さん、ログインしてください。`;

    return (
      <div>
        <Component {...props} />
        <p>{message}</p>
      </div>
    );
  };
};

最後に、withLoginMessage関数を使用して、UserInfoコンポーネントをラップします。

const EnhancedUserInfo = withLoginMessage(UserInfo);

// 利用例
<EnhancedUserInfo name="John" loggedIn={true} />

これにより、EnhancedUserInfoコンポーネントは、ユーザーがログインしている場合は歓迎のメッセージを、ログインしていない場合はログインを促すメッセージを表示します。

以上のように、高階関数はコンポーネントの振る舞いを柔軟に変更することを可能にし、コードの再利用性と可読性を向上させます。また、TypeScriptを用いることで、引数として受け取る関数や返す関数の型を明示的に指定でき、より安全なコーディングが可能になります。

Next.js を学ぶ一覧へ