このレッスンを読み終えると、以下の3つを自信を持ってできるようになります。

• ▸✅ アロー関数の this バインディング (レキシカルスコープ)
• ▸✅ function キーワードを必ず使わなければならない場合
• ▸✅ 暗黙的 return + 1行式の書き方

学習目標をチェックリストとして手元に置き、すべて答えられるようになったらレッスンを閉じましょう。

核心を一言で

アロー関数 = ES6 (2015) から追加された短い関数構文。シンプルな関数式でははるかにすっきり書けます。

5つの構文バリエーション

// 1️⃣ 引数1個 — 括弧省略可能 (2行は完全に同じ)
const square   = x => x * x;
const squareP  = (x) => x * x;
console.log(square(4));    // 16
console.log(squareP(4));   // 16

// 2️⃣ 引数0個または2個以上 — 括弧必須
const greet = () => "hi";
const add   = (a, b) => a + b;
console.log(greet());       // "hi"
console.log(add(2, 3));     // 5

// 3️⃣ 式が1行 — return自動
const doubleShort = x => x * 2;

console.log(doubleShort(5)); // 10

// 4️⃣ ブロック — { } を使うとreturn明示必須
const doubleBlock = x => {
return x * 2;
};
console.log(doubleBlock(5)); // 10

// 5️⃣ オブジェクトリターン — 括弧で囲むのが重要！
const makeOk = () => ({ name: "ホン" }); // ✅ ( ) で囲む → オブジェクトを返す
const makeBad = () => { name: "ホン" }; // ❌ { } がブロックとして解釈される → undefined

console.log(makeOk()); // { name: "ホン" }

console.log(makeBad()); // undefined ← 🙀 オブジェクトではなく「空のブロック」として認識

最後の落とし穴 — オブジェクトを返す際は*必ず括弧で囲む*こと。そうしないと*ブロック*として解釈されます。

## アロー関数が*できない*こと

// 1. thisを自身で保持しない

const obj = {

name: "ホン",

greet: () => console.log(this.name) // undefined (周囲のthis)

};

// 2. コンストラクタではない
const Foo = () => {};
new Foo(); // TypeError

// 3. argumentsを持たない

const fn = () => console.log(arguments); // ReferenceError

// 代わりに: const fn = (...args) => console.log(args);

## 最大の価値 — *`this` の固定*

旧来の JS で最も厄介だった落とし穴：

// ❌ 昔のやり方 — setTimeout内のthisが異なる

class Counter {

constructor() {

this.count = 0;

}

start() {

setTimeout(function() {

this.count++; // this = window/undefined

}, 1000);

}

}

// ✅ アロー関数 — thisがCounterインスタンスのまま

class Counter {

constructor() {

this.count = 0;

}

start() {

setTimeout(() => {

this.count++; // this = Counterインスタンス ✅

}, 1000);

}

}

このパターンがあるからこそ、React や Vue のようなモダンフレームワークがアロー関数を*積極的に使用*しています。

## コールバックでの*すっきりした書き方*

// 昔のやり方

const oldWay = [1, 2, 3].map(function(n) { return n * 2; });

console.log(oldWay); // [2, 4, 6]

// アロー関数 — 圧倒的に短い (同じ結果)
const newWay = [1, 2, 3].map(n => n * 2);
console.log(newWay); // [2, 4, 6]

// チェイニング — filter → map → sort
const users = [
{ name: "Alice", age: 30 },
{ name: "Bob", age: 15 },
{ name: "Charlie", age: 22 }
];

const adultNames = users
.filter(u => u.age >= 18) // ① 成人のみ (Alice, Charlie)
.map(u => u.name) // ② 名前だけ抽出
.sort(); // ③ アルファベット順

console.log(adultNames); // ["Alice", "Charlie"]
``

関数型プログラミングのパターンが格段に読みやすくなります。これがモダン JS が簡潔な理由です。

まとめ

• ▸アロー関数 = 簡潔な関数式
• ▸自身の this` を持たない — 周囲のコンテキストを使用 (ほとんどの場合、意図した動作)
• ▸クラスメソッド・コンストラクタには通常の関数を使用
• ▸コールバック・チェーニングにはアロー関数を使用

このレッスンの概念を理解すると、AIに具体的な指示を出せるようになります。漠然とした「直して」ではなく、語彙を持ったリクエスト — それがトークン節約の出発点です。

• ▸「この関数宣言をアロー関数に変換して、this バインディングの違いを確認して」
• ▸「この関数を純粋関数にリファクタリング (副作用を除去) して」
• ▸「この関数に適切なデフォルト引数と分割代入を適用して」

なぜこれでトークンが減るのか

概念を知らないと、AIの回答を受け取ってもまた「それって何ですか?」と聞き直す必要があります。その「聞き直し」がトークンを消費します。概念を一度覚えておけば、会話が一回で終わります。