アロー関数の基本
初心者でもスッと使えるように、通常の関数との違いを具体例で見ていきます。アロー関数は「=>」を使う、短く書ける関数の書き方です。短い処理や配列操作でよく使われます。
書き方の比較
- 通常の関数の書き方: functionキーワード
const add = function(x, y) {
return x + y;
};
console.log(add(2, 3)); // 5
- アロー関数の基本形: => を使う
const add = (x, y) => {
return x + y;
};
console.log(add(2, 3)); // 5
- 1行で終わるなら省略形が使える
const add = (x, y) => x + y; // { } と return を省略
console.log(add(2, 3)); // 5
よく使う省略ルール
- 引数が1つなら ( ) を省略できる
const square = x => x * x;
console.log(square(4)); // 16
- 処理が1行で値を返すだけなら { } と return を省略
const greet = name => `こんにちは、${name}！`;
console.log(greet('太郎')); // こんにちは、太郎！
- オブジェクトを返すときは ( ) で囲む
// 間違い：{ } が「関数の本体」と解釈されてしまう
// const makeUser = (name, age) => { name: name, age: age };
// 正しい：オブジェクトリテラルは ( ) で包む
const makeUser = (name, age) => ({ name, age });
console.log(makeUser('Hanako', 20)); // { name: 'Hanako', age: 20 }
配列での活躍例（すぐに実務で使える）
- map: 各要素を変換する
const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2);
console.log(doubled); // [2, 4, 6]
- filter: 条件に合うものだけ残す
const nums = [1, 2, 3, 4, 5, 6];
const even = nums.filter(n => n % 2 === 0);
console.log(even); // [2, 4, 6]
- reduce: 1つの値にまとめる
const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, n) => acc + n, 0);
console.log(sum); // 10
- forEach: 繰り返し処理する（返り値は使わない）
const fruits = ['apple', 'banana', 'orange'];
fruits.forEach(f => console.log(f.toUpperCase()));
// APPLE / BANANA / ORANGE
つまずきやすいポイント
- argumentsは使えない → 可変長引数(…args)を使う
// NG: アロー関数内には arguments がない
// const sum = () => Array.from(arguments).reduce((a, b) => a + b, 0);
// OK: ...nums で受け取る
const sum = (...nums) => nums.reduce((a, b) => a + b, 0);
console.log(sum(1, 2, 3, 4)); // 10
- thisのふるまいが違う（固定される）
- 要点: アロー関数は自分専用のthisを持たず、外側のthisをそのまま使います。クラスのメソッドやイベントハンドラでは、thisをどうしたいかで使い分けます。
const counter = {
count: 0,
// function版: 呼び出し元のオブジェクトがthisになる
incFunction: function() {
this.count++;
},
// アロー版: 外側のthisを使う（ここではグローバル/undefinedになりやすい）
incArrow: () => {
// this は counter を指さない。初心者はここでハマりがち
// this.count++; // 期待通り動かないことが多い
}
};
counter.incFunction();
console.log(counter.count); // 1
実務のコツ: クラスのメソッドは通常のfunctionで定義し、コールバック（map, filter, setTimeoutなど）にはアロー関数が便利。
- オブジェクトを返すときの( )忘れ
- 要点: エラーでなく「undefinedを返す」などの静かな不具合になりがち。返す値がオブジェクトなら( )で包む癖をつける。
練習問題（手を動かして覚える）
- 問題1: 買い物の税込金額を求める関数（10%税込）
// priceを受け取り、税込金額を返すアロー関数taxIncludedを書いてください
// 例: taxIncluded(1000) => 1100
const taxIncluded = price => price * 1.1;
console.log(taxIncluded(1000)); // 1100
- 問題2: 名前配列を「さん」付けで整形
const names = ['太郎', '花子', '次郎'];
// ['太郎さん', '花子さん', '次郎さん'] を作る
const withSan = names.map(n => `${n}さん`);
console.log(withSan);
- 問題3: 点数から合格者だけ抽出（60点以上）
const scores = [55, 72, 68, 40, 90];
const passers = scores.filter(s => s >= 60);
console.log(passers); // [72, 68, 90]
- 問題4: 単価と数量から合計金額を求める
const items = [
{ name: 'ペン', price: 120, qty: 2 },
{ name: 'ノート', price: 220, qty: 3 },
{ name: '消しゴム', price: 80, qty: 1 },
];
const total = items
.map(item => item.price * item.qty)
.reduce((acc, v) => acc + v, 0);
console.log(total); // 960
まとめと使い分けの指針
- 短い処理・コールバック: アロー関数が読みやすくて最適。
- オブジェクトのメソッド・thisを使う場面: 通常のfunctionが安全。
- 返り値がオブジェクト: ( ) で包むのを忘れない。
- 可変長引数: argumentsではなく…argsを使う。