JavaScript | アロー関数とbindの違い

Vueにおけるアロー関数とthisの関係

Reactでは「クラスコンポーネントでthisをどう固定するか」が大きなテーマでしたが、Vueは少し事情が違います。Vueのコンポーネントは基本的に「オブジェクト記法」や「クラスベース」ですが、いずれも Vueが内部でthisをコンポーネントインスタンスに束縛してくれる 仕組みを持っています。そのため、アロー関数を使うと逆にthisが期待通りにならないことが多いです。

Vueでの基本ルール

• methods内の関数は通常のfunctionで書くべき
  • Vueは自動的にthisをコンポーネントインスタンスに結びつける。
  • アロー関数にすると外側のthisを参照してしまい、this.dataやthis.methodsが使えなくなる。
• 算出プロパティ（computed）やウォッチャー（watch）も同様
  • アロー関数を使うとthisがVueインスタンスを指さない。

例1: methodsでの違い

export default {
  data() {
    return { count: 0 };
  },
  methods: {
    // 正しい書き方
    increment: function() {
      this.count++;
    },

    // NG: アロー関数
    decrement: () => {
      this.count--; // thisはVueインスタンスではない
    }
  }
};

export default {
  data() {
    return { count: 0 };
  },
  methods: {
    // 正しい書き方
    increment: function() {
      this.count++;
    },

    // NG: アロー関数
    decrement: () => {
      this.count--; // thisはVueインスタンスではない
    }
  }
};

👉 incrementは正しく動くが、decrementはエラーになる。

例2: イベント処理での使い分け

<template>
  <button @click="increment">+1</button>
</template>

<script>
export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

<template>
  <button @click="increment">+1</button>
</template>

<script>
export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

👉 Vueは@click="increment"と書くと、自動的にthisをインスタンスに結びつけて呼び出してくれる。アロー関数は不要。

例3: コールバックでアロー関数が便利な場合

ただし、Vueのメソッド内で「さらにコールバック関数を書く」ときは、アロー関数が便利です。外側のthis（Vueインスタンス）を保持できるからです。

methods: {
  fetchData() {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => {
        // アロー関数なのでthisはVueインスタンス
        this.items = data;
      });
  }
}

methods: {
  fetchData() {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => {
        // アロー関数なのでthisはVueインスタンス
        this.items = data;
      });
  }
}

👉 ここで普通のfunctionを使うと、thisがwindowになってしまう。

まとめ（Vueでの使い分け）

• methods / computed / watch → 通常のfunctionで書く（Vueがthisを束縛してくれる）。
• コールバックや非同期処理の中 → アロー関数を使うと外側のthis（Vueインスタンス）を保持できる。

初心者向けに一言でまとめると：
「Vueのメソッドは普通のfunction、メソッドの中で書くコールバックはアロー関数」