Web系エンジニアを目指して転職活動をしているSierです｡ とある企業様の課題を解いている際に､ふと疑問に思ったことを記事にしていきます｡
前置き
その課題はVue.jsを使ったものでした｡私はほぼ初めて触りましたが 明確にメンバとメソッドが分けられていてわかりやすい印象を受けました｡
もともとCやC++から勉強した人間のため､Angularの書き方が一番しっくり来ていたのですが Vueもあまり変わらないなと思いました。
ふと､Vueのメソッド内で､ローカルで定義されているメンバへアクセスしたい課題がありました。 その差異､｢this.hogehoge｣みたいな形でアクセスできると思っていましたがエラーが起きました。 しばらく???となっていました｡
原因と解決策
原因を色々調べていると､どうやらメソッドの定義の仕方が悪かったようです｡
methods : { 'XXX' : () => { this.hogehoge} } // NG
methods : { 'XXX' : function { this.hogehoge } } // OK
どうやら､アロー関数とそうでないメソッド定義によって､色々と異なるようです｡ 詳しくは以下の記事に記事に色々書いているため端折ります｡ 今回は､その性質の１つ､thisのスコープの違いのようです｡
