☰

Written by TSUYOSHI

JavaScript ES6のアロー関数が簡単に理解できる 【thisやreturn、引数について初心者向けに解説】

JavaScript PROGRAMMING

この記事ではES6のシンタックスであるアロー関数を解説します。
Vue,React,AngularなどモダンなフレームワークではJavaScriptをES6で書くことがほとんどで、アロー関数は理解がほぼ必須だと思います。
「thisの挙動が従来の関数と違う」「returnの書き方が複数ある」など基本的なことを初心者向けに解説していきます。

この記事は以下の方を対象にしています。

ES6を学んだことがない人
アロー関数が何となくはわかったけど、詳しくは理解できていない人

この記事を読むことによって、アロー関数の書き方、従来の関数との違いがわかるようになります。

アロー関数の基本

従来の関数とアロー関数の例を以下に示します。
「function()」の部分が「() =>」とアローになります。

▼従来の関数

// 従来の関数
const calcFunction = function(num) {
  return num * 2;
}

console.log('calcFunction 引数2の実行結果:', calcFunction(2) );
console.log('calcFunction 引数3の実行結果:', calcFunction(3) );

▼consoleの結果

calcFunction 引数2の実行結果: 4
calcFunction 引数3の実行結果: 6

▼アロー関数

// アロー関数
const calcArrow = (num) => {
  return num * 2;
}

console.log('calcArrow 引数2の実行結果:', calcArrow(2) );
console.log('calcArrow 引数3の実行結果:', calcArrow(3) );

▼consoleの結果

calcArrow 引数2の実行結果: 4
calcArrow 引数3の実行結果: 6

アロー関数は、無名関数やコールバックの拡張として置き換えが可能

アロー関数は、無名関数やコールバックを従来の「function(){}」から 「() => {}」に置き換えることが可能です。
置き換え方法は以下の通りで、アロー「=>」を作ります。

  • functionを削除
  • 「=>」(イコールと大なり)を追加する

