JavaScriptで関数を利用する方法の１つ、アロー関数について解説します。
アロー（英:arrow）関数とは、その名の通り（ => ）矢印を利用して関数のINPUT / OUTPUTを示す記述方法です。function式の記述が不当となるため、コードの短縮化・可読性の向上が見込めます。
- 【前提】関数式とは？関数宣言と関数式の違い
- アロー関数の基本/意味と使い方・書き方
- アロー関数を用いたサンプルコード
アロー関数を理解するための前提となる知識も合わせて解説しております。JavaScript初心者の方であれば、知っておきたい基本知識ですので、是非最後までご覧ください。
【前提】関数宣言と関数式の違い
アロー関数を理解するには、関数とは何か？（関数宣言と関数式の違い）の問いに答えられるようになっておく必要があります。
この章では、簡単に前提知識をおさらいします。
関数宣言（function文）
関数宣言は、その名の通りfunction文を用いて関数を宣言する方法です。宣言した関数は、後から直接「関数名」を記述することで実行されます。
See the Pen function1 by ビズドットオンライン (@BizOnline) on CodePen.
そもそもfunction文って何？という方はこちらの記事をご覧ください。
関数式とは？（無名関数 / 関数リテラル）
対して、関数式とは変数（もしくは定数）に関数を値として代入し、後からその変数を呼び出すことで関数を間接的に利用する方法です。
let（変数宣言命令）を用いて、関数を値として変数「sample」に代入します。
関数を呼び出す際は、変数「sample」を呼び出すことで、間接的に関数が呼び出されます。
See the Pen 関数式 by ビズドットオンライン (@BizOnline) on CodePen.
関数式は、変数に関数のソースコードを直接べた書きし、その変数を呼び出すことで関数を実行する仕組みです。ソースコードを直接べた書きしているという点で、関数式は関数リテラルとも呼ばれます。
ちなみに、上記のコードを見ていただければわかるかと思いますが、関数定義時点で関数名を持たないため、その関数を無名関数（または匿名関数）と呼称します。
アロー関数とは？
アロー関数とは、関数式（関数リテラル）をさらに簡易的に記述するために用いられる技法です。
その名の通り矢印（=>）を使います。
See the Pen アロー関数 by ビズドットオンライン (@BizOnline) on CodePen.
functionを利用しない代わりに、引数の直後に "=>" を記述するだけです。
引数を用いる関数を例にもう１つサンプルコードを見てみましょう。
See the Pen アロー関数2 by ビズドットオンライン (@BizOnline) on CodePen.
アロー関数というと難しく感じてしまうかもしれませんが、実は非常に簡単です。考え方は、関数式と全く同じです。
引数が１つの場合 ⇒ （ ）を省略可能
アロー関数では、引数が１つの場合"( )"を省略することが可能です。
See the Pen アロー関数3 by ビズドットオンライン (@BizOnline) on CodePen.
本来であれば、「let sample2 = (n) => n * 2;」とすべきところ、「let sample2 = n => n * 2;」と記述できるようになります。
引数がない場合 ⇒ ( )は必須
引数がない関数の場合には、必ず "( )" を記述する必要があります。
See the Pen アロー関数 by ビズドットオンライン (@BizOnline) on CodePen.
アロー関数を用いる際に誤りやすいポイントなので注意しましょう。
初心者にとってアロー関数は、少し理解しづらく読みづらいように感じてしまうことも多いかもしれません。しかし、実は慣れてくると結構読みやすくて使いやすい記述方式です。
今後のJavaScriptで関数を用いる際の主流になってくる可能性も高いのでぜひ今のうちに理解しておきましょう。
JavaScriptを体系的に学びたい方は
プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。
そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。
各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。
