コンセプトから読み解くJavaScriptの関数

Web開発において、TypeScirptやReactの影響で、JavaScriptをフロントエンド・バックエンド両方で利用するケースが増えています。八面六臂の大活躍です。そんなWebならなんでもござれのJavaScriptですが、使いこなすためには、言語仕様・機能を深く理解する必要があります。

本記事では9月29日発売のJavaScript/TypeScript実力強化書⁠、第2章「2-3.『関数は第一級オブジェクトである』とはどういうことか?」の記述をもとに、JavaScriptの関数をひもときます。

「関数は第一級オブジェクトである」とは

JavaScriptにおいて、関数は第一級オブジェクトであると言われます。

とはいえ「第一級オブジェクト」とは何でしょうか。これは計算機科学に基づく用語で、⁠式の中に現れたり変数に代入したり関数の引数に渡したりできるもの」という意味合いだそうですが、ここでは「関数が式の中に現れたり、関数を変数に代入したり、関数を関数の引数に渡したりできる」という理解で大丈夫です。

具体的なコードを見ながら、確認してみましょう。次のコードは、function関数式による関数オブジェクトを変数addに代入することで、addを介して関数を呼び出したり、コンソールに表示したりしています。

javascript: 関数を変数に代入して使う様子(同書より抜粋)
let add = function(x, y) { return x + y; };


console.log(add(3, 4)); //=> 7


console.log(add); // addのソースコードが表示される

次のコードは、関数addをオブジェクトobjのプロパティに入れてメソッドとし、そのメソッドを呼び出しています。

javascript: 関数をオブジェクトのプロパティに入れて使う様子(同書より抜粋)
// 関数をプロパティに入れる
const obj = {
  add: function(x, y) { return x + y; }
}


console.log(obj.add(10, 5)) //=> 15

さらにもうひとつ、即時関数を確認します。文字どおり、作られてすぐ(即時)呼び出される関数のことです。

javascript: 即時関数(同書より抜粋)
const arr = [1, 2, 3, 4, 5];
// arrの平均を計算
const average = (() => {
  const sum = arr.reduce((a, b) => a + b);
  return sum / arr.length;
})();


console.log(average); //=> 3

JavaScriptの関数が利用される場面

こうした関数の特性は、いったいどのように利用されているのでしょうか。

まず挙げられるのは高階関数です。高階関数は関数を引数に取る関数のことです。一方、高階関数に引数で渡された関数はコールバック関数と呼ばれます。高階関数やコールバック関数は代表的なところだとJavaScriptの標準ライブラリをはじめ、さまざまな場面で活用されています。

関数を戻り値に取る関数ももちろん、JavaScriptプログラミングにおいて強力な道具です。この関数を活用したわかりやすい例としては、フロントエンド開発で広く使われているJavaScriptライブラリのReactがあります。Reactは、実はJavaScriptの関数の性質を活かして設計されており、上手に活用するためには、関数への理解も求められます。

……というふうに、JavaScriptの関数は(ちょっとトートロジー的ですが)JavaScriptが必要とされる、あらゆる場面で活用されています。言い換えると、JavaScriptを使いこなすためには、関数への理解が必要不可欠なのです。

JavaScript/TypeScriptを“強化”しましょう!

『JavaScript/TypeScript実力強化書』では、こうしたJavaScriptの関数についてしくみから本格的な活用方法まで、具体的なコードをもとにより深く掘り下げています。もちろん、サブタイトルに掲げた、非同期処理とTypeScriptの型システムについても同様に、コードを題材に、仕様やコンセプトを解説しています。

とはいえ、関数・非同期処理・型システムといったテーマだけを切り出した、⁠初見お断り」の本ではありません。レベルに応じてステップアップできるように全4章で構成されています。

冒頭の第1章では、2025年時点でのJavaScriptの変遷や言語仕様を紹介。特に「1-3. ES2015~2025を踏まえた、今どきのJavaScriptの書き方」は、2019年初出時の記事を全面的にアップデートしたもので、最新のJavaScriptを体感できる内容です。JavaScriptを学び始めたばかりの方は、この章から入るのがおすすめです。

続く第2章では関数の作り方からクロージャまでを掘り下げ、第3章ではPromiseやasync/awaitなど非同期処理の仕組みを丁寧に解説。さらに第4章ではTypeScriptの型システムを扱い、Union型やMapped Typesなど実践的な設計につながるテーマまでカバーしています。

本書を手にJavaScript/TypeScriptのコーディング力を“強化”しましょう!

山本紘彰(やまもとひろあき)

Software Design編集部所属。2019年度入社。