今回の例
const calcFunction = function(num) {
↓
const calcArrow = (num) => {

// アロー関数
const calcArrow =(num) => {
  return num * 2;
}

アロー関数の引数が１つなら丸カッコを省略できる

①アロー関数では、引数が１つの場合は、引数の丸カッコを省略することができます。

// アロー関数
const calcArrow = num => {
  return num * 2;
}

const calcArrow = (num) => {
↓
const calcArrow = num => {

②引数が2つ以上の場合はカッコの省略ができません。

// アロー関数
const plusArrow = (num1, num2) => {
  return num1 + num2;
}

この場合は「const plusArrow = num1, num2 => {」にはできず、丸カッコがないとエラーになってしまいます。

③引数が無い場合もカッコの省略はできません。

// アロー関数
const calcArrow = () => {
  console.log('hoge');
}

「const calcArrow = () => {」を「const calcArrow = => {」とすることはできません。

まとめると引数については以下のように、引数1つのときのみカッコの省略が可能となっています。

  • 引数が１つなら丸カッコを省略できる
  • 引数が２つ以上の時は丸カッコは必須
  • 引数がない場合も丸カッコは必須

returnを使って1文しかない場合は、波カッコとreturnの省略ができる

関数内の構文が1行でreturnを使っている場合は波カッコとreturnの省略が可能です。

const calcArrow = num => {
  return num * 2;
}

↓　{}とreturnを削除して1行にする

// アロー関数
const calcArrow = num => num * 2;

ただし例外があり、returnにオブジェクトを用いる場合は丸カッコで囲む必要があります。

▼オブジェクトがreturn値の時

const calcArrow = num => {
  return {
    plus: num + 1,
    double: num * 2
  }
}

↓

// これはNG
const calcArrow = num => { plus: num + 1, double: num * 2 }

↓

// 丸カッコをつける必要がある
const calcArrow = num => ({ plus: num + 1, double: num * 2 })

アロー関数の書き方まとめ
JS Fiddleにまとめたので、こちらの左上の「Run」で動作させて確認が可能です。
https://jsfiddle.net/g40Lptru/

アロー関数における「this」の挙動

従来の関数とアロー関数ではthisの挙動が異なるケースがあり、このあたりの理解が必要になります。
ここを理解せず、従来の関数を使っていた箇所をアロー関数に変更したりすると挙動が変わってしまうことがあります。

setTimeoutを使った挙動について説明します。

従来の関数でthisをbindしない

// NG例
const timer = {
  count: 'hoge',
  start: function() {
    setTimeout(function() {
      // thisはwindowを指す
      console.log('this', this);
      this.count++;
      // this.countはundefinedなので+1して、Nanになる
      console.log('this.count', this.count);
    }, 1000);
  }
};

timer.start();

▼console

this Window
this.count NaN

従来のfunctionでは、thisをそのまま使うと示すthisが変わってしまい、正常に動作しませんでした。

従来の関数でthisをbindする

// OK例
const timer = {
  count: 0,
  start: function() {
    setTimeout(function() {
      // thisはbindされているので親オブジェクトを指す
      console.log('this', this);
      this.count++;
      // this.countは1になる
      console.log('this.count', this.count);
    }.bind(this), 1000);
  }
};

timer.start();

▼console

this {count: 0, start: ƒ}
this.count 1

従来のfunctionでは、「.bind(this)」でthisを固定する必要がありました。(もしくは変数にthisを入れておき、それを使うなど)

アロー関数で書いたとき

// アロー関数
const timer = {
  count: 0,
  start: function() {
    setTimeout(() => {
      // アロー関数ではthisが固定され、親オブジェクトを指す
      console.log('this', this);
      this.count++;
      // this.countは1になる
      console.log('this.count', this.count);
    }, 1000);
  }
};

timer.start();

▼console

this {count: 0, start: ƒ}
this.count 1

アロー関数ではthisが固定されるため、thisは親のオブジェクトを指しており、この例では問題なく動作します。

アロー関数のthis固定
JS Fiddleにまとめたので、こちらの左上の「Run」で動作させて確認が可能です。
https://jsfiddle.net/rheo7zgx/1/

従来の関数をアロー関数になおしてthisで失敗する例

これはイベントハンドラーのコールバック関数でも同じなので注意が必要です。

アロー関数に直して失敗する例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .button {
      background-color: #444;
    }
  </style>
</head>
<body>
  <button class="button">ボタン</button>
  <script>
    // イベントハンドラー
    const eventHandler = function(event) {
      event.preventDefault();
      console.log('this', this);
      this.style.backgroundColor = '#f00';
    };

    // ボタン要素を取得 & イベント設置
    const $button = document.getElementsByClassName('button')[0];
    $button.addEventListener('click', eventHandler);
  </script>
</body>
</html>

ボタンをクリックするとボタンの色が変更されます。

▼console

"this", [object HTMLButtonElement]

↓

この場合、イベントハンドラーをアロー関数にするとエラーになり、正常に動作しなくなります。

    // イベントハンドラー
    const eventHandler = (event) => {
      event.preventDefault();
      console.log('this', this);
      this.style.backgroundColor = '#f00';
    };

▼console

"this", [object Window]

イベントハンドラーを定義した時点でthisがwindowで固定されているため、呼び出し元のButton要素を指し示さなくなったので、このケースではエラーになります。

アロー関数のthisで失敗する例
JS Fiddleにまとめたので、こちらの左上の「Run」で動作させて確認が可能です。
従来の書き方(問題なし)： https://jsfiddle.net/t58mjcus/
アロー関数(エラーになる)： https://jsfiddle.net/uewpo4dt/

アロー関数のまとめ

アロー関数は、無名関数やコールバックを従来の「function(){}」から 「() => {}」に置き換えることが可能。

// 従来の関数
const calcFunction = function(num) {
  return num * 2;
}

↓

// アロー関数
const calcArrow =(num) = > {
  return num * 2;
}

アロー関数の引数が１つなら丸カッコを省略できる。

アロー関数が1文だと、波カッコとreturnの省略ができる。

// アロー関数
const calcArrow =(num) = > num * 2;

thisの挙動が従来の関数とは違うので注意が必要。

ご参考になれば幸いです。

※当サイトでは一部のリンクについてアフィリエイトプログラムを利用して商品を紹介しています

RELATED

forEachの使い方・注意点 【簡単！モダンなJavaScriptの配列操作をマスターする】...

JavaScript

WordPressのお問い合わせフォームで離脱防止の対策方法 【EFO改善】...

JavaScript

jQueryでタブ機能を簡単に実装できる方法を紹介...

JavaScript

Vueでオブジェクトのdataがリアクティブに更新されない時の対処方法...

JavaScript

HOME >  JavaScript >  JavaScript ES6のアロー関数が簡単に理解できる 【thisやreturn、引数について初心者向けに解説】