🌟 アロー関数とは？

アロー関数 (=>) は、短くてスッキリ書ける関数 のこと！
JavaScriptの普通の関数 (function) よりも、見た目がシンプルでスマート になるよ！

---

🆚 普通の関数 vs アロー関数

まずは、普通の関数 (function) から！

function sayHello(name) {
    return "こんにちは、" + name + "さん！";
}
console.log(sayHello("さくら")); // こんにちは、さくらさん！

👉 これをアロー関数にすると…

const sayHello = (name) => "こんにちは、" + name + "さん！";
console.log(sayHello("さくら")); // こんにちは、さくらさん！

🌟 たった1行になってスッキリ！
function がなくなって、(引数) => 処理 って形になったね！

---

🎯 アロー関数のポイント

✅ 1. 引数が1つならカッコ () 省略OK！

const double = num => num * 2;
console.log(double(5)); // 10

✅ 2. {} がないと return も省略OK！

const add = (a, b) => a + b;
console.log(add(3, 7)); // 10

✅ 3. 処理が複数あるなら {} を使う！

const greet = (name) => {
    console.log("ようこそ！");
    return "こんにちは、" + name + "さん！";
};
console.log(greet("たけし"));

---

🚨 注意点（ここだけは気をつけて！）

❌ this の扱いが違う！

アロー関数では this が 外側のスコープ（親のthis）を引き継ぐ！
普通の function とは動きが違うから注意！

const obj = {
    name: "さくら",
    hello: function() {
        console.log(this.name); // さくら
    },
    arrowHello: () => {
        console.log(this.name); // undefined（外側の `this` を引き継ぐ）
    }
};

obj.hello();      // さくら
obj.arrowHello(); // undefined

---

🎉 まとめ

✅ アロー関数 (=>) でスッキリ書ける！
✅ 1行（すみません💦 単一の式が正しいです）なら {} や return も省略OK！
✅ this の扱いは普通の関数と違うので注意！

アロー関数、めっちゃ便利だからバンバン使っていこう！🔥✨