ここにハマったVue.js 〜初心者が送るクリスマスソング3選〜

こんにちは。りまりま団のもふもふです。Vue.js #3 Advent Calendar 2018の25日目の記事です。

qiita.com

クリスマス当日やぞ！ということで、クソアプリ Advent Calendar 2018用のアプリケーションを作っているときや 普段開発していて？？？？？となったエラー文やこういうことしたいけどどうすれば良いのかわからん〜〜となったことを書いていきたいと思います。将来の自分のためのクリスマスプレゼントだ！

imgタグのsrcに正しいパスを記載したのに表示されない

TwitterアイコンをVue.jsのアプリケーションに組み込みたくなった、と仮定します。Twitterアイコンは公式サイトからダウンロードし、 src/assetsディレクトリに配置しました。Vue.jsのアプリケーションはVue CLIで作成しています。GitHubのアイコンも同様に組み込みたいとします。

v-bindで画像のパスを割り当てれば良いのだろうと考え、data部に画像のパスを記載しました。もちろんls -alでパスが正しいことは確認しています。

<template>
  <div class="page-footer">
    <div class="icons">
      <a href="https://twitter.com/froakie0021" target="blank"><img :src="twitter_src" alt="twitter"></a>
      <a href="https://github.com/MofuMofu2/portfolio-vue" target="blank"><img :src="github_src" alt="github"></a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'pageFooter',
  data() {
    return {
      twitter_src: "../assets/footer/Twitter_Social_Icon_Rounded_Square_Color.svg",
      github_src: require("../assets/footer/GitHub-Mark.svg")
    }
  }
}
</script>

ところが残念、この場合は画像が表示されないのです。正しくは、Twitterのアイコンだけ表示されません。Vue Devtoolsを使って コンポーネントに割り当たっているデータを確認します。

twitter_src: "../assets/Twitter_Social_Icon_Rounded_Square_Color.svg"
github_src: "/img/GitHub-Mark.4336b50b.svg"

Twitterの画像ファイルパスは文字列で割り当てられてしまっています。Vueアプリケーションが動作する際に参照しているのはdistディレクトリの中です。 アプリケーションの実行前にassetsディレクトリから自動的にデータを引っ越してくれるのです。 しかし、Twitterアイコンのパスは../assetsとなっています。その結果、画面は正しく描画されているけれど画像がないように見えるのです。

解決方法

requireを利用することで、画像ファイルのパスを正しく描画することができます。初めてだとかなり詰まるポイントだと思います。

<script>
export default {
  name: 'pageFooter',
  data() {
    return {
      // 間違ってる例
      twitter_src: "../assets/footer/Twitter_Social_Icon_Rounded_Square_Color.svg",
      // 正しい例
      github_src: require("../assets/footer/GitHub-Mark.svg")
    }
  }
}
</script>

[Vue warn]: Unknown custom element:

コンポーネントをインポートしようとすると、たまにこんなエラーが出てきます。はコンポーネント名です。

[Vue warn]: Unknown custom element: <aa> - did you register the component correctly? For recursive components, make sure to provide the "name" option. - did you register the component correctly? For recursive components, make sure to provide the "name" option.

記載の通り、コンポーネントが正しくインポートできていないのが原因ですが、焦るとドツボにハマって2時間くらい溶けてしまいます。

解決方法

次のリストに当てはまるものがないか見直しを行います。<aa>で文字列検索をかけてタイプミスがないかを見直すと良いです（5敗）。

  • コンポーネントのインポート名が間違っていないか
  • コンポートのインポート漏れがないか
  • インポートしていないコンポーネント名をtemplateに記載していないか
  • HTMLタグを書き間違えていないか（1敗）
  • <div>タグを書こうとして<div>を書き忘れていないか（2敗）

Cannot read property 'fuga' of undefinedが出てきて画面が真っ黒/灰色になる

画面が変わらない場合でも、コンソールに同じエラーが出てくる場合があります。undefinedになっている値が画面の描画に直接関わっていて、画面が描画できるかどうかが違いなのではと思っています。

コンソールに表示される例

画面に表示される例

これはVue.jsではなく、JavaScriptのエラーです。このQiitaがわかりやすいです。 'fuga'がUndefinedになっているので、fugaの値を決めている処理で何かしらundefinedになる原因が含まれているはずです。 これはもう地道にデバッグツールでデバッグするしかありません。

解決方法…？？？

どうやってするのか？それを書くと長くなってしまうので、この本に書きましたよ。

f:id:MofuMofu:20181225122554p:plain

『Vue.jsでKUSOアプリ作ってみた』という本なのですけれども…。

BOOTHで一足早く販売も始めました。これから試し読みも作る予定です🥺

コミックマーケット95の2日目（12/30・日曜日）！東6ホールト49aりまりま団をよろしくお願いしまーす！