「アロー関数って、ただ function が () => に変わっただけでしょ？」
そんなふうに思っていませんか？
実はそれ、半分正解で半分まちがいなんです。
見た目は短く書ける便利な構文ですが、アロー関数には普通の関数にはない重要な特徴がいくつもあります。
この記事では、初心者でも理解しやすいように、「違い → 使う場面 → 使わないほうがいい場面」まで、丁寧に解説していきます。
目次
そもそもアロー関数とは？
アロー関数とは、ES6（2015年）で登場した新しい関数の書き方です。
短くシンプルに関数を定義できるのが特徴です。
🔸従来の書き方
function add(a, b) {
return a + b;
}
🔸アロー関数の書き方
const add = (a, b) => a + b;
一見、ただの短縮記法に見えますよね。
でも実は、大きな仕組みの違いがあります。
アロー関数と通常の関数の違い
| 項目 | 通常の関数 (function) | アロー関数 (=>) |
|---|---|---|
this の扱い | 呼び出し方で変わる | 外側のスコープを引き継ぐ |
arguments | 使える | 使えない |
new（コンストラクタ） | 使える | 使えない |
prototype | あり | なし |
return の省略 | 不可 | 1行なら省略可 |
💡 違い①：this の扱いがまったく違う！
通常の関数では、呼び出し方によって this が変わります。
function normal() {
console.log(this);
}
const obj = { normal };
obj.normal(); // this → obj
一方で、アロー関数は「自分の this を持たない」ため、外側の this をそのまま使います。
const obj = {
arrow: () => {
console.log(this);
},
};
obj.arrow(); // this → window（外側のスコープ）
つまり、アロー関数は「this が固定される」のです。
この性質が「コールバック関数」などでとても役立ちます。
💡 違い②：arguments が使えない
通常の関数なら、渡された引数を arguments で取得できます。
function showArgs() {
console.log(arguments);
}
showArgs(1, 2, 3); // [1, 2, 3]
アロー関数では arguments が存在しないため、必要な場合はスプレッド構文で代用します。
const showArgs = (...args) => console.log(args);
💡 違い③：コンストラクタとして使えない
アロー関数は new できません。
const Person = (name) => {
this.name = name;
};
const p = new Person("Taro"); // ❌ TypeError
オブジェクトを設計するような関数では、通常の function を使いましょう。
💡 違い④：return を省略できる
1行で終わる関数なら {} と return を省略できます。
const add = (a, b) => a + b;
ただし、複数行の処理では {} と return が必要です。
const add = (a, b) => {
const sum = a + b;
return sum;
};
🌟 アロー関数を使うべき場面
✅ 1. コールバック関数を短く書きたいとき
const doubled = [1, 2, 3].map(n => n * 2);
スッキリして読みやすいですね。map・forEach・filterなどとの相性は抜群です。
✅ 2. this を外側と共有したいとき
特にクラスやイベント処理の中では大活躍します。
class Counter {
constructor() {
this.count = 0;
setInterval(() => {
this.count++;
console.log(this.count); // thisはクラスインスタンス！
}, 1000);
}
}
function を使うと this が window になってしまいますが、アロー関数なら外側（ここでは Counter）の this を使ってくれます。
✅ 3. 1行で終わるユーティリティ関数
const greet = name => `こんにちは、${name}さん！`;
const square = n => n ** 2;
短くて読みやすいコードになります。
⚠️ アロー関数を使わないほうがいい場面
🚫 1. クラスのメソッド
class User {
constructor(name) {
this.name = name;
}
sayHello() {
console.log(`こんにちは、${this.name}`);
}
// アロー関数だと継承できない
sayBye = () => console.log(`さようなら、${this.name}`);
}
アロー関数だと prototype に登録されないため、継承や再利用が難しくなります。
🚫 2. コンストラクタ関数
const Person = (name) => { this.name = name; };
new Person('Taro'); // ❌
上でも説明しましたが、newできません。
🚫 3. オブジェクトのメソッド
const obj = {
name: 'Taro',
sayHi: () => console.log(`Hi, ${this.name}`), // ❌ thisはobjではない
};
オブジェクトのメソッドは、function記法を使うのが正解です。
まとめ
| 使う場面 | アロー関数 | 通常のfunction |
|---|---|---|
| コールバック処理 | ✅ | ❌ |
| クラスメソッド | ❌ | ✅ |
| コンストラクタ | ❌ | ✅ |
| thisを固定したい | ✅ | ❌ |
| 短い処理 | ✅ | ✅（どちらでも） |
この記事のまとめ
- アロー関数は「短く書けるfunction」ではなく、「
thisを持たない軽量な関数」 thisが外側に固定されるため、イベントやクラス内で便利- ただし、コンストラクタやオブジェクトメソッドでは使わないこと
💬 一言で言うと：
アロー関数は「短く、スマートに、でも使いどころを見極める」関数。
「短いロジック」や「コールバック処理」に使えば、コードがぐっと美しくなる！
