今回は、Javascriptのアロー関数についてです。
アロー関数って、難しいですよね。他の言語にはあまりない、Javascript特有の書き方で、しかも、省略し放題。
Javascriptを勉強し始めた人が絶対につまずくポイントだと思います。
ただ、このアロー関数の記述方法は、本当に色んなところで使われているので、これが読めないとサンプルコードなんか全然読めないことになっちゃいます。
ですので、アロー関数を理解するのはすごく大事なんですよね。
今回は、そのアロー関数をなるべくわかりやすくサンプル付きで説明してみたいと思います。
関数の基本形
アロー関数を学ぶ前に、普通の関数のおさらいからしてみましょう。
const num=1;
function showNum1(num){
console.log(num);
}
これが普通の関数のフォーマットですね。
const num=1;
function 関数名(引数){
処理；
}
それぞれの箇所をちょっと詳しく書くと上のようになります。ここまでは大丈夫でしょうか。
無名関数
次に、アロー関数に行く前にもう1つ学んでおくことがあります。それが無名関数です。
先ほどの showNumっていう関数、無名関数で書き換えると以下のようになります。
const showNum2 = function (num) {
console.log(num);
}
showNum2(1);
showNum2って書いてますけど、const で定義しているので、これは関数名ではなくて変数名です。
その変数に console.log(num)という処理をする関数（名前はない）を代入しているので、無名関数って言われています。
アロー関数
では、お待ちかね。先ほどの無名関数をアロー関数で書き直すとどうなるか。
const showNum3 = (num) => {
console.log(num);
}
showNum3(1);
こんな風になってしまいます。
“function” が消えて、”=>” が出てきましたね。
3つまとめるとこんな感じです。
function showNum1(num){ // 普通の関数
console.log(num);
}
showNum1(1);
const showNum2 = function (num) { // 無名関数
console.log(num);
}
showNum2(1);
const showNum3 = (num) => { // アロー関数
console.log(num);
}
showNum3(1);
ちなみに、アロー関数にはもうちょっとだけ省略した書き方があります。numのところの引数が1つだけの場合に、（）を省略できます。
const showNum4 = num => { // アロー関数の最終形態
console.log(num);
}
showNum4(1);
これで書き方はわかったと思います。ですが、気になるのは、どんなふうに使われるかってことですよね。
以下の例をみてください。4つ例を挙げていますが、出力結果は全部同じになります。
<script>
'use strict';
const numbers = [1,2,3,4,5];
function showNum(num){ console.log(num); }
numbers.map(showNum); //use normal function. output=1,2,3,4,5
const showNum2 = (num) => { console.log(num); }
numbers.map(showNum2); //use arrow function. output=1,2,3,4,5
numbers.map((num)=>{console.log(num)}); //little bit simple. output=1,2,3,4,5
numbers.map(num => console.log(num)); //very simple. output=1,2,3,4,5
</script>
これは、mapというメソッドを使っています。
mapって何をするためのメソッドかというと、配列に対してある処理をしたい時に使うメソッドです。
const array = [];
array.map(関数);
こんなふうに書くと、配列の中身が1つ1つ関数に渡されます。
上の例で一番わかりやすい普通の関数を使った記述方法を見てみましょう。
const numbers = [1,2,3,4,5];
function showNum(num){ console.log(num); }
numbers.map(showNum); //use normal function. output=1,2,3,4,5
numbersという配列のなかにある要素1,2,3,4,5がshowNumという関数に1つずつ渡されます。それをコンソールに出力するというプログラムですね。
こんなふうに書いてあるとわかりやすいですが、ドキュメントとかウェブページとか、色んなページを見ると、以下のような記述で書いてあることが結構あります。
const numbers = [1,2,3,4,5];
numbers.map(num => console.log(num)); //very simple. output=1,2,3,4,5
num => console.log(num)
この部分がアロー関数になってますね。
これがわかっていないと、なかなかドキュメントを読むのがしんどくて、「Javascriptわかんね〜」ってなっちゃいます。。。
結構大事なので、Javascriptがわかんなくならないように、きっちりマスターしておきましょう！
