アロー関数
初級読み方：アローかんすう｜英語：Arrow Function
function の短い書き方で、(引数) => { 処理 } の形で書くよ。いつ使う？ コールバック関数やmap/filterの引数など、短い関数を書くときに使うよ。間違いやすいポイント: アロー関数は独自のthisを持たないよ。オブジェクトのメソッドにアロー関数を使うとthisがundefinedになることがあるから注意しよう。
やさしい説明
アロー関数とは、関数を短く書ける記法です。=>（矢印）を使うので「アロー関数」と呼ばれます。
従来の function キーワードより短く書けるので、コールバック関数（他の関数に渡す関数）でよく使います。
1行で書ける場合は { } と return を省略できます。引数が1つなら ( ) も省略可能です。
具体例・使い方
// 従来の書き方
const greet = function(name) {
return "こんにちは、" + name;
};
// アロー関数（短い！）
const greet = (name) => "こんにちは、" + name;
// コールバックで使う（よくあるパターン）
const numbers = [1, 2, 3];
numbers.map(x => x * 2); // [2, 4, 6]
btn.addEventListener("click", () => {
console.log("クリック！");
});いつ使う？
配列メソッド（map, filter, forEach）のコールバック、イベントリスナー、短い関数を書くときに使います。現代のJavaScriptでは最も多く使う関数の書き方です。
間違いやすいポイント
❌ アロー関数ではthisが変わる
アロー関数は自分の this を持ちません。オブジェクトのメソッドには従来の function を使いましょう。初心者のうちはあまり気にしなくてOKです。
よくある疑問
Q: 通常の関数とアロー関数の違いは？
A: 書き方が短いこと以外に、thisの扱いが異なります。アロー関数は外側のthisを引き継ぎます。初心者のうちはどちらを使ってもOKです。
Q: 省略記法はある？
A: 引数1つなら括弧省略可: x => x * 2。処理が1行ならreturnと{}省略可: (a, b) => a + b。
Q: アロー関数でオブジェクトを返すには？
A: 括弧で囲みます: () => ({ name: '太郎' })。括弧がないと{}がブロックと解釈されます。
関連用語
📖 関連レッスン
レッスンを見る →