【JavaScript】無名関数とは？使い方や実装例を解説します！

JavaScriptにおける関数には、いくつか種類がありますが、その違いについて理解できていますか？

JavaScriptでは、関数と呼ばれるものを構築しながらアプリケーションを開発していきます。通常、関数の作成時には、その関数名を考え、実装したい処理を書き連ねていきますが、JavaScriptにはわざわざ命名しなくてもよい関数が存在します。

今回は、命名不要の関数である「無名関数」をどのように記載・実装するのかを詳しく解説していきます。

普通の関数とどのような部分が異なるのか、即時関数とどの部分が違うのかを、サンプルコード付きで説明します。関数の種類が多すぎてよく理解できていない人は、ぜひ参考にしてください。

フリーランス案件を探すならこのエージェント！

運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社Hajimari
対応エリア	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡
案件数	約28,000件	約3,300件	約4,200件
平均単価	68.2万円	72.2万円	–
最高月収	145万円	200万円	176万円
特徴	・高単価な案件が多い ・福利厚生サービスが受けられる ・首都圏の案件が中心	・給与保証制度で安定した収入を得られる ・税務処理のサポートあり ・マージン率は実質20%	・週2/週3の案件が多い ・在宅/リモート案件が多い ・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例	・株式会社Gunosy ・株式会社バンダイナムコホールディングス ・株式会社ユーザベース	・Sansan株式会社 ・株式会社一休 ・株式会社FiNC Technologies など	・クックパッド株式会社 ・株式会社カオナビ ・株式会社Kaizen Platform など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

転職を考えているならこのエージェント！

運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社リブセンス
対応エリア	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡
案件数	約13,000件	約800件 ※非公開求人が多い	– ※ドラフト制のため、対象外
年齢層	20代：◎ 30代：〇 40代：〇	20代：〇 30代：〇 40代：△	20代：〇 30代：〇 40代：〇
特徴	・エンジニア・デザイナーを専門としている ・カウンセリングに時間をかける ・年収アップ率60％の実績	・IT/Web/ゲーム業界専門の転職エージェント ・業界経験者がキャリアコンサルタントを務める ・丁寧なカウンセリングで入社後の離職率1%以下を実現	・ドラフト制による採用を叶える特殊なサービス ・スキル・経験重視で評価してもらえる ・他エンジニアの入札結果を見ることで 自分の市場価値が分かる
紹介企業例	・サイボウズ株式会社 ・株式会社サイバーエージェント ・Chatwork株式会社 など	・DMM.com ・Money Forward ・SmartHR など	・メルカリ ・ZOZOテクノロジーズ ・freee など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

そもそも関数とは？

無名関数を理解するためには、そもそも関数がどのようなものなのかを理解することがポイントです。

関数とは、JavaScriptに限らずほとんどのプログラミング言語において備わっている仕組みの一つです。処理を集約してひとつのまとまりにしたもので、関数に対する入力値である「引数」と、出力値である「戻り値」と呼ばれる機構を持ちます。

JavaScriptで、どのように関数を定義するのかについて確認しましょう。基本形は以下の通りです。

function 関数名(第一引数, 第二引数, ...) {
  処理内容を記載
  ….
  return 値;
}

let result = 関数名(1, 3, …);

JavaScriptにおける関数は、functionキーワード・関数名・引数の定義・具体的な処理の4つで構成されています。

引数については、複数定義することができ、戻り値もプログラム上で複数記載できます。しかし、実際に関数が実行された際は、一つの戻り値しか返さないという点に注意してください。

関数は、定義しただけでは利用できません。「関数を呼び出す」という処理を別で記載しなければなりません。

そこで、関数名と引数に入れる具体的な値（数値・文字列など）を記載します（7行目）。戻り値が存在するのであれば、関数内の処理が終了した後に、変数（result）に格納されます。この戻り値を、以降の処理で応用していくのがおおまかな流れとなります。

無名関数とは？

名前の通り、無名関数とは関数名が存在しない関数を意味します。とは言っても、今まで通りのやり方で実装した関数から、単に関数名の箇所だけ削除しても、プログラムが正常に動作することはありません。

無名関数は、関数そのもの自身をオブジェクトとして、変数・引数に入れることで初めて定義できるのです。

例として、2つの値の和を2乗する処理を、無名関数を使って実装したいとしましょう。以下にサンプルコードを載せましたので、ご覧ください。

let deploy = function (x, y) {
  let sum = x + y;
  return sum * sum;
};

functionキーワードの直後に引数を定義されており。関数名が一切記載されていないのがお分かりでしょうか。

このような記法が、無名関数の最も基本的な仕組みとなります。関数呼び出しは、以下のサンプルコードのように記載します。

let answer = deploy(4, 6); // 関数呼び出し
console.log(answer);

通常の関数では、「関数の名前」と「引数に入れる値」を記載しましたが、無名関数を用いた場合は、格納先の変数の名前が関数名の代わりとなっています。

つまり、「変数の名前」と「引数に入れる値」を記載しなければなりません。したがって、今回取り上げた例では「deploy」という名前で引数の値を設定し、関数を呼び出しているのです。

無名関数の使い方

