こんにちは!
タダケン(@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
参考書籍
- 作者: mio
- 出版社/メーカー: シーアンドアール研究所
- 発売日: 2018/05/29
- メディア: 単行本（ソフトカバー）
- この商品を含むブログを見る
