Vue.jsあるある（かもしれない）
今回は、小話に近いくらい短いです。申し訳ありません。
ちょいとJavaScriptのフロントエンドを書いてます。
もともとangularJS, Reactをポチポチ書いていたのですが、
angularは半年に一回メジャーバージョンアップするって言うし、
Reactはfacebookがバックにいて、私はいまいちfacebookが好きになれないし（情報漏洩疑惑とかなんとか）
で、ミーハー的な好奇心で Vue.jsに絶賛浮気中です。
Vue.jsは
を見てもらって概要を掴んでいただくとして、
今日はわかっちゃいるがやってしまう「あるある」について
そう、例のthis問題です。
<body>
<div id="app">
{{message}}
<button v-on:click="change('変更！')">変更</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'hoge',
},
methods: {
change: (val) => {
this.message = val;
},
}
})
</script>
</body>みたいなコードを書いちゃうんですよね。
当然、変更ボタンでdata部のmessageの内容は変わりません。
どこが悪いかというと「methods」部です。
本当なら
methods: {
change: function(val) {
this.message = val;
},
}こうしないとダメです。
でもね、もう、function なんて長ったらしい文字を書く癖がかなり抜けているので、ついついラムダ式で書いちゃうんですよ。
で、エラーにもならないから、どこでデータが変化しないかがなかなかわからないと言うジレンマ。
全部ラムダ式に統一できたらどれだけ楽でしょうか。
また、typescriptが羨ましくなってきました。
では、今日はこの辺で。
ソフトウェア・エンジニアを40年以上やってます。 「Botを作りたいけど敷居が高い」と思われている方にも「わかる」「できる」を感じてもらえるように頑張ります。 よろしくお願い致します。