Vue.jsをCDN経由で読み込みつつコンポーネントを別ファイルに分ける

簡単に実装するためにVue.jsをCDNで読み込んでいるような環境で、パーツをコンポーネントに分け、かつ、コンポーネントを別ファイルにするようなとき、どうしたら良いかについてのメモ書きです。

TL;DR

こちらの記事でファイナルアンサーです。

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

コツは、vueファイルではなくjsファイルに書きだして、scriptタグで読み込むってことですね。なるほど。レッツトライ！

やったこと

改修前

index.html

改修後

index.html
app.js
components/
 └ global_header.js

コード例（抜粋）

index.html

<html>
<body>
<div id="app">
 <b-container fluid>
   <global-header></global-header>
   <!-- ここにコンテンツを入力する -->

   <!-- //コンテンツ入力ここまで -->
 </b-container>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<script src="./components/global_header.js"></script>
<script src="./app.js"></script>
</body>

</html>

app.js

new Vue({
 el: '#app',
 components: {
   'global-header': globalHeader,
 }
}

global_header.js

const globalHeader = {
 template: `header`
}

前提条件

フロントエンドの設計工程において、非技術者にモックアップを触ってもらうというフェーズがあります。単なるビジュアルデザインのチェックではなく、使い勝手まで踏み込むようなデザインの確認。もちろんバックエンド部分はサンプルデータでOKですが、実際の使い勝手に関わる部分、例えばレスポンシブの切り替えだとか、カルーセルの動き方だとかといった部分については本番と同様の動きをさせる必要があります。

一方であくまでモックアップであり、要望に従って素早く組み替えられるようにすることが理想です。大規模なフレームワークを導入してしまうと、雑でもいいから素早くということがなかなかしづらい。例えばHTMLファイル1つで動くようにしておけば、その分コードの読みやすさやメンテナンス性は失われるけれど、環境を整備する必要がなく素早く展開出来ます。

正解は変わっていく

とまあ、そういう前任者の思想で設計段階ではかなり雑なモックアップが作られることになっていて、僕もそれを継承しているのですが、開発を進めていくとまあとにかくモックアップの制作がだるい。例えば「企業概要」ページを新しく作るとなったとき、既に設計が終わっているヘッダーだとかメニューだとかフッターだとか、そういう部分は見る必要がなく、コンテンツだけを差し替えたい……のだけど、1ファイルにまとまっている長大なHTMLファイルをいちいち検索しないといけないし、同じ構成が出てきたら何度も同じことを書かないといけない。素早く展開させるためにやったことが、逆に足を引っ張ると言うね。あかん。

というわけで、「1ファイルにするのがもっともシンプル」という考えを改めて、「確定した部分はコンポーネント化して別ファイルに書き出す」というルールで真のシンプル目指したってことです。

何が正解で何が間違いという単純なことではなくて、「何が正しいか」というのもプロジェクトの進行によって変わるってことですよね。うん。