VueでTodoリストを作ろう #3 微進

今週もWebサイト制作記を進めていきます。
今日こそHTMLとJavaScriptの連携をうまくやって内部の実装に進みたい。

HTML-js連携を図る

前回http-serverを導入してブラウザでファイルを開くところまで進みました。
今日はここのエラーを紐解いてHTMLとJavaScriptの連携の可能性を探ります。

faviconのエラーに関してはfavicon.ico(ブラウザのタイトルにつけるアイコンだったはず)が無いと言うものなのでおそらく関係がありません。
関係があるのは以下のエラー文でしょう。

Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

ふむ.…

少し調べた結果インポートマップなるものが必要だったということで追加してみました。これで動くかな？

動きません。
ですが先ほどとはエラー内容が違っている様子。今度はこれの原因を見てみましょう。
main.jsの1行目でシンタックスエラーが出ていますね。
どうやら’vue’にはdefaultなんてないぞ！というエラーらしい。

恐らくこの三行目にあるdefaultだと思いますが、これを消すと今度はexportがエラーになってしまいます。参ったな。

エラーログを見る限りインポートそのものに問題がある様子。どうしたものか…

調べ続けた結果、main.jsの中にVueを書いていること自体が大間違いなよう。もっと早く気づけという感じですが。
main.jsはVueコンポーネントのインポートにしか使わないみたいな運用の方が正しいようです。

こんな感じに変更したところ、以下のエラーに変わりました。

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.

全然原因がわからなかったし、タグで囲うのがなんとなく嫌だったのでjsファイルに変更。

なんか実行結果が変わりました。{{message}}が消えたので連携自体はできているような気がします。エラー文は以下。

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

App.jsにnameオプションをつけ、インポート名とかをAppに変えたところまた別のエラーに。

解決しました。main.jsのtemplate内に謎の<App/>が記載されていたのが原因でした。ちゃんとApp.jsのmessageが表示されるようになった。
良かった.…

時間切れ

やっと長かったHTMLとJavaScriptの連携に終止符を打つことが出来、ここからどうやってApp.jsのtemplateを表示するかというところに移るのですが残念ながら今日はここで時間が切れてしまいました。

次回はApp.jsのこの辺を表示するようごたごたしようと思います。
これ、連携部分が終わったとは言えないのでは.…？

この辺気になるので近いうちにまた続きを書こうと思います。来週は休みで記事を書く時間がないので、今週中にやっておきます。