プログラミングこんにちは!タダケン(@tadaken3)です。最近、Vue.jsを勉強しつつ、WEBサービスを作っています。Vue.jsを勉強している中で、Vueインスタンスのmethodsなどで、インスタンスのthisを参照しようとした場合、うまく参照できないパターンがあり苦労しました。自分の理解を深めるためにVue.jsでのthisの参照パターンについてまとめてみました。勉強中の身なので、もし間違えや認識違いなどあれば、ご指摘いただけますと思います。Vue.jsの基本となるサンプルコードまずは基本となるサンプルコードです。ボタンを押すと、incrementメソッドが実行されて、countの値をひとつずつ増やしてくシンプルなVueのコードを用意しました。こちらのコードをベースにthisのスコープがどのように変わっていくのか確認していきます。CSSの部分は同じものになります。CodePen.methodsの書き方の違いでthisのスコープが変わるJavaScriptではいくつかの方法で関数を書くことができます。関数の書き方によって、thisのスコープが異なるので、注意が必要になります。アロー関数を使用した場合まずは、NGパターンからです。アロー関数はES2015(ES6)から利用可能になったJavaScriptの新しい構文の一つです。アロー関数が宣言された時点で、thisを確定します。そのため、Vueインスタンスにアクセスすることができません。実際にボタンを教えてみても、カウントは0のままです。続いて、OKパターンです。methodでアロー関数を使用すると、thisを使ってVueインスタンスにアクセスできないことがわかりました。そのため、コードを短くしたい場合、短縮記法を使用しましょう。CodePen.コールバック関数でthisを参照する場合コールバック関数でthisを参照する場合も注意が必要です。以下のコードもVueインスタンスのthisを参照することができません。なんということでしょう。CodePen.コールバック関数でthisを使って、Vueインスタンスに参照するにはコールバック関数でthisを使って、Vueインスタンスを参照するにはどうしたらいいのでしょうか。この場合、いくつかの方法があります。パターン1まずはあらかじめthisを別の変数に代入しておくパターンです。CodePen.パターン2bindでthisを紐づけた関数を作成するパターンも期待通りの動作をします。CodePen.パターン3また、少しややこしいですが、コールバック関数で、アロー関数を使う場合も、Vueインスタンスを参照することができます。CodePen.パターン4無名関数ではなく、Vueインスタンスのメソッドとしてする方法でもthisにアクセスできます。こちらも少しややこしいので、基本的にはあまり使わないほうがいいかもしれません。CodePen.まとめVueを使用した場合のthisのスコープについて、あらためて、まとめてみます。Vueインスタンスのthisを参照したい場合はアロー関数は使えないコードを短くしたい場合は短縮記法を使う。コールバック関数からVueインスタンスのthisを参照したい場合は、1変数に代入する2bindする3アロー関数を使うとするのが良さそうです。Vue.jsを学び始めた人の参考になればと思います!↓Twitterもやっています。Vue.jsでthisのスコープを調査した関連記事2019-08-05BIツール「Tableau」の基礎の基礎!地理情報を使ってデータを可視化するTableauを使ってジオグラフィックを作成する方法を解説していま...2018-12-312018年のタダケンをふりかえる2018年のふりかえりをしました。はてなブログProとある会社のデータサイエンティストです。