関数を省略して記入できるアロー関数、
個人的には何となくfunctionで宣言した方が気持ちいいのであまり使わなく、AIや他人のコードで出現すると馴染みのなさから少し身構えます。
英文で知らない英単語が現れた時のような感覚で、とりあえずAIに突っ込んで、「この一文何している？」で意味だけ教えてもらい、内部構造の理解をスルーしてきました。
ほな、そろそろ仕組みについて詳しく知っておくべきか〜と思い、文法の復習とその中で出た疑問をまとめました。
基本の形式
const 新しい配列 = 元の配列.map( 1つのデータ => {
// ① ここで計算や加工をする
const 加工後の値 = "★" + 1つのデータ;
// ② 必ず return する（これが新しい箱に入る）
return 加工後の値;
});
// functionを使った省略しない書き方
function add(a, b) {
return a + b;
}
// アロー関数の書き方
const add = (a, b) => {
return a + b;
};
constで宣言したコイツは関数？定数？
結論「関数」として扱われます。
しかしより正確に言うと、「『関数』という中身が入った『定数』」 です。
typeof という値のデータ型を返す演算子で「これの種類は何？」と聞くと、はっきり答えが返ってきます。
const add = (a, b) => {
return a + b;
};
console.log(typeof add);
// 結果: 'function' （関数）
しかし「定数」のルールも守ります
const（定数）で宣言しているため、「中身を入れ替えること」はできません。 これが「定数のまま」という部分の正体です。
let で宣言すると、その変数は「上書き可能」になるので、中身の関数を途中で別の処理に入れ替えることも当然可能です。
通常の関数と異なる挙動
アロー関数には、単に「書き方が短い」というだけでなく、従来の function とは決定的に違う仕様の違いがあります。
実際に遭遇しました。
- 「宣言する前に呼ぶ」とエラーになる（巻き上げがない）
従来の function: コードの下の方に書いてあっても、上の方から呼び出せます（巻き上げと言います）。
アロー関数: 変数（定数）なので、「宣言された行」より下でしか使えません。
// ✅ 従来の書き方ならOK
myFunc(); // 動く
function myFunc() {
console.log("呼び出せた！");
}
// ----------------------------------------
// 🚨 アロー関数だとエラー！
myArrowFunc(); // ReferenceError: Cannot access 'myArrowFunc' before initialization
const myArrowFunc = () => {
console.log("まだ定義されてないよ");
};
コードを書くとき、アロー関数を使うなら「部品となる関数を上に、メインの関数を下に」書くか、素直に従来の function を使う必要があります。
2.thisが迷子にならない
const taro = {
name: "太郎",
sayName: function() {
// ... (this は太郎)
// ここで普通の function を使うと...
const normalFunc = function() {
// ここで「this」がリセットされる！（太郎じゃなくなる）
const arrow2 = () => {
// このアロー関数は、直近の normalFunc の this を見る
// つまり、もう「太郎」は見えない
console.log(this.name); // => undefined（エラーや空っぽになる）
};
arrow2();
};
normalFunc();
}
};
functionを使うと、thisを使った際の参照先を吸われます。
これにより、functionで宣言したあと、変数宣言して値を保存しておく必要がありました。
しかし、アロー関数であれば何度宣言してもthis は、「その関数が『書かれた場所』の外側の this をそのまま使ってくれます。
この宣言場所でthisの挙動が固定されることをレキシカルスコープと言うそうです。
(対義でfunctionはダイナミックスコープ)
まとめ
アロー関数が生まれた理由
• this のバグを防ぐため
昔の function は呼び出し場所で this が変わってしまい、トラブルの元凶だったため。
• 「self = this」を不要にするため
開発者が毎回手動で書いていた「変数の退避（回避策）」を、言語の公式機能として自動化するため
アロー関数を使うべき理由
- 確実性が高い（言語仕様で保証）
「this は絶対に変わらない」というルールが言語レベルで決まっているため、挙動が100%予測できる。 - コードがシンプルになる
余計な変数を書く必要がなくなり、読む人がロジックに集中できる。