【初心者向け】(ほとんど)未経験の私が嵌ったVue.jsの罠

JavaScript, Vue.js

この記事は最終更新日から1年以上が経過しています。

初めて投稿します。新卒1年目の大久保です。
10月に現在の部署に配属されて初めてVue.jsを触りました。
というわけで、(ほとんど)未経験だった私がまんまと嵌められたVue.jsの罠についてご紹介します。

投稿の位置付けを 「未経験の人はここで苦労するんだよなーというのを知ってもらう」にしているので、
その気持ちで読んでいただけたら嬉しいです。

ちなみにですが、
入社時のプログラミング知識としては大学でやっていたが自分が何をしていたのか説明できない知識の無さで
HTML→知らない CSS→聞いたことない JavaScript→Javaの正式名称？
レベルでした(本当)。

Vue.jsとは

Vue.jsの公式サイト
JavaScript のフレームワークの1つ。コンポーネント指向なのでコードの再利用がしやすい(らしい)。
同じコードをjQuey(JavaScriptのライブラリの1つ)とVueで書いたときの見た目分量はこんな感じ

1. jQueryで書いた時

HTML
  <h1>jQuery</h1>
  <div>
    Hello <span id="message">World</span> !
    <button id="update">change</button>
  </div>

JavaScript
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).on('click', '#update', function() {
      $('#message').text('jQuery')
    })
  </script>

2. Vue.jsで書いた時

HTML
<template>
  <div id="app">
　　<h1>Vue.js</h1>
    Hello {{ message }} !
    <button @click="update">change</button>
  </div>
</template>

JavaScript
  export default {
    data() {
      return {
        message: 'World'
      }
    },
    methods: {
      update() {
        this.message = 'Vue.js'
      }
    }
  }

スッキリしていると言われればスッキリしているかも…？
Vueの方はidで指定などがなくそのまま変数を書けばいいので「JSで指定するためのid」というのは減る気がします。

嵌められた罠たち

大前提：そもそもJavaScriptを知らないのでJavaScriptの罠がほとんどな気がします

1つめ：this. の罠

さっきのコードに似ているけれど、これだと動かない
<template>
  <div id="app">
      Hello {{ message }} !
      <button @click="update">change</button>
    </div>
</template>

  export default {
    data() {
      return {
        message: 'World'
      }
    },
    methods: {
      update() {
        message = 'Vue.js'
      }
    }
  }

さっきとここが違う
    methods: {
      update() {
　   // これだと動かない
　　　message = 'Vue.js'
　   // これだと動く
　   this.message = 'Vue.js'
      }
    }

this.の書き忘れによりundefinedになったり思ったようにプログラムが動かないことが多々
めちゃめちゃ多い
undefinedエラーが出たら99%の確率でどっかに this.が無いってくらいこの人のせい

2つめ：コンポーネントの罠

先ほどまで登場したファイルを components/HelloWorldComponent.vue というコンポーネントとすれば、
そのコンポーネントをインポートすることでさっきのファイルと同じ動作をする。

… はずなのに上手くいかない。
<template>
  <div id="app">
    <hello-world-component></hello-world-component>
  </div>
</template>

import HelloWorldComponent from '~/components/HelloWorldComponent'
export default {
}

実は import... だけじゃなくてコンポーネントを登録しなければいけない
<template>
  <div id="app">
    <hello-world-component></hello-world-component>
  </div>
</template>

import HelloWorldComponent from '~/components/HelloWorldComponent'
export default {
  // これが必要
  components: {
    HelloWorldComponent
  }
}

この登録忘れもなかなか多い。

3つめ：APIを使うときの罠

APIを使うときに async , await を使用し非同期処理を行うことでエラーが発生せず取得データが表示される！

… はずなのに上手くいかない。
<template>
  <div id="app">
    Hello {{ data.name }} !
    <button @click="update">change</button>
  </div>
</template>

export default {
  data() {
    return {
      data: null
    }
  },
  beforeMount() {
    this.fetchRepresent()
  },
  methods: {
    async fetchRepresent() {
      const data = await this.$axios.get('/artist/represent')
      this.data = data.data
    },
    update() {
      this.data.name = 'Vue.js'
    }
  }
}

データを取得する前にHTMLが動いてしまっているのが原因
<template>
  <div id="app">
    <!-- dataがnullの状態でdata.nameにアクセスしようとしているのでエラーになってしまう -->
    Hello {{ data.name }} !
    <button @click="update">change</button>
  </div>
</template>

なので、「 data が用意出来たら表示してくださいねー」と教えてあげる必要がある
<template>
  <!-- ここに v-if="data" を追加 -->
  <div id="app" v-if="data">
    Hello {{ data.name }} !
    <button @click="update">change</button>
  </div>
</template>

これでエラーを出ることなく動いた！

まとめ

Vue.jsとかJavaScriptが嵌めてきた訳ではなく私が勝手に嵌められただけでした。
この1ヶ月間の「なんでエラーになるんだ」系のミスはVue.jsはおろかJavaScriptさえ初心者だった私にとって「書き方の慣れてなさ」からくるものが多かったなという印象です。
今はエラーが発生したときにまずここら辺を疑うことでだいぶ解決できる様になってきましたが、
まだまだ勉強するところは多いなと改めて感じました。

その他 参考文献

【Vue.js入門】特徴や他のフレームワークとの比較などを紹介！
jQuery から Vue.js へのステップアップ

JavaScript, Vue.js