【プログラミング】Vueの学習中に出たエラーの原因がしょうもなさすぎた
スポンサーリンク

どうも、とらのこです。

僕は今ですね、Udemyというオンライン学習プラットフォームでVue.jsのコースを学習しているのですが、その最中にエラーに引っかかって10分ほど悩んでました。でも結果はとても単純で、「予約語」を使っていたからでした。

言語によらず起こり得ることなので、プログラミング言語を学習している人は一読しておくと良いかもしれません。

どんなソースコード書いてた?

Vue.jsの機能であるv-ifディレクティブを学習していたときの話です。

※ちなみにjsfiddleというオンラインIDEを使用して学習しています。環境構築せずに使えるのでプログラミング初心者にはオススメです!

<HTML>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<div id="app">
  <p v-if="isTrue">OK</p>
  <button v-on:click="switch">switch</button>
</div>

v-ifを設定したタグは、ifというくらいですので「もしも○○だったら」というものです。

上記の例で言うと、「もしも”isTrue”の値が真(True)だったら、画面にOKを表示する」という意図を持ったHTMLのコードになります。

”isTrue”の値はVue.js側で定義しているわけですが、「switch」というボタンをクリックすることで、"isTrue"の値を変更できるようにしています。

<Vue.js>

new Vue({
	el: '#app',
	data: {
  	isTrue: false
  },
  methods: {
  	switch: function(){
    	console.log()
    	this.isTrue = !this.isTrue
    }
  }
})

まあ今回はVueのお勉強ではないので説明は割愛しますが、”isTrue”の値を定義したり、「switch」ボタンがクリックされたときの処理を定義しているものです。

スポンサーリンク

どんなエラーが出た?

さて、まずどんなエラーが出たかですが、以下に貼り付けています。

avoid using JavaScript keyword as property name: "switch"
  Raw expression: v-on:click="switch"

1  |  <div id="app">
2  |    <p v-if="isTrue">OK</p>
3  |    <button v-on:click="switch">switch</button>
   |            ^^^^^^^^^^^^^^^^^^^
4  |  </div>

ふむ、僕は英語は空っきりですが、1行目で「”switch”があかんよ〜」と言われていることだけはわかります。

JavaScript keywordをプロパティ名として使うのを避けてくださいよ、と訳せますね。

ここで、JavaScript keywordをググって一番上に出てきたサイトを何の気無しに見てみました。

https://www.w3schools.com/js/js_reserved.asp

そうしたら、ピーンと来ました。

switchって「Reserved Word(=予約語)」じゃないですかー!

Java初めてやったときにめちゃめちゃ聞いたことあるー!

SE5年やってて今更引っかかるとか恥ずかしすぎるー!

と、あまりのしょうもない原因にSE歴6年目の僕は、情け無さに打ちひしがれました。

予約語ってなに?

以下のサイトに用語説明が書いてありました。

https://gimo.jp/glossary/details/reserved%20word.html

つまり、whileやif、switch等の基本的な制御文、制御構造で使用するようなものは、それ自体が意味を持つため、変数名などでは使っちゃいけませんよ、ということですね。

だいぶ初歩的な失敗でした。。

どうやってエラーを解決した?

いたって簡単です。switchを名付けていたプロパティ名を別のものにするだけです。

僕の場合は、switchをisTrueSwitchに変更しました。

メソッド名を命名するときは、その処理の意図を考えてあげるといいですね。

※ちなみにHTMLにswitchがまだありますが、それはボタン名をswitchにしているだけなので、予約語には引っかかりません。

<HTML>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<div id="app">
  <p v-if="isTrue">OK</p>
  <button v-on:click="isTrueSwitch">switch</button>
</div>

<Vue.js>

new Vue({
	el: '#app',
	data: {
  	isTrue: false
  },
  methods: {
  	isTrueSwitch: function(){
    	console.log()
    	this.isTrue = !this.isTrue
    }
  }
})

とらのこ
僕と同じようなミスをしてしまった方も落ち込まないで下さい!今日1つ学びが増えましたよ!そうやって人間は成長していくものだと思って一緒にプログラミング学習していきましょう!
スポンサーリンク

Twitterでフォローしよう

おすすめの記事