フロントエンド開発の現場で、私たちは日々「関数」を扱っています。しかし、JavaScriptにおける「第一級関数（First-class function）」という概念を意識するだけで、コードの柔軟性は驚くほど向上します。これは、関数が単なる「処理の塊」ではなく、変数に代入したり、引数として渡したり、戻り値として返したりできる「値」として扱えるという特性を指します。
関数を「データ」として渡す
例えば、配列のメソッドであるmapやfilterを考えてみましょう。これらが強力なのは、引数に「関数」を受け取れるからです。
const double = (n) => n 2;
const numbers = [1, 2, 3];
const doubled = numbers.map(double);
このように、関数をデータのように扱うことで、ロジックを部品化し、再利用可能な形に切り出すことができます。
高階関数による抽象化
第一級関数の恩恵を最も受けるのが「高階関数」です。これは関数を引数に取る、あるいは戻り値として返す関数のことです。例えば、ある条件を満たすかどうかを判定する関数を生成するファクトリー関数を作ってみましょう。
const createThreshold = (limit) => (n) => n > limit;
const isOver100 = createThreshold(100);
console.log(isOver100(150)); // true
この手法を使えば、if文のネストを減らし、宣言的で読みやすいコードを書くことが可能です。状態管理やイベントハンドリングにおいても、関数を動的に生成して渡すことで、複雑なロジックを簡潔に記述できます。
なぜこの考え方が重要なのか
現代のReactのようなライブラリでは、コンポーネントに「関数」を渡して制御することが日常茶飯事です。関数が第一級オブジェクトであるという特性を理解していれば、「なぜこのコンポーネントは関数を受け取れるのか」「どうすればこの処理を共通化できるか」という問いに対して、本質的な回答を出せるようになります。
ただ処理を書くのではなく、「関数をどう組み立てるか」というパズルのような視点を持つこと。それこそが、脱・初心者を目指すフロントエンドエンジニアにとっての第一歩なのです。