今回はVue.js初心者向けの内容。
先日、今まで全くVue.jsの開発をしたことがない(もしかしたらJavaScriptも初めての)後輩の同僚に、簡単なマニュアルを渡したうえで、Vue.jsの変更を行ってもらった。
任せてみると、地頭の良い子だけあって、それほどつまずくこともなく完了。ただ、ソースコードを見てみると、テンプレート内のマスタッシュ構文内で、引数のない呼び出しを、methodsで定義して呼び出している箇所があってちょっと気になった。ようは、下記のようなコード(もちろん、実際にはこんな単純ではない)。
<template>
<div>
<h1>{{hello()}}</h1>
</div>
</template>
<script>
export default {
data(){
return {
name: 'Vue'
}
},
methods: {
hello() {
return `Hello! ${this.name}`;
}
}
};
</script>
これでも問題があるわけではないのだけど、個人的に、引数のない関数は、methodsではなく、computedで定義してほしい。どうしようかと迷ったのだけど、期間的にも余裕があるということで、『vue.jsのcomputedとmethodsの使い分け』のページを伝えたうえで、computedで実装しなおしてほしいと伝えた。
その日、自分は定時すぎて早めに帰ったのだけど、後輩はまだ帰らず。そして、会社をでて30分ぐらいたってから後輩からSkypeで連絡があった。どうやら、computedに移行したけど、呼び出し部分で「This expression is not callable. Type ‘String’ has no call signatures.」というエラーがでてしまうそう(翌日分かったのだけど、このエラーはVeturが出力しているエラーメッセージだった)。
すぐに「明日、確認します。」と返信したものの、エラーメッセージを、英語が苦手なりに推測してみた。「この式は呼べない。String型はシグネチャを呼ばない」みたいな感じかと思って、予想がついた。computedに移行したのはいいものの、テンプレート内の構文変更してないなと。つまり、下記のようにしているのだろうと思い、実際、翌日確認すると予想通りだった。
<template>
<div>
<h1>{{hello()}}</h1>
</div>
</template>
<script>
export default {
data(){
return {
name: 'Vue'
}
},
computed: {
hello() {
return `Hello! ${this.name}`;
}
}
};
</script>
Vue.jsをある程度勉強してきた人なら分かりますが、computedで定義したメソッドは、テンプレート内ではプロパティとして呼び出します。つまり、正確には『{{hello}}』と書かないといけないわけです。
直接こちらで修正しようかとも迷ったのだけど、初歩的な間違いではあるので、下記のように伝えてもう少し考えてほしいと伝えた。
- エラーメッセージを日本語訳するなどして、どういう時に発生するエラーなのか推測する
- vue.jsのcomputedがどういうものか調べる(公式のドキュメントを調べるのが理想)
- 他のcomputedを使っている箇所を調べて参考にする
さすがに、ここまで伝えるとすぐに気づいてくれたのだけど、Vue.js初心者にははまってしまいがちなのかもと思った。自分も、computedはメソッドで定義しているのに、プロパティとして呼び出すということに、最初はちょっと違和感があったので、こういう間違え方をしてしまうのはなんとなく分かる気がする。
そう考えると、本来なら、Vue.jsの勉強をある程度してもらってから開発に携わってもらったほうがよかったのかな…。まあ、コードを書いてもらいながら勉強して、こちらでつどコードレビューしたらいいか。
コメント