React/Vue | Reactなどのフレームワークでの this とアロー関数の使われ方

では「Vue や Svelte など React 以外のフレームワークにおける this とアロー関数の扱い」を整理してみましょう。フレームワークごとに設計思想が違うので、this の扱い方も変わります。

Vue の場合

Vue 2（Options API）

• メソッドはオブジェクトの methods に定義する
• そのときの this は Vue インスタンスを指す
• アロー関数を使うと this が外側に固定されてしまい、Vue インスタンスを参照できなくなる

new Vue({
  el: "#app",
  data: { count: 0 },
  methods: {
    normalFunc: function() {
      console.log(this.count); // OK → Vueインスタンス
    },
    arrowFunc: () => {
      console.log(this.count); // NG → undefined
    }
  }
});

new Vue({
  el: "#app",
  data: { count: 0 },
  methods: {
    normalFunc: function() {
      console.log(this.count); // OK → Vueインスタンス
    },
    arrowFunc: () => {
      console.log(this.count); // NG → undefined
    }
  }
});

👉 Vue 2 では methods には function式を使うのが基本。

Vue 3（Composition API）

• setup() 内で関数を定義するスタイルが主流
• this を使わず、ref や reactive を直接参照する
• そのため アロー関数を自由に使える

import { ref } from "vue";

export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    return { count, increment };
  }
};

import { ref } from "vue";

export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    return { count, increment };
  }
};

Svelte の場合

• Svelte は「コンパイル時にリアクティブなコードに変換」される仕組み
• this をほとんど使わない設計になっている
• 関数は基本的に アロー関数で書いて問題なし

<script>
  let count = 0;
  const increment = () => count++;
</script>

<button on:click={increment}>
  クリック {count}
</button>

<script>
  let count = 0;
  const increment = () => count++;
</script>

<button on:click={increment}>
  クリック {count}
</button>

👉 Svelte では this を意識する必要がほぼなく、アロー関数が自然に使える。

✅ まとめ

• React
  • クラスコンポーネント → this 問題あり、アロー関数で解決
  • 関数コンポーネント → this 不要、アロー関数が基本
• Vue 2
  • methods 内は function式を使う（アロー関数だと this が壊れる）
• Vue 3
  • Composition API では this を使わないのでアロー関数でOK
• Svelte
  • this を使わない設計 → アロー関数が自然にフィット

💡 まとめると：

• 古い設計（Vue 2, React クラスコンポーネント） → this が絡むので function式が必要な場面あり
• 新しい設計（Vue 3, React Hooks, Svelte） → this を使わないのでアロー関数が基本