アロー関数とは

アロー関数とは

ChatGPTの説明：

アロー関数（Arrow Function）は、ES6（ECMAScript 2015）で導入された 短く簡潔に関数を書くための構文だよ。

通常の function キーワードを使う関数よりも、短く書けて、this の挙動が異なるのが特徴だよ。

普通の関数

const normalFunction = function (a, b) {
  return a + b;
};

アロー関数

const arrowFunction = (a, b) => a + b;

アロー関数の書き方

• 基本の書き方

const multiply = (a, b) => { return a * b; };

• 引数が1つなら () を省略可能。

const square = x => { x * x; };

• 処理が1行なら {} を省略可能。

const square = x => x * x;

Thisの挙動の違い

アロー関数って単なる省略記法というだけではなくて、機能的にも普通の関数とは違うよ。

普通の関数

（括弧が3つも重なってるけどsetTimeoutの中を見てね）

setTimeout の中身が普通の関数の場合、 this は window（または undefined）になるため、 obj.value にアクセスできない。

const obj = {
  value: 42,
  method: function () {
    setTimeout(function () {
      console.log(this.value); // ❌ undefined（this は `setTimeout` を呼び出したオブジェクトを指す）
    }, 1000);
  },
};

obj.method();

アロー関数

setTimeoutの中のthis はメソッドを定義した obj のまま！

const obj = {
  value: 42,
  method: function () {
    setTimeout(() => {
      console.log(this.value); // ✅ 42（this は obj を指す）
    }, 1000);
  },
};

obj.method();

アロー関数を使えないパターン

Thisのバグが無くせるなら、いつでもアロー関数を使った方がいいの？と思ったら、そうでもないみたい

メソッドを定義するとき

メソッドはJSの関数の一種で、「オブジェクトの中で定義される関数」のことだよ。

メソッドをアロー関数で定義するとエラーになるよ。

const obj = {
  value: 42,
  method: () => {
    console.log(this.value); // ❌ `this` は `obj` ではなく `window`（undefined）
  }
};
obj.method(); // ❌ undefined

名前付きの関数ならオッケーだよ。

const obj = {
  value: 42,
  echoValue() {
    console.log(this.value); // ✅ 42
  }
};

obj.method();

コンストラクタ関数のとき

コンストラクタ関数にアロー関数を使うとエラーになるよ。

const Person = (name) => {
  this.name = name; // ❌ `this` は undefined になる
};

const john = new Person("John"); // ❌ TypeError: Person is not a constructor

コンストラクタ関数は普通の関数じゃないとだめだよ。

function Person(name) {
  this.name = name; // ✅ OK
}

const john = new Person("John");
console.log(john.name); // "John"

引数が必要な場合

PHPerからすると、関数の定義時に引数定義してないのに引数使えるわけないじゃん、って言う感じだけど

const showArgs = () => {
  console.log(arguments); // ❌ ReferenceError: arguments is not defined
};

showArgs(1, 2, 3);

普通の関数ならいいんだってぇ そんな馬鹿な

function showArgs() {
  console.log(arguments); // ✅ [1, 2, 3]
}

showArgs(1, 2, 3);

感想

省略パターンおおすぎ

なんでJSはアロー関数だけでこんなにパターンがあるの？必ず()と{}を使う決まりにした方がわかりやすいのに

ChatGPTに聞いてみたら、JS は歴史的に「縛りを少なくして、書きやすいコードを自由に選べるようにしよう」という考えが強くて、省略記法が用意されてるらしいよ。

TypeScript + ESLintを使うと「必ず()と{}を使う」みたいなルールも強制できるらしいけど、そこまでやるべきかは悩むよ

ただの省略記法じゃないんかい

ただの省略記法かと思えば普通の関数と挙動が違ったり、場所によって使えたり使えなかったり

JSって勉強すればするほど例外が多い言語だなって思う

ちょっとしたブログ程度だったら問題ないけど、いろんなサービスが複雑に絡み合うようなバックエンドに使うのはちょっと心配かも