書き方で変わる?! Vue.jsでthisのスコープを調査した

こんにちは!
タダケン(@tadaken3)です。

最近、Vue.jsを勉強しつつ、WEBサービスを作っています。

Vue.jsを勉強している中で、Vueインスタンスのmethodsなどで、インスタンスのthisを参照しようとした場合、うまく参照できないパターンがあり苦労しました。

自分の理解を深めるためにVue.jsでのthisの参照パターンについてまとめてみました。

まだ、勉強中の身なので、もし間違えや認識違いなどあれば、ご指摘いただけますと思います。

Vue.jsの基本となるサンプルコード

まずは基本となるサンプルコードです。

ボタンを押すと、incrementメソッドが実行されて、countの値をひとつずつ増やしてくシンプルなVueのコードを用意しました。こちらのコードをベースにthisのスコープがどのように変わっていくのか確認していきます。以降のサンプルでは、JavaScript以外のHTML / CSSの部分は同じものになります。

See the Pen VueのSample | デフォルトパターン by タダケン@人事×データサイエンス (@tadaken3) on CodePen.

methodsの書き方の違いでthisのスコープが変わる

JavaScriptではいくつかの方法で関数を書くことができます。しかし、関数の書き方によって、thisのスコープが異なるので、注意が必要になります。

アロー関数を使用した場合

まずは、NGパターンからです。

アロー関数はES2015（ES6）から利用可能になったJavaScriptの新しい構文の一つです。アロー関数が宣言された時点で、thisを確定します。そのため、Vueインスタンスにアクセスすることができません。

実際にボタンを教えてみても、カウントは0のままです。

See the Pen NGパターン | アロー関数 by タダケン@人事×データサイエンス (@tadaken3) on CodePen.

短縮記法の場合

続いて、OKパターンです。

methodでアロー関数を使用すると、thisを使ってVueインスタンスにアクセスできないことがわかりました。

そのため、コードを短くしたい場合、短縮記法を使用しましょう。

See the Pen OKパターン | 短縮記法 by タダケン@人事×データサイエンス (@tadaken3) on CodePen.

コールバック関数でthisを参照する場合

コールバック関数でthisを参照する場合も注意が必要です。たとえば、以下のコードもVueインスタンスのthisを参照することができません。なんということでしょう。

See the Pen NGパターン | コールバック関数でthisのスコープが参照できない by タダケン@人事×データサイエンス (@tadaken3) on CodePen.

コールバック関数でthisを使って、Vueインスタンスに参照するには

コールバック関数でthisを使って、Vueインスタンスを参照するにはどうしたらいいのでしょうか。この場合、いくつかの方法があります。

パターン①

まずはあらかじめthisを別の変数に代入しておくパターンです。

See the Pen OKパターン | 変数にthisを代入 by タダケン@人事×データサイエンス (@tadaken3) on CodePen.

パターン②

bindでthisを紐づけた関数を作成するパターンも期待通りの動作をします。

See the Pen OKパターン | bindでthisを紐付ける by タダケン@人事×データサイエンス (@tadaken3) on CodePen.

パターン③

また、少しややこしいですが、コールバック関数で、アロー関数を使う場合も、Vueインスタンスを参照することができます。

See the Pen OKパターン | コールバック関数でアロー関数を使う by タダケン@人事×データサイエンス (@tadaken3) on CodePen.

パターン④

無名関数ではなく、Vueインスタンスのメソッドとしてする方法でもthisにアクセスできます。ただ、こちらも少しややこしいので、基本的にはあまり使わないほうがいいかもしれません。

See the Pen OKパターン | Vueインスタンスのメソッドを指定 by タダケン@人事×データサイエンス (@tadaken3) on CodePen.

まとめ

Vueを使用した場合のthisのスコープについて、あらためて、まとめてみます。

Vueインスタンスのthisを参照したい場合は

• アロー関数は使えない
• コードを短くしたい場合は短縮記法を使う。

また、コールバック関数からVueインスタンスのthisを参照したい場合は、

• ①変数に代入する
• ②bindする
• ③アロー関数を使う

とするのが良さそうです。Vue.jsを学び始めた人の参考になればと思います！

↓Twitterもやっています。 twitter.com

参考書籍

基礎から学ぶ Vue.js