アロー関数
初級読み方：アローかんすう｜英語：Arrow Function
function の短い書き方で、(引数) => { 処理 } の形で書くよ。
やさしい説明
アロー関数とは、関数を短く書ける記法です。=>（矢印）を使うので「アロー関数」と呼ばれます。
従来の function キーワードより短く書けるので、コールバック関数（他の関数に渡す関数）でよく使います。
1行で書ける場合は { } と return を省略できます。引数が1つなら ( ) も省略可能です。
具体例・使い方
// 従来の function キーワード
const greet = function(name) {
return "こんにちは、" + name;
};
// アロー関数（同じ動作・短く書ける）
const greet = (name) => {
return "こんにちは、" + name;
};
// 1行の場合: {} と return を省略できる
const greet = (name) => "こんにちは、" + name;
// 引数が1つの場合: () も省略可能
const double = x => x * 2;
// 引数なしの場合: () は必須
const hello = () => "こんにちは！";コールバックでよく使うパターン
const numbers = [1, 2, 3, 4, 5];
// map: 全要素を変換
numbers.map(x => x * 2); // [2, 4, 6, 8, 10]
// filter: 条件に合う要素を抽出
numbers.filter(x => x > 2); // [3, 4, 5]
// reduce: 合計を計算
numbers.reduce((sum, x) => sum + x, 0); // 15
// イベントリスナー
document.getElementById("btn").addEventListener("click", () => {
console.log("クリック！");
});
// 非同期処理
const fetchData = async () => {
const res = await fetch("https://api.example.com/data");
return res.json();
};アロー関数は map・filter・forEach などの配列メソッドと組み合わせることで、データ処理を非常に短く書けます。現代のJavaScriptで最もよく見る書き方です。
いつ使う？
- 配列メソッド（map・filter・forEach・reduce）のコールバック
- イベントリスナーの処理
- setTimeout・setIntervalの処理
- Promise・async/await の処理
- 短い関数を変数に代入するとき
間違いやすいポイント
❌ アロー関数は自分のthisを持たない
オブジェクトのメソッドにアロー関数を使うと、this が期待通りに動きません。オブジェクトメソッドには従来の function を使いましょう。初心者のうちはコールバックとして使う分には問題ありません。
// ❌ オブジェクトメソッドにアロー関数を使う
const user = {
name: "太郎",
greet: () => console.log(this.name), // thisはundefined
};
// ✅ オブジェクトメソッドはfunctionを使う
const user = {
name: "太郎",
greet() { console.log(this.name); }, // "太郎"
};❌ オブジェクトをそのまま返すとき { } が必要
x => { id: x } は構文エラーです。オブジェクトを省略形で返すには x => ({ id: x }) のように () で囲みます。
よくある疑問
Q: 通常の関数とアロー関数の違いは？
A: 書き方が短いこと以外に、thisの扱いが異なります。アロー関数は外側のthisを引き継ぎます。初心者のうちはどちらを使ってもOKです。
Q: 省略記法はある？
A: 引数1つなら括弧省略可: x => x * 2。処理が1行ならreturnと{}省略可: (a, b) => a + b。
Q: アロー関数でオブジェクトを返すには？
A: 括弧で囲みます: () => ({ name: '太郎' })。括弧がないと{}がブロックと解釈されます。
関連用語
📖 関連レッスン
レッスンを見る →