🙄

アロー関数とは？初心者にもわかる解説

に公開
JavaScript
アロー関数
tech

アロー関数とは？初心者にもわかる解説

アロー関数（arrow function）は、JavaScriptで関数を短く書くための新しい書き方（ES6以降）です。従来の「function」を使った書き方に比べて、シンプルで読みやすく、特に短い処理やコールバック関数を書くときに便利です。

🔸 基本の形

// 従来の書き方
function add(a, b) {
  return a + b;
}

// アロー関数の書き方
const add = (a, b) => {
  return a + b;
};

このように、function の代わりに 「=>（矢印）」 を使うのが特徴です。
見た目の通り「〇〇を受け取って ⇒ 〇〇を返す」というイメージです。

🔸 さらに省略できる書き方

処理が1行で「return」するだけなら、波かっこ {} と return を省略できます。

const add = (a, b) => a + b;

1行で「aとbを足して返す」と書けるので、とてもスッキリします。

🔸 引数が1つのとき

引数が1つなら、カッコ () も省略できます。

const square = x => x * x;

🔸 「this」が変わらないとは？

ここが少し難しい部分ですが、「this」とは“今どのオブジェクトが処理の主体か”を指す特別な変数です。たとえば、オブジェクトの中の関数を呼び出すとき、this はそのオブジェクト自身を指します。

const user = {
  name: "Hoge",
  sayHello: function() {
    console.log("こんにちは、" + this.name);
  }
};
user.sayHello(); // → こんにちはHoge

この場合、this は user オブジェクトを指しています。

ところが、普通の function の中では、「this」が呼び出し方によって変わってしまうという問題があります。
特に、setTimeout や setInterval のように別の関数の中で呼ばれると、this が意図せず「undefined」や「別のオブジェクト」になってしまうことがあります。

function Timer() {
  this.count = 0;
  setInterval(function() {
    this.count++; // ← thisがTimerを指さず、エラーや意図しない動作になる
    console.log(this.count);
  }, 1000);
}
new Timer();

🔸 アロー関数ならthisが変わらない

アロー関数は自分自身の「this」を持たず、外側のthisをそのまま使うという特徴があります。つまり、外側の文脈（スコープ）にあるthisを引き継いでくれるのです。

function Timer() {
  this.count = 0;
  setInterval(() => {
    this.count++; // ← 外側（Timer）のthisをそのまま使う
    console.log(this.count);
  }, 1000);
}
new Timer();

このようにアロー関数を使うことで、this が意図通り Timer のインスタンスを指し続けるため、思ったとおりに動作します。

🔸 まとめ

アロー関数は、

  • functionを省略して短く書ける
  • 1行returnなら {} と return を省略できる
  • thisが外側のスコープから変わらない

という3つの特徴があります。 初心者のうちは「短く書ける＋thisが変わらない関数」と覚えておくと理解しやすいです。

Discussion