【初心者向け】(ほとんど)未経験の私が嵌った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

JavaScript

2. Vue.jsで書いた時

HTML

JavaScript

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

嵌められた罠たち

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

1つめ:this. の罠

さっきのコードに似ているけれど、これだと動かない

さっきとここが違う

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

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

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

… はずなのに上手くいかない。

実は import... だけじゃなくてコンポーネントを登録しなければいけない

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

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

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

… はずなのに上手くいかない。

データを取得する前にHTMLが動いてしまっているのが原因

なので、「 data が用意出来たら表示してくださいねー」と教えてあげる必要がある

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

まとめ

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

その他 参考文献

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

JavaScript, Vue.js