【Vue.js】let self = this;これって本当に必要?

コメントいただき、文章訂正しました(2024/8/22)　

備忘録です。

Vue.jsにて、

let self = this

を使っているのに対して、
「それって本当に必要なの？」と疑問に思ったので調べてみました。

結論

let self = this; が必要な時

thisのコンテキストが変わる可能性がある場合には、let self = this;が必要です。
(const self = thisやvar self = thisの時もありますね)

コンテキストって何やねんという方は次の見出しに先に飛んでください

例えば非同期処理を使う時↓

vue.js

methods: {
    hogeFunction: async function () {
      const self = this; // ⭐️これ
      axios
        .delete(
          process.env.VUE_APP_HOGE_API,
          { headers: { "Content-Type": "application/json" } }
        )
        .then(function () {
          self.isHoge = true; // ⭐️
        })
        .catch(function (error) {
          console.log(error);
        });
    },
}

let self = this; が不要な時

一方、thisのコンテキストが変わらない場合にはlet self = this;は不要です。例えば、クラスのメソッドや、thisのコンテキストが固定されている場合です。

例えばこんなの　↓

vue.js

methods: {
    hogeFunction: function () {
      const self = this; // 定義する必要ない
      self.isHoge = true; // thisで十分
    },
}

この場合
selfとthisが同じ役目を果たすため、selfを使ってエラーが起こるわけではありませんが、「何でもかんでもself使えばいいや」みたいなのはやめたい！

コンテキストって何？　わかりやすく言わんかい

「コンテキストが違う」
「コンテキストが同じ」
わかりづらいですね。コンテキストってなんやねんって。

「プログラムを実行するために必要な各種情報や設定」を意味します
https://www.hrbrain.jp/media/human-resources-development/context

例え話での説明

佐藤家では、食卓時の「アレ」はリモコンです。
鈴木家では、食卓時の「アレ」はプロテインです。
この「アレ」が変わるのは、コンテキスト（文脈）が異なるからです。コンテキストが違うと、「アレ」が指すものも違ってきます。

ある日、佐藤さんが鈴木さんの家に遊びに行きました。
佐藤さんが「アレ、取って」といってみました。
すると、鈴木さんに「アレって何?」と言われました。

コンテキスト(文脈）が違うと、「アレ」は使えなくなったり別のものになったりします。
この「アレ」がjsでいう「this」に当たります。
thisも環境によって、何を表すかが全然違います。

コードで例えを表してみる

vue.js

hogeFunction() {
  // 佐藤さんからみた視点
  let self = this // ❶佐藤さんちの「アレ（リモコン）」をselfと名付ける
  let result = axios
  // ========== 鈴木さん家に入った ============
  .get(
    process.env.VUE_APP_GET_API)
  .then(function(){
    console.log("self（Vueインスタンスの中のthis）：", self) // ❷「リモコン（self＝佐藤さん家のアレ）取って」→通じる
    console.log("this：",this) // 鈴木さん「急にアレって言われてもわからん」→通じない！
  })
  // ========== 鈴木さん家を出た ============
  console.log(this) // リモコン（佐藤さん家のアレ)→通じる
  return result
}

こんな感じになります。
つまり、どういう文脈で「this」を使うのか、気にしないといけません。
ここは自分のいつも使っている「this」なのか、人んちの「this」なのか。
アロー関数を使うときなどに「this」の中身が変わるので注意が必要です。

thisとは

ほとんどの場合、this の値はどのように関数が呼ばれたかによって決定されます (実行時結合)。これは実行時に代入によって設定することはできず、関数が呼び出されるたびに異なる可能性があります。

thisとself(let self = this)は同じではない

vue.js

    async get() {
      let self = this
      let result = axios
      .get(
        process.env.VUE_APP_GET_API)
      .then(function(){
        console.log("self：", self)
        console.log("this：",this)
      })
      return result
    }

出力結果

self: Proxy(Object){~~~}
this: undefined

ご覧の通り
selfには値が入っていて、
thisには値が入っていませんでした。

self と thisは同じように使うことが多いですが
同じではないということです。

感想

thisを使う場合は、コンテキストを考えて、必要であればlet self = thisを使いたい。