アロー関数とは、関数式を簡潔にかける新しい書き方になります。
通常の関数式を簡潔に掛ける大替構文となり、functionのキーワードを使用せずに使うことができます。
また、アロー関数は、その名の通り、=>(矢)を使って関数リテラルを記述します。
例を参照しながらアロー関数についてまとめていきたいと思います。
目次：
1. 関数と関数式とアロー関数
1-1. 関数と関数式の違い
関数では、functionを使って関数宣言をして、returnで戻り値を設定して戻すことにより
関数で算出された値を別の関数の計算に使うことができました。
上記の書き方とは違った書き方をするのが、関数式と呼ばれるものです。
関数式では、関数と違う特徴が、２つあります。
- 関数の名前を省略して書くことができる。
- 変数に関数を定義することができる。
1-2. 例： 関数の場合
「add」という関数を作成します。
xとyの２つのパラメータを受け取り、入力した値の２つを合計した値をreturn（返す）します。
function add(x,y) {
return x + y;
}
addに1と2を渡す。
add(1,2)
１と2の合計値3を返す。
3
1-3. 例： 関数式の場合
関数式の場合、左側に変数、右側に関数を定義します。
const add = function(x,y) {
return x + y;
}
関数同様、addに1と2を渡す。
add(1,2)
１と2の合計値3を返す。
3
1-4. 例： アロー関数の場合
アロー関数は、関数式を簡潔に書くことのできる構文です。
アロー関数の特徴
1.fuctionを省略して書くことができる。
2.パラメータの後ろに、「=>」と記載する。
const add = (x,y) => {
return x + y;
}
関数式同様、addに1と2を渡す。
add(1,2)
１と2の合計値3を返す。
3
アロー関数は、関数式の完結版なので、下記と同じ結果になります。
アロー関数の例
2-1. アロー関数の例（パラメータなし）
アロー関数の例として、パラメータがない場合はどのように定義すればよいでしょうか？
例：ランダムな１から６までの値を出力するサイコロのような関数を作成します。
1.rollDie関数を定義。
2.アロー関数のパラメータがない場合は、()「丸括弧」と、空の（）「丸括弧」を書きます。
3. 参照：サイコロの作り方
const rollDie = () => {
return Math.floor(Math.random() * 6) + 1;
}
rollDie()
※ランダムな１から６までの数字が出力されます。
アロー関数の暗黙的なreturn
アロー関数では、returnを省略して書くこともできます。
先ほどの2-1で作成した、ランダムな１から６までの値を出力するサイコロのような関数を例にしてreturnを省略した場合をみてみましょう。
例：ランダムな１から６までの値を出力するサイコロのような関数を作成します。
暗黙的なreturn変更例：
1.rollDie関数のアロー関数の矢印の後ろの「 { 」「波括弧前部分」を、「 ( 」「丸括弧前部分」に変更する。
2.サイコロを構成する部分のreturnを削除する。
3.サイコロを構成する部分の後ろの ; 「セミコロン」を削除する。
（ ; セミコロンは、一番後ろにつける。）
4.関数の最後の「 } 」「波括弧、後ろ部分」を、「 ) 」「丸括弧後ろ部分」に変更する。
const rollDie = () => (
Math.floor(Math.random() * 6) + 1
);
rollDie()
※ランダムな１から６までの数字が出力されます。
注意※
アロー関数の暗黙的returnは、一つしか式がない、評価するものがない場合にしか使用できないので注意。
まとめ：
まとめ：
- アロー関数は、関数式を省略して書くことができます。
- functionを省略し、「 => 」で表現することができます。
- {} 波括弧 を () 丸括弧に変更し、; (セミコロン)を最後に記載して、returnを省略することができます。
- アロー関数を活用することにより、コードをスッキリとみやすく保つことができます。