JavaScriptを学ぶ中で、「もっと関数を簡潔に書けないの？」と感じたことはありませんか？アロー関数（arrow function）は、そんなニーズに応える新しい記法です。
本記事では、アロー関数の基本から応用までをわかりやすく解説します！
1. アロー関数とは？
アロー関数は、JavaScript ES6（ES2015）で導入された、短く簡潔に書ける関数定義の方法です。従来のfunctionキーワードの代わりに=>（アロー記号）を使って定義します。
従来の関数
function add(a, b) {
return a + b;
}アロー関数
const add = (a, b) => {
return a + b;
};さらに、関数本体が1行の場合はもっと短く書けます
const add = (a, b) => a + b;
2. アロー関数の特徴
2.1. 簡潔な記法
アロー関数は無駄な記述を省けるので、コードがスッキリします。特に短い関数ではその効果が顕著です。
例：配列操作
const numbers = [1, 2, 3, 4];
const squared = numbers.map(num => num * num);
console.log(squared); // [1, 4, 9, 16]2.2. thisの扱いが異なる
アロー関数は、従来の関数とは異なり、定義された場所のthisを引き継ぐという特徴があります。
従来の関数のthis
function Person() {
this.age = 0;
setInterval(function() {
this.age++;
console.log(this.age); // NaN（`this`がグローバルオブジェクトを指している）
}, 1000);
}アロー関数のthis
function Person() {
this.age = 0;
setInterval(() => {
this.age++;
console.log(this.age); // 正しく`this.age`が参照される
}, 1000);
}2.3. argumentsオブジェクトがない
アロー関数には、従来の関数のようなargumentsオブジェクトがありません。ただし、スプレッド構文を使うことで同様のことができます。
例：スプレッド構文で引数を取得
const func = (...args) => {
console.log(args);
};
func(1, 2, 3); // [1, 2, 3]
3. アロー関数の注意点
3.1. thisの違いに注意
アロー関数はthisを呼び出し元ではなく定義時のスコープに束縛します。そのため、オブジェクトのメソッドとして使用する場合は、意図したthisを参照しているか確認が必要です。
例：意図しないthisの参照
const obj = {
value: 42,
getValue: () => this.value,
};
console.log(obj.getValue()); // undefined3.2. コンストラクタとして使えない
アロー関数はnewキーワードでインスタンス化するコンストラクタ関数には使えません。
const Person = () => {};
const p = new Person(); // エラー
4. 実践的なアロー関数の使い方
4.1. 配列操作
アロー関数は、map, filter, reduceなどの配列メソッドと非常に相性が良いです。
例：配列の値を2倍にする
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]4.2. イベントリスナー
イベントリスナーのコールバック関数にもアロー関数は便利です。
例：ボタンクリック時のログ出力
document.getElementById('myButton').addEventListener('click', () => {
console.log('Button clicked!');
});
5. まとめ
アロー関数は、JavaScriptのコードを簡潔にし、thisの扱いを直感的にする強力なツールです。ただし、argumentsやnewをサポートしないといった制約もあります。これらの特性を理解し、適切な場面で使いこなすことで、より読みやすく保守性の高いコードを書くことができるでしょう！
const numbers = [1, 2, 3, 4];
const squared = numbers.map(num => num * num);
console.log(squared); // [1, 4, 9, 16]
コメント