CDN版のVue.jsでコンポーネントを別ファイルに分ける #JavaScript

Vue.jsの初学者にはCDN版がオススメ

Vue.jsを始める際にCDNでやるべきか、webpackでやるべきか・・・と悩む人が多いと思います。個人的にはwebpack is 何？って人はCDNからやってVueの楽しさを知るべきだと思います！

公式のガイド読みながら手を動かしていくと、途中で「コンポーネント」の話が出てくると思います。main.jsの中に全部書いてもいいんですけど、別ファイルに分けたいな～って思ったときに良いやり方が見つからなかったのでシェアです！

コンポーネントに分ける

想定するディレクトリ構成こんな感じです

index.html
src
├── QuerySearchContent.js
├── QuerySearchResult.js
└── main.js

index.html

...
  <body>
    <div id="app">
      <query-search-content></query-search-content>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="src/QuerySearchContent.js"></script>
    <script src="src/QuerySearchResult.js"></script>
    <script src="src/main.js"></script>
  </body>
...

main.js

new Vue({
  el: '#app',
  ...
})

QuerySearchContent.js


Vue.component('query-search-content', {
  ...
})

その① scriptタグで読む

一番簡単なのはscriptタグで読む方法です！
コンポーネントが少ない場合はこちらの方がお手軽。main.jsを読み込む前に記述するようにしましょう。

index.html

...
  <body>
    <div id="app">
      <query-search-content></query-search-content>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script src="src/QuerySearchContent.js"></script>
    <script src="src/QuerySearchResult.js"></script>
    <script src="src/main.js"></script>
  </body>
...

その② main.js内で動的に読み込む

基本的に①でいいんですが、コンポーネント数が多くなるとちょっと煩雑ですよね。
vueの公式でも紹介されているaxiosというAjaxっぽいことができるライブラリを使って読み込む方法を試してみましょう

index.html

...
  <body>
    <div id="app">
      <query-search-content></query-search-content>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

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

基本的にはjsファイルの場所を探してアクセスし、eval関数で解釈する方法です

main

function getComponents (src) {
  axios
  .get(src)
  .then(response => {
    eval(response.data)
  })
}
getComponents('src/QuerySearchContent.js')
getComponents('src/QuerySearchResult.js')
getComponents('src/ContentTable.js')

new Vue({
  el: '#app',
  ...
})

この方法は動くんですが、デベロッパーツール上では以下のようなエラーが出ます（おそらくjavascriptの読み込み順の問題？）。

error

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

(found in <Root>)

試行錯誤したのですが、いい解決法が見つからなかったので、もし分かる方いれば教えていただけると幸いです＞＜

規模が大きくなってきたらvue-cliを使いましょう

今回紹介した方法は規模が大きくなったり本格的に開発する場合はオススメできません。
vue-cliというツールを使うことで、簡単にwebpack付きの開発・ビルド環境が整い、コンポーネント化もラクラクできるので、慣れてきたらそれを使いましょう！

Vue.js を vue-cli を使ってシンプルにはじめてみる

とはいえコンポーネントに分割しておけば、vue-cliへの移行もスムーズにできると思うので、CDN使う場合でもコンポーネントに分けることをオススメします。

CDNを使う場合はプロトタイプとして使用して、本格的にデプロイする前にvue-cliなどでwebpackを導入してビルドするのが個人的にオススメです！