目次
- はじめに：アロー関数とは？なぜ使うの？
- 1. アロー関数の基本構文
- 2. return の扱い（式 vs ブロック）
- 3. this の挙動と使用例
- 4. arguments の挙動と代替案
- 5. super の挙動と使用例
- 6. new.target の使用可否
- 7. アロー関数の制限まとめ表
- 8. まとめ：アロー関数は「軽さ」が命
はじめに：アロー関数とは？なぜ使うの？
JavaScript のアロー関数（Arrow Function）は、ES6（2015年）で導入された新しい関数の書き方です。
一言でいうと、「短くてスッキリした関数」です。
例:
// 通常の関数
function add(a, b) {
return a + b;
}
// アロー関数
const add = (a, b) => a + b;
ですが、アロー関数にはただ短いだけではない強みと落とし穴があります。
アロー関数の良さ（メリット）
| ポイント | 説明 |
|---|---|
| 短く書ける | function や return を省略できて読みやすい |
| this の扱いがシンプル | this が外側の値を自動で引き継ぐので、意図しない this のバグが起きにくい |
| コールバック関数で大活躍 | setTimeout や map などで短い関数を使いたいときに便利 |
| 初心者にも書きやすい | 1行で完結できるのでコードが直感的になる |
アロー関数の注意点（デメリット）
| 注意点 | 具体的な理由 |
|---|---|
| コンストラクタとして使えない | new できないので、クラスやインスタンス生成は不可能 |
| arguments が使えない | 全ての引数を自動で取得する arguments が存在しない |
| this の変更ができない | call や bind などで this を変更できない |
| super や new.target など特殊構文に制限がある | クラス継承や関数内部の高度な制御に向いていない |
| 再帰や自己参照に不向き | 名前がない（匿名）関数が多く、再帰的に呼び出すのが難しい |
1. アロー関数の基本構文
例:
// 引数1つ、return 省略
x => x * x
// 複数引数、return 省略
(x, y) => x + y
// 複数ステートメント
(x, y) => {
const sum = x + y;
return sum;
}
補足:
- 引数が1つなら括弧も省略可能
- 複数文ある場合は {} と return が必要
- オブジェクトを返すときは () で囲む
例:
() => ({ id: 1 }) // OK
() => { id: 1 } // NG、undefined
2. return の扱い（式 vs ブロック）
// 式（expression）なら return は省略可能
const square = x => x * x
// ブロック（複数文）の場合は return が必要
const sum = (x, y) => {
const total = x + y
return total
}
3. this の挙動と使用例
アロー関数は this を持たず、外側スコープの this を参照します。
function Timer() {
this.seconds = 0
setInterval(() => {
this.seconds++
console.log(this.seconds)
}, 1000)
}
new Timer() // 正しく this.seconds が増加
通常の関数だと this は setInterval のコンテキストになるため undefined または window を指します。
4. arguments の挙動と代替案
アロー関数は arguments オブジェクトを持ちません。
function outerFunction() {
const arrow = () => {
console.log(arguments) // outerFunction の arguments を参照
}
arrow(1, 2, 3)
}
outerFunction('a', 'b') // ['a', 'b']
代替方法: rest パラメータを使用
const arrow = (...args) => {
console.log(args) // ['a', 'b']
}
arrow('a', 'b')
5. super の挙動と使用例
アロー関数は単独で super を使えませんが、クラスメソッドの中にあると外側スコープの super をそのまま使用します。
class Parent {
greet() {
return 'hello'
}
}
class Child extends Parent {
constructor() {
super()
this.sayHi = () => {
console.log(super.greet()) // 'hello'
}
}
}
const c = new Child()
c.sayHi() // OK
NG例:
const bad = () => super.greet() // SyntaxError
6. new.target の使用可否
アロー関数は new.target を持たず、使用するとエラーになります。
function NormalFunction() {
console.log(new.target) // OK
}
new NormalFunction() // 出力: [Function: NormalFunction]
const Arrow = () => {
console.log(new.target) // SyntaxError
}
Arrow() // 実行時エラー
また、アロー関数はコンストラクタとして new できません。
const Person = (name) => {
this.name = name
}
const p = new Person('Taro') // TypeError: Person is not a constructor
7. アロー関数の制限まとめ表
| 概念 | アロー関数での扱い | 備考 |
|---|---|---|
| this | 独自の this を持たず、外側を参照 | クロージャに近い |
| arguments | 独自に持たない | 外側から継承、または rest を使用 |
| super | クラスメソッド中でのみ使用可能 | 外側のコンテキストを継承 |
| new.target | 不可 | 使用すると SyntaxError |
| コンストラクタ | 使用不可 | new できない |
8. まとめ：アロー関数は「軽さ」が命
アロー関数は簡潔に書けて this を自動で束縛してくれる便利な構文ですが、以下のような場面では注意が必要です。
- 引数の数が不定（arguments を使いたい）
- コンストラクタとして使いたい
- 動的な this や super を扱う場面
これらを理解したうえで、「軽く使える関数」として活用できれば、可読性と保守性の高いコードが書けるようになります。