無名関数は、それ自体を引数に設定する必要のあるメソッドで使うことが多いです。

このようなタイプの無名関数は、JavaScriptにおいて「コールバック関数」と呼ばれています。ここでは、コールバック関数を引数とするメソッドであるmap()メソッドを紹介しましょう。

map()メソッドは、配列の各々の要素に対して、何らかの処理を適用する機能を持ったメソッドです。この「何らかの処理」を実装するにあたって、無名関数が必要になってきます。

以下に掲載したサンプルコードで、無名関数の使い方を説明しましょう。

let sample_array = [123,433,2,53,646];

// 無名関数の定義
let square_proc = function(val) {
  return val * val;
}

// map()メソッド呼び出し
let new_array = sample_array.map(square_proc);

console.log(new_array); // 結果：[15129, 187489, 4, 2809, 417316]

上記サンプルコードは、配列に格納されている値に対して、それぞれ2乗の値を算出し、新しく配列に格納する処理をmap()メソッドを利用して実装したものです。

9行目でmap()メソッドにおいて書かれているsquare_procの中には、4行目に存在する無名関数が格納されていることが分かります。今回は、変数を介して引数を指定しましたが、map()メソッドのカッコ内に直接、関数を記載するやり方も存在します。

map()メソッド以外にも、JavaScriptの世界では、引数の中身に無名関数を設定しなければならないメソッドが多数存在します。

特に配列を取り扱うような処理を実装する際は、このようなメソッドを使う機会が多いため、無名関数を使いこなしたい場合は、メソッドの機能と併せて覚えると、スキルの向上につながります。

【応用編】アロー関数を使って定義してみよう

JavaScriptでは、無名関数をより簡潔に記載するための、とっておきの記法が存在します。それがアロー関数です。矢のような記号「=>」を用いて記載することから、アロー関数と言われています。

例として、ある値の3乗を算出する処理を考えてみます。今まで通り、無名関数や従来の名前付き関数で実装しても良いですが、ここではアロー関数を使って簡潔に実装したいとしましょう。以下のサンプルコードをご覧ください。

let cube = (x) => {return x * x * x;};
console.log(cube(4));

1行目に記載されている「=>」を使った文が、アロー関数となります。従来の無名関数と比べても、見た目がスッキリしていることが分かります。関数の中身が1行で書けるものであれば、アロー関数を使うことで1行に処理を収めることが可能です。

上記のアロー関数は、引数を囲むカッコ、処理を囲む波カッコ、さらにはreturnキーワードを省くができます。つまり、最終的に上記サンプルコードは、以下のように記載できます。

// アロー関数
let cube = x => x * x * x;

// 通常の無名関数
let cube = function(x){
  return x * x * x;
}

さきほどのアロー関数よりもさらにスッキリしたのがお分かりでしょうか。

3乗を計算する処理は、処理としては単純であるものの、アロー関数で実装することによって、通常の無名関数と比べてだいぶコンパクトに実装できるが分かります。

記載量が少なければ、ソースコードの読解も易しくなるので、積極的に利用しましょう。

即時関数とは？

さて、JavaScriptでは、「即時関数」と呼ばれる機能が存在するのをご存じでしょうか。

今まで紹介した関数たちとどのような点が異なるのか、端的に言えば、関数の定義と同時に実行するのが前提となっていることです。

即時関数の使い方

例として、10%の税を適用した値を計算する処理を考えてみます。以下のサンプルコードをご覧ください。

let price_tax = (function(price) {
  return parseInt(price * 1.1);
})(100); 

console.log(price_tax);

functionキーワードを使っていたり、引数や戻り値を定義していたり、一見しただけでは今まで述べた関数たちと大した差はないように見えます。

大きく違う点は、3行目にある「(100)」です。直前で定義した関数について、実際に値を代入して実行を試みているように見えます。

つまり、関数を定義してすぐさまに、引数100で関数の中身を即座に実行しているのです。

無名関数と即時関数の違い

無名関数の場合は、名前を付与しなくて良いものの、関数そのもの自身はオブジェクトのごとく変数に代入され、変数名を経由することで、関数内を実行しています。後で変数を他の値やオブジェクトに上書きしない限り、何回でも呼び出せるのが大きな特徴です。

一方、即時関数は無名（アロー）関数と違い、関数そのもの自身が変数や引数に格納するようなことがなければ、プログラム上の別の箇所で呼び出されることもありません。つまり、処理は一度きりしか実行されません。

関数とは言っているものの、即時関数は一般的な関数の用途である、随所に現れる同じような処理をまとめるために適用するものではありません。JavaScriptのプログラム内において、新しく変数のスコープを生成するために使われるため、少々特殊な機能と言えます。

今回取り上げた無名関数は、関数名を検討する手間を省きつつも、随所で使いまわしたい場合に適用するように心がけましょう。

最後に

さて、ここまでJavascriptの無名関数の使い方や実装例について解説してきましたがいかがでしたか？

通常の関数と比べて記述をかなり簡素化できますので、積極的に使っていけば、コードの可読性も向上できるかと思います。

また、最近ではさらに簡素化可能なアロー関数を使用する機会も増えていますので、今回の記事でしっかりとマスターしておいてくださいね。

このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。