アロー関数について解説します。
Javascriptの解説記事では、先輩エンジニアとの対話形式でJavascriptの学習を進めていきます。
プログラミング初心者の方、初めてプログラミングを学ぼうと思っている方、仕事の都合上Javascriptが必要になったという方にとって有益なコンテンツになっています。
少しでも当てはまる方は、ぜひみていってくださいね！
アロー関数とは?
登場人物
・天野 陽菜（あまの ひな）：自社サービス開発企業に勤めるフロントエンドエンジニア（29歳）。明るくフレンドリーで、後輩の育成にも積極的。実は元ゲーマーで方向音痴。
・ 後輩ちゃん：JavaScriptを学び始めた初心者。疑問を持ちつつも、天野先輩の解説で理解を深めていく。
今日はね、コードをもっとスッキリ書けるようになる、ちょっとカッコイイ書き方を紹介しようと思ってるんだ。
これが使えるようになると、コードが短く、そして読みやすくなる場面がたくさんあるんだ。
特に、他の関数の中でちょこっとした処理を書きたい時とかに大活躍するよ！
Javascriptの関数をおさらい
例えば、二つの数字を足し算する関数、どうやって書くか覚えてる？
function add(a,b) {
return a + b;
}
console.log(add(3,5));//8と表示される解説:addという関数を作成しました。
addという関数内では、a+bという処理を行います。
最後に、console.logでaddの結果(今回は3+5なので8になる)を表示します。
じゃあ、この add 関数をアロー関数で書くとどうなるか、見てみようか！
const addArrow = (a,b) => {
return a + b;
}
console.log(addArrow(3+5));//これも8って表示されるfunction っていう言葉がなくなって、代わりに=>っていう矢印みたいなのが入ってますね！これがアロー…？const addArrowSlim = (a,b) => a + b;
console.log(addArrow(3+5));//これも8って表示される//普通の関数
function square(x){
return x * x;
}
//アロー関数
const squareArrow = x => x * x;
console.log(squareArrow(4));//16const seyHello = () => {
console.log('こんにちは!');
}
seyHello();//こんにちは！って表示される
解説:アロー関数を使う場合、関数の処理がreturn文1行だけの時は、returnと{}を省略することが可能です。
アロー関数の引数が1つだけの場合、()も省略することができます。
個人的にはあまり省略形を使うことはありませんが、覚えておくと他の人が書いたコードを読む時に便利です！
アロー関数のメリットって?
this …ですか？なんだか難しそうな響き…。解説:実は、functionで定義した関数と、アロー関数で定義した関数には違いがあります。
this、argumants,superへのバインドがない、コンストラクターとして使用することができない、ジェネレーター関数として使用することができないなど、さまざまな違いがあります。
今回は、「少し違いがあるんだな」と覚えてもらえればOKです！
アロー関数が大活躍する場面！
const numbers = [1,2,3,4,5];
const dubledNumbers = numbers.map(function(number){
return number * 2;
});
console.log(dubledNumbers);//[2,4,6,8,10]const numbers = [1,2,3,4,5];
const doubleNumbersArrow = numbers.map(number => number * 2);
console.log(doubledNumberArrow);//[2,4,6,8,10]解説:mapやforEachなどの、コールバック関数を持つタイプのメソッドを扱う場合、functionで定義する形の関数を使用すると、コードが冗長になってしまいます。
アロー関数を使用することで、短くすっきりとしたコードを書くことができます！
まとめと応援メッセージ
・アロー関数は => を使って書く、新しい関数の書き方だよ！
・function キーワードが不要で、条件によっては {}, return, () も省略できてスッキリ！
・特に配列のメソッド（map とか）と一緒に使うと、コードが読みやすくなるよ！
・this の扱いがちょっと違うけど、それはまた今度詳しくね！
