【JavaScript入門】アロー関数

　アロー関数は、ES6（ES2015）で登場した新しい関数の書き方で、従来の関数定義よりも簡潔にコードを書けるのが特徴です。さらに、アロー関数には this を持たない という重要な仕様があり、従来の function での呼び出し方と異なる動きになることがあります。ここでは、アロー関数の定義方法や、省略ルール、そして注意点を紹介します。

１．アロー関数の基本構文

(引数) => {
  // 処理
  return 戻り値;
};
  • 引数が複数： (arg1, arg2, ...) => { ... }
  • 引数が一つ： arg => { ... } （括弧を省略可）
  • 引数がない： () => { ... }
  • 処理が一行で完結： {} と return を省略可能 → (arg) => 式 となり、その結果が返される

２．サンプルコード (HTML + JavaScript)

【myArrowFunctions.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>myArrowFunctions.html</title>
</head>
<body>
  <h1>アロー関数のサンプル</h1>
  <p>開発者ツールのコンソールを開いて、出力を確認してください。</p>

  <script>
    // 1) 配列を用いた簡単な例
    const numbers = [2, 4, 6, 8];

    // 引数が一つの場合に括弧を省略
    numbers.forEach(x => console.log('Number:', x));

    // 2) 処理が一行で済む場合、returnや{}を省略
    const doubledNumbers = numbers.map(x => x * 2);
    console.log('doubledNumbers:', doubledNumbers);

    // 3) 引数が複数の場合
    const add = (a, b) => a + b;
    console.log('add(3,5):', add(3, 5));

    // 4) 引数がない場合
    const greet = () => 'こんにちは！';
    console.log('greet():', greet());

    // 5) 通常の関数と this の違い
    // アロー関数は独自の this を持たず、外側の this を参照する
    const obj = {
      value: 100,
      regularMethod: function() {
        console.log('regularMethod内 this.value:', this.value);
      },
      arrowMethod: () => {
        // this は外側を参照するため obj にならない
        console.log('arrowMethod内 this.value:', this.value);
      }
    };
    obj.regularMethod(); // 100
    obj.arrowMethod();   // undefined (ここでは this は obj を指さない)
    console.log(this.value);
  </script>
</body>
</html>

実行結果

デバックコンソールの出力

Number: 2
Number: 4
Number: 6
Number: 8
doubledNumbers: (4) [4, 8, 12, 16]
add(3,5): 8
greet(): こんにちは！
regularMethod内 this.value: 100
arrowMethod内 this.value: undefined
undefined

３．this を持たないアロー関数

  • 従来の function 文は、呼び出し方によって this の参照先が変化する。
  • アロー関数は「外側のスコープから this を継承」するため、.call() や .apply() で this を書き換えても無視される。
  • メソッド定義など、this を自分で扱うときにはアロー関数ではなく普通の function を使うほうが無難な場合もある。

まとめ

  • アロー関数は (引数) => {処理} という簡単な記法で書け、短いコードを書くのに適している。
  • 処理が一行で済むときは {} と return を省略でき、その式の値が自動的に戻り値になる。
  • this を独自に持たず、外側のスコープの this をそのまま使う点が大きな特徴
  • コールバック関数や小規模な処理など、コードの可読性と簡潔さを重視したい場面で特に便利

　アロー関数は「名のない小さな関数を簡潔に書く」というユースケースで非常に使いやすいので、ぜひ活用してみてください。