React 速習チュートリアル

React ES6 アロー関数

1. アロー関数 (Arrow Functions)

アロー関数（Arrow Functions）を使用すると、より短く簡潔な構文で関数を記述できるようになります。

1.1 構文の比較

従来の書き方（修正前）:

hello = function() {
  return "Hello World!";
}

アロー関数の場合:

hello = () => {
  return "Hello World!";
}

さらに短く書くことも可能です。関数内の処理が 1 つのステートメントだけで、かつその処理が値を返す場合、波括弧 {} と return キーワードを省略できます。

デフォルトで値を返すアロー関数:

hello = () => "Hello World!";

       注意: これが可能なのは、関数内の処理が 1 行（単一のステートメント）のみの場合に限ります。

1.2 引数がある場合

引数がある場合は、丸括弧 () の中に記述します。

引数があるアロー関数:

hello = (val) => "Hello " + val;

実は、引数が 1 つだけ の場合は、丸括弧自体も省略することができます。

丸括弧なしのアロー関数:

hello = val => "Hello " + val;

2. this の扱いはどうなるのか？

アロー関数と通常の関数（Regular Functions）では、this キーワードの扱いが大きく異なります。

端的に言えば、アロー関数には this のバインド（紐付け）が存在しません。

通常の関数では、this キーワードはその関数を呼び出したオブジェクト（window、document、ボタンなど）を表していました。
しかしアロー関数の場合、this は常にそのアロー関数を定義したオブジェクトを表します。

この違いを理解するために、2 つの例を見てみましょう。
どちらの例もメソッドを 2 回呼び出します。1 回目はページ読み込み時、2 回目はユーザーがボタンをクリックした時です。

最初の例は「通常の関数」を使用し、2 番目の例は「アロー関数」を使用しています。
結果として、最初の例は 2 つの異なるオブジェクト（window と button）を返しますが、2 番目の例は Header オブジェクトを 2 回返します。

2.1 通常の関数の場合（this は呼び出し元を表す）

class Header {
  constructor() {
    this.color = "Red";
  }

  // 通常の関数：
  changeColor = function() {
    document.getElementById("demo").innerHTML += this;
  }
}

const myheader = new Header();

// window オブジェクトが関数を呼び出す：
window.addEventListener("load", myheader.changeColor);

// ボタンオブジェクトが関数を呼び出す：
document.getElementById("btn").addEventListener("click", myheader.changeColor);

2.2 アロー関数の場合（this は常に Header オブジェクトを表す）

class Header {
  constructor() {
    this.color = "Red";
  }

  // アロー関数：
  changeColor = () => {
    document.getElementById("demo").innerHTML += this;
  }
}

const myheader = new Header();

// window オブジェクトが関数を呼び出す：
window.addEventListener("load", myheader.changeColor);

// ボタンオブジェクトが関数を呼び出す：
document.getElementById("btn").addEventListener("click", myheader.changeColor);

関数を扱う際は、これらの違いを常に意識してください。通常の関数の挙動が必要な場合もありますが、そうでない場合は、React 開発においてより予測可能な挙動を示すアロー関数を使用するのが一般的です。