【JavaScript】アロー関数に段階的に慣れる │ コジマノテック

1. はじめに
2. function式(関数式)のおさらい
3. アロー関数第一形態(functionの消失)
4. アロー関数第二形態({}・returnの消失)
5. アロー関数最終形態(()の消失)
6. さいごに
7. もっと学びたい人はこちら

はじめに

コジマです。

アロー関数って慣れないうちにパッと見た時に少し困惑してしまいますよね。

MDNのアロー関数の説明を基にfunction式から砕かれていく様子を見ていこうと思います。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions

function式(関数式)のおさらい

JavaScriptでは関数を式の中に定義できます。

const sum = function(a, b) {
  // aとbの和を返す
  return a + b;
};

// 7が返ってくる
console.log(sum(3, 4));

このfunction(hoge){ return hoge }を変数に代入する書き方がfunciton式（関数式）です。

アロー関数第一形態(functionの消失)

functionが消える代わりに=>を書きます。この部分がいわゆるアローです。

これにより、先ほどのサンプルは以下のように書き換わります。

const sum = (a, b) => {
  // aとbの和を返す
  return a + b;
};

// 7が返ってくる
console.log(sum(3, 4));

アロー関数第二形態({}・returnの消失)

{}(中カッコ)とreturnを省略する書き方もあります。

これにより、先ほどのサンプルは以下のように書き換わります。

// aとbの和を返す
const sum = (a, b) => a + b;

// 7が返ってくる
console.log(sum(3, 4));

アロー関数最終形態(()の消失)

引数が１つの場合に限り、()(カッコ)も省略することができます。

２つ以上あると以下のようにエラーが出てしまいます。

// aとbの和を返す
const sum = a, b => a + b;

// Error: Missing initializer in const declaration
console.log(sum(3, 4));

// 2倍した値を返す
const getDouble = a => a * 2;

// 10が返ってくる
console.log(getDouble(5));

配列を操作する関数とかでよくお世話になってます。
配列操作する関数は引数に関数式を使用するものが多いので、アロー関数を使うことで
スッキリして読みやすくなるんですよね。

以下にサンプルを載せます。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// map
const mapNums = numbers.map(e => e * 2) // 要素を2倍
console.log(mapNums)

// find
const findNum = numbers.find(e => e % 10 === 0) // 10の倍数
console.log(findNum)

// filter
const filterNums = numbers.filter(e => e % 2 === 1) //奇数
console.log(filterNums)

こちらが関数式をそのままつかったパターンになります。
アロー関数の方がスッキリ書けているのがわかるかと思います。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// map
const mapNums = numbers.map(function(e){
  return e * 2
}) // 要素を2倍
console.log(mapNums)

// find
const findNum = numbers.find(function(e){
  return e % 10 === 0
}) // 10の倍数
console.log(findNum)

// filter
const filterNums = numbers.filter(function(e){
  return e % 2 === 1
}) //奇数
console.log(filterNums)

さいごに

アロー関数ってJavaScript学びたての時見づらくて仕方なかったのですが、今ではアロー関数のスッキリした書き方の恩恵をたくさん受けています。
一気に理解するのが難しくてもこうやって段階的に理解していけば問題ないと思いますよ！

アロー関数に慣れてよりJavaScriptと仲良くなりましょう！

この記事を面白いまたは役に立ったと思ってくれた方は是非私のTwitter(@kojimanotech)を
フォローしてくれたらうれしいです！

もっと学びたい人はこちら

JavaScriptをもっと学びたいエンジニアのためにおすすめのUdemy講座を紹介いたします！

JavaScript初心者向けの講座です。
HTML、CSSと合わせて学ぶことができます。
フロントエンド開発の基本的な知識を網羅的に学ぶことができます。
個人的には著作権表記についても触れているところが推せますね。
ウェブ開発入門完全攻略コース – HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！

JavaScriptをより深く学びたい人はこちらがおすすめです。
JavaScript初心者を脱するとよりよいコードを書かなければなりません。
つまずきがちなオブジェクト操作や、非同期処理の仕組みについて学ぶこともできるため、JavaScriptの仕組みから深く学ぶことができます。
【JS】ガチで学びたい人のためのJavaScriptメカニズム

気になった人はぜひ見てみてくださいね！

以上、コジマでした。