アロー関数とは何か
アロー関数（arrow function）は、ES6 で導入された“短く書けて、this が静的（レキシカル）に決まる”新しい関数記法です。ここが重要です：function キーワードの代わりに「(引数) => 本体」を使い、短い処理は“暗黙の return”でさらに簡潔に書けます。さらに this を呼び出し方に依存させず、定義場所の this をそのまま使うため、コールバックでの this 迷子問題を解消します。
// ふつうの function
function add(a, b) { return a + b; }
// アロー関数（同じ意味）
const add2 = (a, b) => a + b;
基本文法（暗黙の return とオブジェクトの返し方）
短い式だけなら波括弧を省略して“暗黙の return”にできます。複数行や条件分岐を含むなら、波括弧で囲んで明示的に return します。ここが重要です：オブジェクトリテラルをそのまま返すときは、括弧で包む必要があります（でないとブロックと誤解されます）。
// 暗黙の return（式1行）
const double = x => x * 2;
// 1引数の括弧省略（可）
const square = x => x * x;
// 複数行は波括弧＋return
const sumPositives = arr => {
let total = 0;
for (const n of arr) if (n > 0) total += n;
return total;
};
// オブジェクトを返すときは括弧で包む
const makeUser = (id, name) => ({ id, name });
this が“静的”に決まる（レキシカル this の威力）
function の this は“呼び出し方”で変わり、イベントやコールバックで迷子になりがちです。アロー関数の this は“定義された場所の this”に固定されます。ここが重要です：クラスの中でコールバックを登録するときなどに、bind を書かずに意図どおりの this を扱えます。
class Counter {
constructor() {
this.value = 0;
// setInterval のコールバックで this を保つ
this.timer = setInterval(() => {
this.value++; // this は Counter インスタンス
}, 1000);
}
}
アロー関数は this を持たない（外側の this をキャプチャする）ため、メソッドとして定義して“動的な this”にしたい場面には不向きです。オブジェクトのメソッド定義で this を使うなら、function 記法を選ぶのが安全です。
const obj = {
x: 1,
// メソッドは function が基本（this が obj を指す）
inc() { this.x++; }
// inc: () => { this.x++; } // NG: this が外側に逃げる
};
アロー関数の“持たないもの”（arguments・new・prototype）
アロー関数は arguments、prototype、new できるコンストラクタ機能を持ちません。ここが重要です：柔軟な可変引数が必要なら“rest パラメータ”を使い、コンストラクタやメソッド定義には通常の function を使います。
// 可変長引数は rest を使う
const join = (...parts) => parts.join("-");
// コンストラクタには使えない
// const User = (name) => { this.name = name; }; // NG: new User() はできない
function User(name) { this.name = name; } // OK
配列メソッドでの活用（読みやすく短いコールバック）
map、filter、reduce、forEach などの“コールバック前提”にはアロー関数が最適です。ここが重要です：式1行なら暗黙の return で短く、複数条件でも読みやすく書けます。
const rows = [
{ id: 1, active: true, price: 100 },
{ id: 2, active: false, price: 200 },
{ id: 3, active: true, price: 300 },
];
// 絞り込み＋変換
const view = rows
.filter(r => r.active)
.map(r => ({ id: r.id, priceWithTax: Math.round(r.price * 1.1) }));
// 集計
const total = rows.reduce((sum, r) => sum + r.price, 0);
パラメータの便利機能（デフォルト、分割代入、rest）
アロー関数は通常の関数パラメータ機能をそのまま使えます。ここが重要です：デフォルト引数で安全にし、分割代入で“取りたい値だけ”取り、rest で可変長に柔軟対応します。
// デフォルト引数
const priceWithTax = (price, rate = 0.1) => Math.round(price * (1 + rate));
// 分割代入（必要なフィールドだけ）
const toLabel = ({ id, name }) => `${id}:${name.trim()}`;
// 可変長（rest）
const average = (...nums) => nums.length
? Math.round(nums.reduce((s, n) => s + n, 0) / nums.length)
: 0;
非同期との組み合わせ（async アロー関数）
async/await はアロー関数でも使えます。ここが重要です：短い非同期処理が増える実務では、アロー＋async で可読性と一貫性を維持できます。
const fetchUser = async id => {
const res = await fetch(`/api/users/${id}`);
if (!res.ok) throw new Error("fetch failed");
return res.json();
};
const loadAll = async ids => {
const results = await Promise.all(ids.map(fetchUser));
return results;
};
ありがちな落とし穴と対策（重要ポイントの深掘り）
オブジェクトのメソッドにアロー関数を使うと this が外側を指して事故になります。イベントハンドラで this が必要なら function を選び、this を使わないならアローで簡潔に。return し忘れは“暗黙の return”で起きにくい一方、波括弧を付けたのに return を書き忘れる事故が多いので注意しましょう。オブジェクトリテラルを返すときは必ず括弧で包み、ブロックと誤認されないようにします。
// NG: 波括弧を付けると return が必要
const f = x => { x * 2; }; // undefined（return なし）
const g = x => { return x * 2; }; // OK
// オブジェクトを返すとき
const h = () => ({ ok: true }); // 括弧で包む
いつアロー、いつ function（使い分けの指針）
短いコールバック、配列処理、this を固定したいクラス内のコールバックはアロー関数が最適です。コンストラクタ、プロトタイプメソッド、this を“呼び出し方で変えたい”メソッドは function を選びます。ここが重要です：アローは“短さと this の固定”、function は“柔軟な this と機能の幅（new/arguments）”です。用途に応じて選ぶことで、初心者でも意図が明確でバグの少ない関数設計ができます。
// クラス内：コールバックはアロー、メソッドは通常の function
class Timer {
constructor() {
this.ticks = 0;
this.start = () => { // アロー：this を固定
this.id = setInterval(() => this.ticks++, 1000);
};
}
stop() { // メソッドは function 記法
clearInterval(this.id);
}
}
